你的 React 应用还在让 AI 只输出文字？CopilotKit 可以让它直接渲染组件

• 1

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

import { useFrontendTool } from "@copilotkit/react-core";import { z } from "zod";
function WeatherWidget() { useFrontendTool({ name: "get_weather", description: "获取某个城市的当前天气，并以卡片形式展示", parameters: z.object({ location: z.string().describe("城市名称，例如：北京、上海"), }), handler: async ({ location }) => { // 这里调你自己的天气 API const data = await fetchWeather(location); return data; }, render: ({ status, args, result }) => { // inProgress：AI 正在调用中 if (status === "inProgress" || status === "executing") { return <WeatherSkeleton location={args?.location} />; } // complete：有结果了，渲染真实组件 if (status === "complete" && result) { return <WeatherCard {...result} />; } return null; }, });
 return null; // 这个组件本身不渲染任何东西}

• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41

// app/layout.tsx（Next.js 示例）import { CopilotKit } from "@copilotkit/react-core";
export default function RootLayout({ children }) { return ( <CopilotKit runtimeUrl="/api/copilotkit"> {children} </CopilotKit> );}

• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54

// app/api/copilotkit/route.tsimport { CopilotRuntime, GoogleGenerativeAIAdapter } from "@copilotkit/runtime";
const runtime = new CopilotRuntime();
export const POST = async (req: Request) => { const { handleRequest } = runtime.process({ serviceAdapter: new GoogleGenerativeAIAdapter({ model: "gemini-2.0-flash", }), }); return handleRequest(req);};

• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69

// components/ChatPanel.tsximport { CopilotChat } from "@copilotkit/react-ui";import "@copilotkit/react-ui/styles.css";
export function ChatPanel() { // 注册天气工具 useFrontendTool({ /* 上面的配置 */ });
 return ( <CopilotChat instructions="你是一个智能助手，当用户询问天气时，调用 get_weather 工具展示天气卡片。" labels={{ title: "AI 助手", initial: "有什么需要帮忙的？" }} /> );}

• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88

render: ({ status, args, result }) => { // 工具调用中：args 已有，result 还没有 // 这时候 args.location 已经可以用了，可以先渲染 loading 态 if (status === "inProgress") { return <div>正在获取 {args?.location} 的天气...</div>; }
 // 工具执行中（handler 在跑） if (status === "executing") { return <WeatherSkeleton />; }
 // 完成 if (status === "complete" && result) { return <WeatherCard {...JSON.parse(result)} />; }
 return null;},

• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103

// 你已有的组件，不用改function SalesChart({ data, period, region }) { /* ... */ }
// 只需要在 useFrontendTool 里引用它useFrontendTool({ name: "show_sales_chart", description: "显示销售数据图表，支持按时间段和地区筛选", parameters: z.object({ period: z.enum(["day", "week", "month"]), region: z.string().optional(), }), handler: async ({ period, region }) => fetchSalesData(period, region), render: ({ status, result }) => status === "complete" ? <SalesChart data={result} /> : <ChartSkeleton />,});