对于构建生成式 AI 应用的开发者来说，去年是发展迅猛的一年。我们看到后端智能体系统取得惊人的进步，这些系统可以推理、制定计划和执行复杂的任务。但一个强大的智能体只是成功的一半。如何将这种智能无缝连接到应用的前端？您如何真正让用户和 AI 协作起来？
今天，我们很高兴能重点介绍可直接应对这一挑战的新集成：智能体开发工具包 (ADK) 现在可与 AG-UI 配合使用，后者是一种用于构建丰富交互式 AI 用户体验的开放协议。这种组合使您能够在后端构建复杂的 AI 智能体，并以最小的工作量为其提供可用在生产环境的协作前端。
智能体开发工具包 (ADK) 是一个组件齐全的开源工具包，用于构建不仅能聊天，还可以执行任务的 AI 智能体。它能帮您处理智能体工程中最困难的部分，使您可以专注于应用的独特逻辑。
ADK 开箱即用，可为您的智能体提供：
使用此 ADK 后，您只需数小时即可将创意转变为可用智能体原型，同时保留完整控制权限来定义智能体的角色及其可以访问的工具。
开发者喜欢 ADK 的本地开发者环境和调试 ADK Web 界面，但它不是面向用户的界面。Flutter 开发者喜欢 Flutter AI 工具包，此外还有许多其他智能体界面项目可供着手，但到目前为止，任何界面和智能体集成都是定制的，智能体和界面之间没有统一的沟通标准。
CopilotKit 团队发布了 AG-UI，这是一个开放的协议和界面层，旨在标准化智能体，使其直接与使用丰富界面的用户交谈。AG-UI 专门面向直接与用户对话的智能体（而不是后台智能体），它使用中间件和客户端集成，使其适用于任何前端和后端。AG-UI 为后端智能体与前端应用通信提供了一种标准化的方式，使 AI 和人类用户之间能够在有状态的情况下实时协作。
AG-UI 的创建者还提供了 CopilotKit，这是一个开源的 React 组件和钩子库，可与 AG-UI 配合使用。这意味着您只需几分钟便可在应用中获得精美的聊天界面、侧边栏和其他界面元素。
通过将强大的后端 (ADK) 与灵活的前端协议 (AG-UI) 相结合，您现在可以构建真正的交互式 AI 应用。ADK 运行智能体的“大脑”并负责工具编排，而 AG-UI 提供与界面组件沟通的渠道，助力打造顺畅用户体验。
这种集成解锁了一系列开箱即用的新功能：
只需运行一个命令即可轻松开始使用 ADK。系统将用 CopilotKit 克隆具有预配置 ADK 后端和 Next.js 前端的全栈入门存储库。
npx copilotkit@latest create -f adk有了入门项目后，核心逻辑就很简单了。
/backend/agent.ts)在 ADK 后端，您可以定义智能体的说明，并为其提供相关工具。
// backend/agent.ts
import { adk } from "@copilotkit/adk";
adk.setSystemMessage(
"You are a helpful assistant that can fetch stock prices."
);
// Define a tool the agent can use
adk.addTool("getStockPrice", {
description: "Get the current stock price for a given ticker symbol.",
parameters: {
type: "object",
properties: {
ticker: {
type: "string",
description: "The stock ticker symbol (e.g., GOOGL).",
},
},
required: ["ticker"],
},
handler: async ({ ticker }) => {
console.log(`Fetching stock price for ${ticker}...`);
// In a real app, you would call a financial API here.
const price = (Math.random() * 1000).toFixed(2);
return `The current price of ${ticker} is $${price}.`;
},
});
export default adk;2. 连接前端 (/frontend/src/app/page.tsx)
在 React/Next.js 前端，使用 CopilotKit 提供程序来封装应用并使用界面组件。
// frontend/src/app/page.tsx
"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
export default function Home() {
return (
<CopilotKit url="http://localhost:5001/api/adk"> {/* URL to your ADK backend */}
<main>
<h1>Welcome to Your ADK + AG-UI App!</h1>
<p>Ask me to get a stock price.</p>
</main>
<CopilotChat />
</CopilotKit>
);
}大功告成！您现在拥有了一个功能齐全的 AI 智能体，它具有精美的前端，可供您自定义和扩展。您可以使用预构建的界面组件库，用您自己的小组件进行扩展，并让智能体为您处理所有通信层。
无需再处理将智能体逻辑连接到用户界面的复杂难题。借助 ADK 和 AG-UI 集成，您可以专注于最重要的事情：交付强大、智能和协作式的 AI 应用。
资源：
npx copilotkit@latest create -f adk
