display.mdx

title	Display components
icon	lucide/Eye
description	Register React components that your agent can render in the chat.
hideTOC	true
snippet_cell	gen-ui-tool-based

What is this?

Render-only generative UI lets you register React components as tools your agent can invoke. When the agent calls the tool, CopilotKit renders your component directly in the chat with the tool's arguments as props; no handler logic or user interaction required.

<Tabs items={['page.tsx', 'chart.tsx']}>

useComponent({
name: "showChart",
description: "Populate data and show the user a chart",
parameters: ChartProps,
render: Chart
});

```tsx

export const ChartProps = z.object({ title: z.string(), data: z.array(z.object({ label: z.string(), value: z.number() })), });

export function Chart({ title, data }: z.infer) { return (

{title}

); }

  </Tab>
</Tabs>

## When should I use this?

Use render-only generative UI when you want to:

- Display rich UI (cards, charts, tables) inline in the chat
- Show structured data from agent responses
- Render previews, status indicators, or visual feedback
- Let the agent present information beyond plain text

## How it works in code

<FrameworkSetup concept="agent-setup" />

The renderer component receives the tool's arguments as typed props and
mounts inline in the chat. Below is the chart renderer wired up in the
canonical demo — the agent emits the data, the component draws it.

<Snippet region="bar-chart-renderer" title="frontend/src/app/page.tsx — bar chart renderer" />

<IntegrationGrid path="render-only" />