Emerging

Agent-selected components

The agent chooses from a typed library of components and populates them; it cannot invent primitives.

MAsk MilkyAccounts Show tool call

Who is Northfield Dental?

Milky

render CustomerCard({ name: "Northfield Dental", seats: 40, renewal: "2026-10-14", owner: "Leo Martin" })

Northfield Dental

Owner: Leo Martin

Renews in 13 days

Seats: 40
Renewal: 14 Oct
Plan: Business

Ask:

Component library5 registered

CustomerCardUsed
name, seats, renewal, owner
InvoiceTableUsed
rows[]: id, date, amount, status
BarChartUsed
title, bars[]: label, value, highlight
RefundStatusUsed
ticket, amount, stage
ApprovalCardUsed
title, facts[], expiresIn
PieChartNot in library
Milky can't invent new components

Try it: Pick a question. Milky answers by choosing a registered component and filling its props, even when you ask for one it doesn't have.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

Chat reply to 'What's the weather in New York City?' rendered as a weather card showing 38°F, followed by a one-line text answer — CopilotKit
A get_weather tool call is rendered with a registered React WeatherCard component instead of raw text; the agent only fills the card's typed props.
Source: CopilotKit product page ↗

When to use

The default safe shape of generative UI in a product with an existing design system.

Seen in

CopilotKit AG-UI frontend tools, Vercel AI SDK generative UI, tool-call rendered cards.

For engineers

AG-UI is supported across LangGraph, CrewAI, Google ADK, AWS Strands and more — render by tool name.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Agent-selected components" pattern: `RegisteredComponentRenderer`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
The agent chooses from a typed library of components and populates them; it cannot invent primitives.

Use it when: The default safe shape of generative UI in a product with an existing design system.

## What to build
Renders an agent's UI request by looking up the requested component name in a typed registry from the design system and validating the props against that component's schema. Anything unregistered or invalid falls back to plain text, never to agent-written markup. It renders inside a chat message or any slot that shows agent output.

### Props
- `call`: { id: string; name: string; args: unknown }, the agent's render or tool call.
- `registry`: Record<string, { component: ComponentType<P>; validate: (args: unknown) => { ok: true; props: P } | { ok: false; errors: string[] }; label: string; skeleton?: ReactNode }>, the only components the agent may use.
- `status`: "streaming" | "ready", whether `args` is still arriving.
- `showCall?`: boolean, reveals the raw call (name and arguments) for inspection.
- `fallbackText?`: string, the agent's plain-text answer to show when the call can't render.
- `onRejected?(call, reason: "unknown" | "invalid", errors?: string[])`: reports refusals for monitoring.
- `onComponentAction?(callId, action)`: passes events from the rendered component (e.g. a button inside a card) back to the agent.

### States it must render
- Streaming: the registered component's skeleton, sized like the real thing; unknown names show a neutral placeholder.
- Rendered: the design-system component with validated props.
- Invalid props: the text fallback with a quiet note ("Couldn't show this as an invoice table"); errors go to `onRejected`.
- Unknown component: "PieChart isn't available here" plus the text fallback; nothing is improvised.
- Call shown: a disclosure under the output with the component name and formatted arguments.

### Interactions
- The show-call toggle opens and closes the inspection panel.
- Actions inside the rendered component are forwarded with `onComponentAction`, tagged with the call id.
- Rejections fire `onRejected` once per call, not on every streamed chunk.

### Edge cases
- Arguments containing HTML or script are rendered as text; `dangerouslySetInnerHTML` is never used.
- Unknown extra props are stripped by validation, not passed through.
- A name that differs only in case or spelling from a registered one is still rejected, not guessed.
- Arguments still streaming: validate only once `status` is ready; don't flash errors on partial data.

## Must avoid
Letting the model emit arbitrary markup, producing off-system UI nobody can maintain.

## Engineering constraint
AG-UI is supported across LangGraph, CrewAI, Google ADK, AWS Strands and more — render by tool name.

## Accessibility
- The rendered component keeps its own semantics; the fallback is announced like any other message.
- The show-call control is a disclosure button with `aria-expanded`.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for generative ui

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Does generated UI stay inside your design system's vocabulary?
Can the agent only pick components you built and typed?
Is the generated surface addressable — linkable, savable, reviewable?
Does layout stay stable while content streams in?