mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Tyler Slaton
81 lines
2.3 KiB
Plaintext
81 lines
2.3 KiB
Plaintext
## What is this?
|
|
|
|
`useComponent` lets you register a React component as a tool 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.
|
|
|
|
This is the simplest form of Generative UI — your agent decides when to show a component, and CopilotKit renders it. No handler logic, no user interaction required.
|
|
|
|
## When should I use this?
|
|
|
|
Use `useComponent` 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
|
|
|
|
For components that need user interaction, see the Interactive or Interrupt-based guides.
|
|
|
|
## Register a component
|
|
|
|
Use the `useComponent` hook to register a React component. The agent will be able to call it by name, and CopilotKit will render it with the tool arguments as props.
|
|
|
|
```tsx title="app/page.tsx"
|
|
import { useComponent } from "@copilotkit/react-core/v2"; // [!code highlight]
|
|
import { z } from "zod";
|
|
|
|
const weatherSchema = z.object({
|
|
city: z.string().describe("City name"),
|
|
temperature: z.number().describe("Temperature in Fahrenheit"),
|
|
condition: z.string().describe("Weather condition"),
|
|
});
|
|
|
|
function WeatherCard({ city, temperature, condition }: z.infer<typeof weatherSchema>) {
|
|
return (
|
|
<div className="rounded-lg border p-4">
|
|
<h3 className="font-semibold">{city}</h3>
|
|
<p className="text-2xl">{temperature}°F</p>
|
|
<p className="text-sm text-gray-500">{condition}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function YourMainContent() {
|
|
// [!code highlight:9]
|
|
useComponent({
|
|
name: "showWeather",
|
|
description: "Display a weather card for a city.",
|
|
parameters: weatherSchema,
|
|
render: WeatherCard,
|
|
});
|
|
|
|
return <div>{/* ... */}</div>;
|
|
}
|
|
```
|
|
|
|
## Without parameters
|
|
|
|
For simple components that don't need typed parameters:
|
|
|
|
```tsx
|
|
useComponent({
|
|
name: "showGreeting",
|
|
render: ({ message }: { message: string }) => (
|
|
<div className="rounded border p-3 bg-blue-50">
|
|
<p>{message}</p>
|
|
</div>
|
|
),
|
|
});
|
|
```
|
|
|
|
## Scoping to an agent
|
|
|
|
In multi-agent setups, scope a component to a specific agent:
|
|
|
|
```tsx
|
|
useComponent({
|
|
name: "renderProfile",
|
|
parameters: z.object({ userId: z.string() }),
|
|
render: ProfileCard,
|
|
agentId: "support-agent",
|
|
});
|
|
```
|