副驾驶 Kit - 重现文本区域

为什么是副驾驶Kit?

• 整合分钟 - 快速启动我们的CLI
• 框架不可知性 -- -- 与反应、Next.js、AGUI及更多
• 生产准备的UI - 使用自定义组件或用无头的UI来构建
• 内设安保-即时注射防护
• 公开源码----充分透明和由社区驱动

实际使用案例

部署深入集成的 AI 助手和代理, 与您的用户一起在您的应用程序中工作 .

密码样本

掉入这些构件 适应你的需要.

以无头 API 和预建组件构建

// Headless UI with full control
const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();

// Pre-built components with deep customization options (CSS + pass custom sub-components)
<CopilotPopup
  instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
  labels={{ title: "Popup Assistant", initial: "Need any help?" }}
/>

// Frontend actions + generative UI, with full streaming support
useCopilotAction({
  name: "appendToSpreadsheet",
  description: "Append rows to the current spreadsheet",
  parameters: [
    { name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
  ],
  render: ({ status, args }) => <Spreadsheet data={canonicalSpreadsheetData(args.rows)} />,
  handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
});

将 App 代理代理与 LangGraph 合并

// Share state between app and agent
const { agentState } = useCoAgent({
  name: "basic_agent",
  initialState: { input: "NYC" }
});

// agentic generative UI
useCoAgentStateRender({
  name: "basic_agent",
  render: ({ state }) => <WeatherDisplay {...state.final_response} />,
});

// Human in the Loop (Approval)
useCopilotAction({
  name: "email_tool",
  parameters: [
    {
      name: "email_draft",
      type: "string",
      description: "The email content",
      required: true,
    },
  ],
  renderAndWaitForResponse: ({ args, status, respond }) => {
    return (
      <EmailConfirmation
        emailContent={args.email_draft || ""}
        isExecuting={status === "executing"}
        onCancel={() => respond?.({ approved: false })}
        onSend={() =>
          respond?.({
            approved: true,
            metadata: { sentAt: new Date().toISOString() },
          })
        }
      />
    );
  },
});

// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
const modifiedConfig = copilotKitCustomizeConfig(config, {
  emitIntermediateState: [
    {
      stateKey: "outline",
      tool: "set_outline",
      toolArgument: "outline",
    },
  ],
});
const response = await ChatOpenAI({ model: "gpt-6-luna" }).invoke(
  messages,
  modifiedConfig,
);

QQ 有特色的例子

文档

要从副驾驶Kit开始 请检查一下 文档。 。 。 .