ADK 的 AG-UI 用户界面¶

Supported in ADKPythonTypeScriptGoJava

将你的 ADK 智能体转变为具有丰富、响应式 UI 的全功能应用程序。AG-UI 是一个开放协议,可处理流式事件、客户端状态以及智能体与用户之间的双向通信。

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

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

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

快速开始¶

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

创建应用:
```
npx copilotkit@latest create -f adk
```
设置你的 Google API 密钥:
```
export GOOGLE_API_KEY="your-api-key"
```
安装依赖并运行:
```
npm install && npm run dev
```

这将启动两个服务器:

http://localhost:3000 - Web UI(在浏览器中打开此地址)
http://localhost:8000 - ADK 智能体 API(仅后端)

在浏览器中打开 http://localhost:3000 与你的智能体聊天。

功能¶

聊天¶

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

src/app/page.tsx

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

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

生成式 UI¶

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

src/app/page.tsx

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

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

共享状态¶

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

src/app/page.tsx

const { state, setState } = useCoAgent<AgentState>({
  name: "my_agent",
  initialState: {
    proverbs: [
      "千里之行,始于足下。",
    ],
  },
})

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

资源¶

要了解使用 AG-UI 可以在 UI 中构建哪些其他功能,请参阅 CopilotKit 文档:

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