【Zenn最速！？】OpenAIのAgent Builder・Chatkitのデプロイを試してみた！
はじめに
日本時間の10月7日、朝起きたらOpenAIから衝撃の数々が発表されましたね。
今回はZenn最速(！？)で、Agent BuilderおよびChatkitのデプロイを試してみた！と書きたい想いが先行した、検証記事でございます。
結論だけ書きますと、Agent Builderで発行するWORKFLOW_IDをChatkitに埋め込んでアプリを実行するという感じでした。
OpenAI公式ドキュメント
Agent Builder ChatKit
Organizationの認証
Agent Builderのデプロイには認証が必要です。
以下を参考に事前に実施しておきましょう。(いつも有益な投稿ありがとうございます。)
Agent Builderの構築
私はどこからやるの？となりました。
アクセスはこちらから！｜https://platform.openai.com/agent-builder
このパートについてはまだ当日だというのに記事もYouTubeも大量に作られていました。
Difyと近い機能だと思いますし、この記事では超最小構成とします。
私は気になっていた「User approval」によるhuman in the loopの実現を使ってみました。
いきなりapprovalです。いいんです。動かしたいだけですから。
回答はこちら。かなりしっかり回答してくれていますね！
Chatkitの構築
このパートがメインです！
公式サイトを読んでどのように読み進めていったのか、一緒に見ていきましょう。
公式ガイド
公式ガイドのDeploy in your product部分[1]には以下のようにありますのでリンクに飛びます。
要するに製品に導入する方法は2択あってChatKitクイックスタートが簡単そうですね。
私はこのリンクに飛びました。
クイックスタート
リンク先のSee working examples部分[2]でお試しするのがよさそうです。
一つ目はopenai-chatkit-【advanced】-samplesでしたので自分には難しそうです。
二つ目のopenai-chatkit-starter-appにしましょう！
スターターキットを試す
openai-chatkit-starter-appリポジトリ[3]のREADMEに沿って進めてみます。
リポジトリをクローンし、ローカル用の設定ファイルを作成します。
git clone https://github.com/openai/chatkit-js.git
cd openai-chatkit-starter-app/
cp .env.example .env.local
WORKFLOW_IDを取得
次に設定ファイルに設定するためのWORKFLOW_IDを取得します。
一度Agent Builderに戻り、右上の「Publish」ボタンから進めます。
後から見たら右上が「Deploy」になっていました。
怖いので「Publish」→「Deploy」ではなく、「Deploy」→「Deployed」にしてほしいと感じます。
アプリを実行
設定ファイルに戻り、APIキーとWORKFLOW_IDを設定します。
APIキーはこれを読んでいる方なら説明不要ですよね。
$ nano .env.local
OPENAI_API_KEY=sk-xxxxx
NEXT_PUBLIC_CHATKIT_WORKFLOW_ID=wf_xxxxxx
npmでビルド、実行します。
3000番ポートで実行されました。
npm install
npm run build
npm start
アプリ画面にアクセス
同じ質問をしてみると、しっかりapprovalが出てきました！
承認！！
アプリ画面はとてもシンプルですが、思考時間が表示されていたり、
右上から履歴を開くことができたりと、システムに埋め込めば十分使えるものだなと思いました！
おわりに
大流行りのAgent Builderですが、アプリとしてデプロイするイメージを持っていただけたでしょうか？
私はこんなにサクッとできるのであればopenai-chatkit-advanced-samplesの方を試してもよかったなと思いました！
それにしてもフロントのUIとセットで提供されるDifyは、やっぱり親切で使いやすいですね～！
(こんな結論で良いのか)
✍️ この記事が参考になったら「いいね」「ブックマーク」「フォロー」をお願いします。
Xで絡んでいただくのも大歓迎です！
追記
openai-chatkit-advanced-samplesも試してみた。
よくわかってない自分はREADMEのままコマンドを叩きまくりましたが、以下のようにシンプルに実行すれはOKです。
バックエンドを実行
以下のコマンドだけでOKです。
- Start FastAPI backend API
git clone https://github.com/openai/openai-chatkit-advanced-samples.git
cd openai-chatkit-advanced-samples
npm run backend
フロントエンドを実行
- Vite + Reactフロントエンドを実行する
リポジトリのルートからフロントエンドを直接起動できます。
npm run frontend
アプリにアクセス
ブラウザで開きます。
http://localhost:5170/
こんな感じの画面でした。
英語なので分かりにくいですが、赤枠の部分がカスタムUIになっていて以下のことができるようです。
- 顧客サポート: 航空会社の顧客サポート ワークフロー。
- Knowledge Assistant : OpenAI のファイル検索ツールを活用した知識ベース エージェント。
- マーケティング アセット: マーケティング クリエイティブ ワークフロー。
Discussion