👤
読み込み中...2025/10/10 09:53

OpenAIが発表したAgent Builderで使われているChatKitの使い方がわからなくて困っています。誰か教えてください?

AIに聞いて調べて回答してます。
稚拙ですが、ご参考までに、、

全体像を押さえる
まず前提を整理しておこう。ChatKit は、OpenAI の新しい AgentKit/Agent Builder の流れの中で、「チャット UI を簡単に埋め込める部品(フレームワーク)」として提供されてるもの。 

Agent Builder で作ったワークフロー(エージェントのロジック)を、ChatKit を使ってあなたのアプリやウェブサイト上でユーザーと対話できる形で公開する、という役割を持つ。 

言い換えると:
• Agent Builder → エージェント(ロジック・処理の流れ)を作るツール
• ChatKit → そのエージェントをチャット形式で使えるように「見せる・使う」UI 部分

だからまずは、エージェント側(Builder での設計)がちゃんと動くことが前提。その上で、ChatKit を “橋渡し” する感じ。

◎具体的な簡単サンプル(React ベース)
僕も手元でやると理解が進むから、簡略したサンプルを示す。動かすとこまでやってみて。
(プロンプト参考してください)

ここで大事なのは、
• clientToken(認証用トークン)を渡すこと
• control を ChatKit に渡して操作をリンクさせること
• オプションで見た目・挙動を変えられること

あと、ChatKit は裏で “ストリーミング応答(メッセージを生成しながら返す)” や「チャット状態の管理」などをやってくれて、あなたがその部分を一から実装しなくていいように設計されてる。 

🤖

使用プロンプト

// ChatPage.tsx (React:クライアント側のみレンダリング) "use client"; // Next.js の App Router などを使ってるとき import { useChatKit } from "@openai/chatkit-js"; import { ChatKit } from "@openai/chatkit-js"; export default function ChatPage() { const { control } = useChatKit({ api: { clientToken: YOUR_CLIENT_TOKEN, // サーバーから取得したトークン }, options: { // テーマや文言の調整など theme: { colorScheme: "light", color: { accent: { primary: "#2D8CFF", level: 2 } }, radius: "medium", density: "comfortable", }, composer: { placeholder: "質問をどうぞ…", }, startScreen: { greeting: "こんにちは!何をお手伝いしますか?", }, }, }); return <ChatKit control={control} className="h-[600px] w-full" />; }
使用AIサービス:ChatGPT

コメントするにはログインが必要です。

香るさんの回答 | OpenAIが発表したAgent Builderで使われているChatKitの使い方がわからなくて困... | OpenPrompt | OpenPrompt