「OpenAIが新たに出したAIエージェント開発キットをアプリに組み込んでみた【AgentKit入門】

はじめに

OpenAI公式のエージェント構築ツールAgentKitが発表されました。AgentKitはノーコード／ローコードでエージェントを視覚的に構築できるツールでn8n, difyなどをすでに使ったことがある人には馴染み深い分野ではないでしょうか？
https://platform.openai.com/docs/guides/agents/agent-builder

今回は、公式ガイドを見ながら実際にエージェント構築を行っていき、AgentKitの使い方をまとめていこうと思います。一部機能については発展の余地がありそうですが、すごく簡単に複雑なAIエージェントを組み込むことができました。

AgentKitの概要については、自分用メモを速報的にまとめて、前回記事として投稿させていただいたのでそちらを確認していただければ嬉しいです！

https://zenn.dev/forward/articles/5bd4cd01dfb2bf

AgentKitの使い方

それでは、OpenAIの公式ドキュメントを見ながら構築していきます。
公式ドキュメントに遷移すると、今回触るAgentKit周りの話はこの赤枠あたりに整理されてます。^[1]

エージェントの構築方法

https://platform.openai.com/docs/guides/agent-builder
エージェントを構築するには、エージェントビルダーを利用します。

テンプレートから開始し、ワークフローの各ステップにノードをドラッグ＆ドロップし、型指定された入力と出力を提供し、ライブデータを使用して実行をプレビューできるそう。difyとかn8nとか触っている人はこの辺の操作は慣れてるのかなーと思います。（筆者は最近n8n触り始めたところです)

またこれらのワークフローはChatKitを使用してサイトに埋め込むか、Agent SDKのコードをコピーして実装することで自社製品に組み込むことができます。

https://platform.openai.com/agent-builder
それではAgentBuilderを開いて構築していこうと思います。データの拡充、計画ヘルパーや顧客サービス、文書の比較、社内ナレッジアシスタントなど様々なテンプレートが用意されていますね。

一番最初に目についた、「データの拡充 - ユーザーの質問に答えるためにデータをまとめる」というテンプレを活用してエージェントを構築していこうと思います。

テンプレを活用したエージェント構築

ワークフローを構築する画面はこんな感じです。
左側にワークフローを構築するためのノードが並び、中央にはそれらのパーツを組み合わせ、矢印でつなげたワークフローがあります。下にはパンや選択、元に戻したりといった操作系のボタンが並び、右上には公開ボタンやプレビューなどで構築したワークフローを試せるぽいです。評価するボタンもあり、構築したワークフローの評価もできそうです。

参考: ノードの種類

テンプレートとして用意してあるのは、書いてあるメモから察するに、会社情報を検索するエージェントですね。

まずは実行してみてどんな出力が得られるか確認してみます。

例えば、「nvidiaについて調べて」という入力を入れると、

{
  "company_name": "NVIDIA Corporation",
  "industry": "Semiconductors / Artificial Intelligence / Graphics Processing",
  "headquarters_location": "Santa Clara, California, United States",
  "company_size": "20,000+ employees",
  "website": "https://www.nvidia.com/",
  "description": "NVIDIAはGPU（GeForce/RTXなど）で知られる半導体企業で、データセンター向けAIアクセラレータ（A100/H100/GB200など）、CUDAやTensorRT、NVIDIA AI Enterpriseといった開発基盤、Omniverse・DGX/Graceサーバ、そして自動運転向けのDRIVEプラットフォームを提供。生成AI・HPC・クラウド推論・エッジAIまで広くカバーし、AIインフラの中核的サプライヤーとして位置づけられる。",
  "founded_year": 1993
}

といったようなnvidiaの会社情報がjson形式で出力されました。

ワークフローの解説

本テンプレでは、

1. Start(Start Node)
2. Web Research Agent(Agent Node)
3. Summarize and display(Agent Node)
   というワークフローが組まれており、Start Nodeでは入力変数の設定。ウェブ検索と最後のサマリー部分を担当するノードはAgent Nodeというノードでプロンプト、モデル、アウトプットのフォーマットの基本設定から、検索結果を表示するか、エラーでもコンティニュー、つまり次のノードの処理を行うかなど細かい設定まで行うことができます。
   

このテンプレのワークフローに他のノードを追加してみて更新してみたいと思います。
Guardrailsのノードが気になったのでこれをワークフローに組み入れてみようかと思います。

Guardrailsの設定には、個人情報やJailBreakを検知したりすることができるそうです。

トグル横の設定のアイコンをクリックするとこんな感じ。どんな個人情報を検出したいかをチェック項目で設定できます。

今回は、Person nameを選択して、実際にGuardrailsが効いているか確認してみます。
某有名人の名前をお借りして、「〇〇が所属する会社を調べて」と調べてみます。Guradrailsが効いていたら個人名を特定して、調査前にワークフローを中断して欲しいです。
結果は・・・

調査開始してますね😇上手くガードレイルが効いてなさそう。ここは改善の余地がありそうな気がします。（もしどなたか上手くいくやり方あったら教えてください）

製品にエージェントを導入する

ワークフロービルダーの右上の公開ボタンを押すだけです。（めちゃ簡単）

公開自体は上記で簡単ですが、自社アプリに組み込もうとするとChatKitやAgent SDKを使って構築する必要があるそうです。
https://platform.openai.com/docs/guides/chatkit

ChatKit を実装する方法は 2 つあります。

• 推奨統合: ChatKitをフロントエンドに組み込み、OpenAIにバックエンドのホストとスケーリングを任せる
• 高度な統合: ChatKit SDKと任意のバックエンドを利用して、独自のUXを作成する

ChatKitのセットアップは、大まかに3つのステップで完了します。

1. エージェントワークフローを構築する

2. 自社製品にChatKitを設定する

ChatKit をセットアップするには、ChatKitセッションを作成し、バックエンドエンドポイントを作成し、ワークフローID を渡し、クライアントシークレットを交換し、サイトにChatKit を埋め込むスクリプトを追加します。

バックエンドの処理

export default async function getChatKitSessionToken(
deviceId: string
): Promise<string> {
const response = await fetch("https://api.openai.com/v1/chatkit/sessions", {
    method: "POST",
    headers: {
    "Content-Type": "application/json",
    "OpenAI-Beta": "chatkit_beta=v1",
    Authorization: "Bearer " + process.env.VITE_OPENAI_API_SECRET_KEY,
    },
    body: JSON.stringify({
    workflow: { id: "wf_68df4b13b3588190a09d19288d4610ec0df388c3983f58d1" },
    user: deviceId,
    }),
});

const { client_secret } = await response.json();

return client_secret;
}

フロントエンドの処理

import { ChatKit, useChatKit } from '@openai/chatkit-react';

   export function MyChat() {
     const { control } = useChatKit({
       api: {
         async getClientSecret(existing) {
           if (existing) {
             // implement session refresh
           }

           const res = await fetch('/api/chatkit/session', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
             },
           });
           const { client_secret } = await res.json();
           return client_secret;
         },
       },
     });

     return <ChatKit control={control} className="h-[600px] w-[320px]" />;
   }

公式サイトだと、pythonのコードとjsのコードが入り混じって途中迷子になりかけましたが、
バックエンドとしては、フロントエンドから叩けるエンドポイントを作成し、そこでsession作成を行い、session作成時にワークフローidを渡し、レスポンスに含まれるクライアントシークレットをChatkitクライアントライブラリに渡すという流れを抑えておけば良さそうです。https://github.com/openai/openai-chatkit-starter-app にChatKitを動かすためのNext.jsの雛形が実装されてるのでこちらを見るのが一番理解が早いかもしれません。

ChatKitを埋め込んだサンプルも公開されています。
https://chatkit.world/

https://github.com/openai/openai-chatkit-advanced-samples などで実装を見ていましたが、フロントエンドではChatKitの設定をしたコンポーネントを置くだけという感じ。Chatkit側でワークフローで定義した入力を受け付け、その応答をよしなにやってくれるぽい。
(例:
https://github.com/openai/openai-chatkit-advanced-samples/blob/main/examples/customer-support/frontend/src/components/ChatKitPanel.tsx)

エージェントのパフォーマンスを最適化する

エージェントの品質評価に関しては、既存のOpenAIのevalsを活用するので、今回詳細は割愛させてください。興味がある方は、https://platform.openai.com/docs/guides/agent-evals をご覧いただければと思います。

せっかくだし作ったワークフローをアプリに載せてみる

https://github.com/openai/openai-chatkit-starter-app をclone

npm i

でパッケージインストール

cp .env.example .env.local

した後に、環境変数（OPENAI_API_KEY、NEXT_PUBLIC_CHATKIT_WORKFLOW_ID）をセット

npm run dev

で起動したら、こんな画面が立ち上がります。

アプリケーションログを見てみると、

 ✓ Compiled /api/create-session in 318ms (442 modules)
[create-session] handling request {
  resolvedWorkflowId: 'wf_68e53898b7908190b4d57686a79ef49107e43abb11ce702a',
  body: '{"workflow":{"id":"wf_68e53898b7908190b4d57686a79ef49107e43abb11ce702a"}}'
}
[create-session] upstream response { status: 200, statusText: 'OK' }
 POST /api/create-session 200 in 868ms

でセッションの接続が成功していることが確認できますね。

実際にチャット画面で「nvidiaについて調べて」と入力して動作確認してみました。

ワークフローがうまく動作して調べることができてますね。
サクッとワークフローを組み込むことができました。

さいごに

使ってみた所感としては、ワークフロービルダーは直感的に操作しやすく、品質に関しては改善の余地があるなと思いつつ、guardrailsなどの便利なノードもすでに組み込まれているのは便利だなと思いました。
ChatKitの開発などアプリケーションへの組み込みの部分までサポートしてくれてて、実際にアプリケーションへの組み込みもサクッとできて動作確認まですぐにできたのはとても良かったです。
n8nやdifyなどを普段使われてる方のAgentKitとの比較記事など読んでみたいと個人的には思っているのでどなたか書いてくれると嬉しいです。

次は、chatGPT内にアプリを組み込めるApp SDK周りが気になってるのでこの辺を触りつつまた記事にしていこうかと思います。

脚注

1. https://platform.openai.com/docs/guides/agents 配下にありますよ、みたいに本来はシンプルに言いたかったんですが、その配下にずらずらとドキュメントがある感じではなく、https://platform.openai.com/docs/guides/chatkit のようにguides/の下にドキュメントが散らばって展開されているような形なので、視覚的な表現に一旦してみました。