生成 AI アプリケーションを構築するデベロッパーにとって、昨年は進化の連続でした。複雑なタスクを推論、計画、実行できるバックエンド エージェント システムの驚くべき進歩を目の当たりにしてきました。しかし、強力なエージェントには相棒が必要です。エージェントのインテリジェンスをアプリケーションのフロントエンドにシームレスに接続するにはどうすればよいのでしょうか？ユーザーと AI の間に真のコラボレーションを生み出すにはどうすればよいのでしょうか？
本日は、この課題に直接対処する新しい統合をご紹介します。Agent Development Kit（ADK）と AG-UI の連携です。AG-UI は、豊富でインタラクティブな AI ユーザー エクスペリエンスを構築するためのオープン プロトコルです。この組み合わせにより、バックエンドに洗練された AI エージェントを構築し、本番環境に対応したコラボレーション型フロントエンドを最小限の労力で提供することが可能になります。
Agent Development Kit（ADK）は、チャットだけでなく、さまざまなことを実行する AI エージェントを構築するための、バッテリー内蔵のオープンソース ツールキットです。エージェント エンジニアリングの最も難しい部分を考慮する必要性をなくし、デベロッパーがアプリケーション固有のロジックに集中できるようにします。
ADK は、すぐに使用でき、エージェントに次の機能を提供します。
ADK を使用すると、構想からエージェント プロトタイプの動作までを数時間で実現できます。その間も、エージェントのロールやエージェントがアクセス可能なツールを、デベロッパーが完全に制御し続けることができます。
デベロッパーには ADK のローカル デベロッパー プレイグラウンドとデバッグ UI である adk web が愛用されていますが、これはユーザー向けの UI ではありません。Flutter デベロッパーは Flutter AI Toolkit を高く評価しており、他にも多くのエージェント UI プロジェクトが存在します。しかし、これまでのところ UI とエージェントの統合はカスタムで行われており、エージェントと UI 間の通信に関する標準はありませんでした。
CopilotKit チームは、リッチな UI でエージェントがユーザーと直接会話することを標準化するオープン プロトコルおよび UI レイヤとして、AG-UI をリリースしました。AG UI は、直接ユーザーと対話するエージェント（バックグラウンド エージェントではない）に焦点を当てています。ミドルウェアとクライアントの連携を活用することで、あらゆるフロントエンドとバックエンドに対応します。バックエンド エージェントがフロントエンド アプリケーションと通信するための標準化プロトコルを提供し、AI とユーザー間のステートフルなリアルタイムのコラボレーションを可能にします。
AG-UI の開発者は、AG UI で動作するドロップイン React コンポーネントとフックのオープンソース ライブラリである CopilotKit も提供しています。これにより、洗練されたチャット インターフェース、サイドバー、その他の UI 要素を数分でアプリに実装できます。
強力なバックエンド（ADK）と柔軟なフロントエンド プロトコル（AG-UI）の連携によって、真にインタラクティブな AI アプリケーションを構築できるようになりました。ADK はエージェントの「頭脳」を働かせ、ツール オーケストレーションを実行します。一方、AG-UI は UI コンポーネントへの通信チャネルを提供します。これにより、シームレスなユーザー エクスペリエンスが実現します。
この統合により、次のような新しいクラスの機能をすぐに利用できるようになります。
コマンドを 1 つ実行するだけで、簡単に開始できます。これにより、事前設定された ADK バックエンドと CopilotKit を使用した Next.js フロントエンドを備えたフルスタックのスターター リポジトリが複製されます。
npx copilotkit@latest create -f adkスターター プロジェクトが完成したら、コアロジックはシンプルになります。
/backend/agent.ts）ADK バックエンドで、エージェントの手順を定義し、使用するツールを提供します。
// backend/agent.ts
import { adk } from "@copilotkit/adk";
adk.setSystemMessage(
"株価を取得できる便利なアシスタントです。"
);
// Define a tool the agent can use
adk.addTool("getStockPrice", {
description: "特定の銘柄コードの現在の株価を取得します。",
parameters: {
type: "object",
properties: {
ticker: {
type: "string",
description: "銘柄（例: GOOGL）。",
},
},
required: ["ticker"],
},
handler: async ({ ticker }) => {
console.log(`${ticker} の株価を取得しています...`);
// In a real app, you would call a financial API here.
const price = (Math.random() * 1000).toFixed(2);
return `現在の ${ticker} の価格は $${price} です。`;
},
});
export default adk;2. フロントエンドを接続します（/frontend/src/app/page.tsx）
React/Next.js フロントエンドで、CopilotKit プロバイダでアプリケーションをラップし、UI コンポーネントを使用します。
// frontend/src/app/page.tsx
"クライアントを使用";
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 エージェントの連携が完成し、カスタマイズや拡張が可能になりました。事前構築された UI コンポーネント ライブラリを使用し、独自のウィジェットで拡張することもできます。ただし、通信レイヤはすべて自動的に処理されます。
エージェントのロジックをユーザー インターフェースに組み込む複雑さに悩まされることはもうありません。ADK と AG-UI の連携により、強力でインテリジェント、そして協調的な AI アプリケーションの提供という最も重要な業務に集中できます。
リソース:
npx copilotkit@latest create -f adk
