Skip to main content

Generative UI Assistant

AI Products

For products where the agent answers with a screen, not a paragraph

An assistant that answers with screens. Five conversations — a refund decision, an analytics answer with charts, an incident form, a release plan, a surface the catalog refuses — stream in as A2UI data and render from the library's catalog; every click reaches the app as a named action.

Make it yours

npx shadcn@latest add https://elabs-ai.com/r/a2ui-assistant-page.json

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui template "Generative UI Assistant" (a2ui-assistant-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. An assistant that answers with screens. Five conversations — a refund decision, an analytics answer with charts, an incident form, a release plan, a surface the catalog refuses — stream in as A2UI data and render from the library's catalog; every click reaches the app as a named action.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), then the packages the template imports: @elabs-ai/components-ai, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui. If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
3. Copy the template in with `npx shadcn@latest add https://elabs-ai.com/r/a2ui-assistant-page.json` — it brings its blocks with it (a2ui-parts, workspace-shell); if that url does not answer, copy the folders from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks instead.
4. Mount the page at a route, keep its `WorkspaceShell` frame, and replace the seeded data with ours: [the route, the real data source, and what should change from the template]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

What each view shows

The screens the navigation names, one line each.

Assistant
The conversation and the surfaces it renders.
Conversations
The five saved conversations.

Try it on the screen above: Click a rendered surface — approve the refund, change the form — and the inspector shows the action and the wire JSON that produced the screen.

What it is made of

The blocks and packages the template composes — each has its own page. Copy the template and you copy the blocks with it.

Examples

5 live examples

Analytics Answer

An analytics answer: KPI tiles, two AutoChart figures and a drill-down on click.

Incident Form

A form the agent pre-filled; the inspector opens on the actions the host receives.

Guardrail

What the catalog refuses — and the repaired surface after the error list goes back.

Catalog

The inspector on the catalog: every type the agent may draw, with its events.