@adoptai/genui-components

Schema-driven generative UI components for Adopt agents. 44 composites (tables, charts, cards, financial statements) rendered from validated LLM tool_use payloads.

This package also ships the interactive builders (builders/ — forms, steppers, escalations) and the workflow-stepper used by the process layer. For how all of it is wired across the harness / adoptwebui and how skills + process templates trigger it, see ../../docs/INTERACTIVE_AND_PROCESS_GUIDE.md.

Install

npm i @adoptai/genui-components

Peer dependencies

Required: react, react-dom

Optional (install only what you use): recharts, html-to-image, react-pdf, xlsx, mermaid, @excalidraw/excalidraw

Usage

Render a component from a validated payload

import { GenUIRenderer } from "@adoptai/genui-components";

<GenUIRenderer payload={{ type: "stat-grid", items: [{ label: "Revenue", value: "$1.2M" }] }} />

Build a render_ui tool for the LLM

import { buildRenderUITool } from "@adoptai/genui-components";

const tool = buildRenderUITool(["data-table", "area-chart", "stat-grid"]);
// Pass `tool` to Anthropic messages.create({ tools: [tool] })

Validate an LLM response before rendering

import { validatePayload } from "@adoptai/genui-components";

const result = validatePayload("data-table", llmOutput);
if (result.success) render(result.data);

Exports

| Subpath | What | |---------|------| | @adoptai/genui-components | resolveUI, GenUIRenderer, schemaRegistry, buildRenderUITool, validatePayload, all resolvers, theme tokens | | @adoptai/genui-components/schemas | Schema registry + tool builders only (no React) | | @adoptai/genui-components/styles/contract.css | CSS custom properties for fonts/colors | | @adoptai/genui-components/tool-definitions.json | Static JSON with all 44 tool schemas (for non-JS consumers) |

Components

aging-report, alert, allocation-donut, amortization-table, area-chart, audit-trail, balance-sheet, cash-flow-statement, chart-of-accounts, cited-answer, comparative-bar-chart, compliance-checklist, data-table, depreciation-schedule, document-preview, download-card, engagement-pipeline, entity-card-grid, file-browser, flow-canvas, general-ledger, grouped-table, heatmap-table, income-statement, invoice-detail, job-tracker, journal-entry, key-value-list, legal-test-result, news-feed, ops-dashboard, provenance-chain, reconciliation-view, screener-table, search-results, sparkline-table, stacked-breakdown, stat-grid, status-card, tabs-panel, transaction-feed, trial-balance, variance-analysis, waterfall-chart