CopilotKit

Display components

Register React components that your agent can render in the chat.

Not available for Deep Agents yet

This feature (gen-ui-tool-based) hasn't been tagged in any Deep Agents cell yet. Try CopilotKit's Built-in Agent, LangGraph (Python), LangGraph (TypeScript).

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.


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


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<typeof ChartProps>) {
  return (
    <div>
      <h3>{title}</h3>
      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={data}>
          <XAxis dataKey="label" /><YAxis /><Tooltip />
          <Bar dataKey="value" fill="#6366f1" />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

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#

Wire CopilotKit middleware into your agent

Deep Agents compile to LangGraph graphs, and CopilotKitMiddleware is the bridge. It reads the forwarded tools off the request and merges them into the tool list the model sees, so a component registered with useComponent only reaches the model when the middleware is present.

agent.py
from deepagents import create_deep_agent
from copilotkit import CopilotKitMiddleware

agent = create_deep_agent(
    model="openai:gpt-5.4",
    tools=[],  # Backend tools go here
    middleware=[CopilotKitMiddleware()],
    system_prompt=SYSTEM_PROMPT,
)

Without the middleware the run still completes, and the component never renders, because the model was never told the tool exists.

Tell the model when to call it

The forwarded tool arrives on every run, but a model with no instruction about it will answer in prose and never call it. Name the tool in system_prompt and say what it is for.

agent.py
SYSTEM_PROMPT = """
You are a data visualization assistant.

When the user asks for a chart, call `render_bar_chart` with a concise
title and a `data` array of `{label, value}` items.

Keep chat responses brief and let the chart do the talking.
"""

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.