使用 AG-UI 和 CopilotKit 构建聊天体验¶

概述¶

作为智能体开发者，你希望用户通过丰富且响应迅速的界面与你的智能体进行交互。从头开始构建用户界面需要大量的工作，特别是要支持流式事件和客户端状态。这正是 AG-UI 的设计目的 - 为直接连接到智能体的丰富用户体验而生。

AG-UI 提供了一致的接口，可在技术栈中赋予丰富客户端能力，从移动设备到网页，甚至到命令行。有多种不同的客户端支持 AG-UI：

CopilotKit 提供工具和组件，可将你的智能体与 Web 应用紧密集成
Kotlin、Java、Go 客户端，以及 TypeScript 中的 CLI 实现

本教程使用 CopilotKit 创建一个由 ADK 智能体支持的示例应用程序，展示 AG-UI 支持的一些功能。

快速开始¶

首先，让我们创建一个带有 ADK 智能体和简单 Web 客户端的示例应用程序：

npx create-ag-ui-app@latest --adk

聊天¶

聊天是暴露你的智能体的熟悉界面，AG-UI 处理用户和智能体之间的流式消息：

src/app/page.tsx

<CopilotSidebar
  clickOutsideToClose={false}
  defaultOpen={true}
  labels={{
    title: "弹出助手",
    initial: "👋 你好！你正在与一个智能体聊天。这个智能体带有一些工具供你开始使用..."
  }}
/>

了解更多关于聊天 UI 的信息在 CopilotKit 文档中。

基于工具的生成式 UI（渲染工具）¶

AG-UI 使你能够与生成式 UI 共享工具信息，以便向用户显示：

src/app/page.tsx

useCopilotAction({
  name: "get_weather",
  description: "获取指定位置的天气。",
  available: "disabled",
  parameters: [
    { name: "location", type: "string", required: true },
  ],
  render: ({ args }) => {
    return <WeatherCard location={args.location} themeColor={themeColor} />
  },
});

了解更多关于基于工具的生成式 UI 的信息在 CopilotKit 文档中。

共享状态¶

ADK 智能体可以是有状态的，同步智能体和 UI 之间的状态，可以实现强大且流畅的用户体验。状态可以双向同步，因此智能体可以自动感知用户或其他应用程序部分所做的更改：

src/app/page.tsx

const { state, setState } = useCoAgent<AgentState>({
  name: "my_agent",
  initialState: {
    proverbs: [
      "CopilotKit 可能是新的，但它是自切片面包以来最好的东西。",
    ],
  },
})

了解更多关于共享状态的信息在 CopilotKit 文档中。

试一试！¶

npm install && npm run dev

资源¶

要了解你可以使用 AG-UI 在 UI 中构建的其他功能，请参阅 CopilotKit 文档：

或者在 AG-UI Dojo 中尝试它们。