Display components

"""MS Agent Framework agent backing the Tool-Based Generative UI demo.The frontend registers `render_bar_chart` and `render_pie_chart` tools via`useComponent`. CopilotKit's runtime forwards those frontend tool definitionsto the agent at request time, so the agent can call them by name.There are no backend tools here -- the agent's job is to recognize chartintent in the user's message and emit a tool call with structured chart data.The frontend then renders the result inline."""from __future__ import annotationsfrom textwrap import dedentfrom agent_framework import Agent, BaseChatClientfrom agent_framework_ag_ui import AgentFrameworkAgentSYSTEM_PROMPT = dedent(    """    You are a data visualization assistant.    When the user asks for a chart, call `render_bar_chart` or    `render_pie_chart` with a concise title, short description, and a `data`    array of `{label, value}` items. Pick bar for comparisons over a small set    of categories; pick pie for composition / share-of-whole.    Keep chat responses brief -- let the chart do the talking. After you    finish executing tools, send a brief final assistant message so it    persists in the conversation.    """).strip()def create_gen_ui_tool_based_agent(chat_client: BaseChatClient) -> AgentFrameworkAgent:    """Instantiate the Tool-Based Generative UI demo agent."""    base_agent = Agent(        client=chat_client,        name="gen_ui_tool_based_agent",        instructions=SYSTEM_PROMPT,        # Both rendering tools (`render_bar_chart`, `render_pie_chart`) are        # registered on the frontend via `useComponent`. The runtime forwards        # them as tool definitions at request time.        tools=[],    )    return AgentFrameworkAgent(        agent=base_agent,        name="CopilotKitMSAgentGenUiToolBasedAgent",        description=(            "Data-visualization assistant that turns chart requests into "            "frontend-rendered bar and pie charts via tool calls."        ),        require_confirmation=False,    )

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#

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.

page.tsx

import React from "react";import {  CopilotChat,  CopilotKit,  useComponent,} from "@copilotkit/react-core/v2";import { BarChart, barChartPropsSchema } from "./bar-chart";import { PieChart, pieChartPropsSchema } from "./pie-chart";import { useSuggestions } from "./suggestions";function Chat() {  useComponent({    name: "render_bar_chart",    description: "Display a bar chart with labeled numeric values.",    parameters: barChartPropsSchema,    render: BarChart,  });