Agent Builderで簡単にエージェントを作成できたとしても、Agent Builderのプレビューでしか動かせなかったら意味がありません。その問題を解決する為に提供されているのがChatKitです。ChatKitを使えばWorkflow IDを指定するだけでエージェントを動かすことができます。
ChatKitとは
簡単に言うとチャットのUIです。生成AIを使用したチャットボットを構築しようと思った場合、生成AIに関する処理だけではなくチャットのUIを構築する必要があります。OpenAIのAPIの使い方が分かって、生成AIを使ったアイディアがあってもチャットUIを作ることができずに断念した方もいるかもしれません。そんな悩みを解消するのがChatKitです。
ChatKitを単純に動かすと以下のようになります。一般的なチャットのUIが表示されます。
チャットを入力してみるとエージェントとのやり取りが表示されます。スクリーンショットでは結果だけ表示されていますが、回答を生成する過程である思考の連鎖の状況も表示されます。
右上には新たなチャットを開始するアイコンとチャットの履歴を確認するアイコンが表示されます。履歴確認をクリックすると以下のように表示され過去のチャットを確認できます。
このようにChatKitにはチャットに必要なUIが一通り揃っています！
ChatKitの種類
ChatKitにはchatkit-jsとchatkit-pythonの2つが用意されています。パッと見は言語の違いのようですが実際には用途が異なっています。どちらを使っても同じことができる訳ではないので注意が必要です。
| 比較項目 | chatkit-js | chatkit-python |
|---|---|---|
| 用途 | フロントエンド | バックエンド |
| サンプル | openai-chatkit-starter-app | openai-chatkit-advanced-samples |
| 機能 | チャットUI OpenAIにホストされたエージェントを実行することが可能 | サーバーサイドSDK エージェントの処理を実装 フロントエンドは自作かchatkit-jsを利用 |
GitHubで公開されているサンプルを動かすとイメージが湧きやすいです。chatkit-pythonのサンプルにはexamplesとしてさらに3つのサンプルが含まれておりそれぞれ動かしてみると理解が深まります。
ChatKitを動かしてみる
Agent Builderで作成したエージェントを動かすなら openai-chatkit-starter-app が便利です。
ワークフローIDの取得
ワークフローIDはAgent Builderから取得できます。
- エージェントが完成したら右上の Publish ボタンをクリックするとダイアログが表示される
- ワークフロー名を入力して Publish ボタンをクリック
- </>Code ボタンをクリックするとダイアログが表示される
- Workflow IDをコピー
openai-chatkit-starter-appで動かす
openai-chatkit-starter-appを動かすにはuvとnpmが必要なのでインストールしておきましょう。
- GitHubからopenai-chatkit-starter-appのコードを取得
- 依存関係をインストール
npm install - 環境変数を設定するファイルを作成
- .env.localの内容を編集する
- OPENAI_API_KEY: OPENAIのAPIキー
- NEXT_PUBLIC_CHATKIT_WORKFLOW_ID: Agent Builderで作成したエージェントのワークフローID
- 実行
- ブラウザで
http://localhost:3000を表示し、エージェントを実行
ChatKitでできること
Agent Builderのプレビューだけでは動かせず、ChatKitを使うことで動かせる機能があります。これらの詳しい使い方は別の記事でご紹介します。
Client tool
1つ目はAgentノードのToolsで追加可能なClient toolです。openai-chatkit-starter-app にはテーマを変更する Client tool が実装されています。エージェントからダークテーマとライトテーマの切り替えを行えるようになります。
ウィジェットのAction
Widget Builderで作成するウィジェットにはボタンや入力フォームを追加できます。ChatKitを使うことでボタンクリックのActionを受け付けて入力フォームの内容を処理できるようになります。
まとめ
ChatKitを使ってAgent Builderで作成したエージェントを動かす方法をご紹介しました。ChatKitを使うことでチャットのUIを新たに構築する必要がなくなります。ちゃんとしたチャットのUIを構築するのは手間がかかるので、そこをChatKitに任せることでエージェントの内容に注力できるようになるのは助かります。さらにはClient toolやウィジェットのActionを処理することでリッチなUIでユーザーとインタラクティブなやり取りをするエージェントを動かせるようになります。
この記事を書いた人
