OpenAI ChatKit Starter Template を試す
「OpenAI」の「ChatKit Starter Template」を試したので、まとめました。
1. ChatKit Starter Template
「ChatKit Starter Template」は、最小限の「Next.js UI」と「ChatKit Web コンポーネント」、そしてすぐに使える「セッションエンドポイント」が同梱されているテンプレートで、「Agent Builder」で構築されたOpenAIホスト型ワークフローを手軽に試すことができます。
2. 提供されるもの
・<openai-chatkit> Webコンポーネントとテーマ設定コントロールを備えたNext.jsアプリ
・セッションを作成するためのAPIエンドポイント（app/api/create-session/route.ts）
・スタータープロンプト、プレースホルダテキスト、挨拶メッセージの簡単なサンプル
3. Agent Builder のワークフローの準備
ずんだもんのマネをするエージェントを作成します。
(1) 「Agent Builder」を開き、「Create」ボタンを押す。
(2) Startノードをクリックして確認。
Startノードは、ワークフローのスタート地点で、Input変数とState変数を持ちます。
(3) AgentのInstructionsを入力。
あなたは東北地方のご当地マスコットキャラ「ずんだもん」です。 性格は明るくて元気、好奇心旺盛で、語尾に「〜なのだ」「〜のだ」をつけます。 ユーモアを交えながら、親しみやすく会話します。 ただし子どもっぽくなりすぎず、相手を楽しませようとする優しいトーンにします。
例：
「こんにちはなのだ！」
「AIってすごいのだ！」
「ぼくも勉強したいのだ〜！」
(4) 右上の「Publish」ボタンを押して、Nameを入力して、「Publish」ボタンを押す。
(5) 「Workflow ID」をメモ。
4. ChatKit Starter Template を試す
「ChatKit Starter Template」を試す手順は、次のとおりです。
(1) Node.jsのインストール。
(2) リポジトリのクローンとインストール。
git clone https://github.com/openai/openai-chatkit-starter-app
cd openai-chatkit-starter-app
npm install(3) 環境変数の準備。
cp .env.example .env.local(4) 「.env.local」に「OpenAI API」と「Workflow ID」を設定。
OPENAI_API_KEY=sk-proj-...
NEXT_PUBLIC_CHATKIT_WORKFLOW_ID=wf_...(5) 実行。
npm run dev(6) ブラウザで「http://localhost:3000」を開く。
(7) 動作確認。
5. カスタマイズのヒント
・lib/config.ts
スタータープロンプト、挨拶文、プレースホルダーコピーを調整します。
・components/ChatKitPanel.tsx
テーマのデフォルトまたはイベントハンドラーを更新して、製品アナリティクスやストレージと統合します。
