AG-UIとCopilotKitでチャット体験を構築する¶

エージェントビルダーとして、ユーザーがリッチで応答性の高いインターフェイスを介してエージェントと対話できるようにしたいと考えています。UIをゼロから構築するには、特にストリーミングイベントとクライアントの状態をサポートするために多大な労力が必要です。まさにそのためにAG-UIは設計されました。エージェントに直接接続されたリッチなユーザーエクスペリエンスです。

AG-UIは、モバイルからWeb、さらにはコマンドラインまで、テクノロジースタック全体でリッチなクライアントを強化するための一貫したインターフェイスを提供します。AG-UIをサポートするさまざまなクライアントがあります。

CopilotKitは、エージェントをWebアプリケーションと緊密に統合するためのツールとコンポーネントを提供します。
Kotlin、Java、Go、およびTypeScriptのCLI実装用のクライアント

このチュートリアルでは、CopilotKitを使用して、AG-UIでサポートされている機能の一部を示すADKエージェントに裏打ちされたサンプルアプリを作成します。

クイックスタート¶

開始するには、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道場で試してみてください。