Next.jsでWebチャットアプリを作成する

​

サンプルプロジェクト

• GitHub: examples/web-chat-nextjs
• リポジトリ内のパス: examples/web-chat-nextjs

​

このアプリの機能

• • 利用可能なモデルを取得 GET /v1/models
• • チャットのやり取りを送信 POST /v1/responses
• APIキーをサーバー上に保持
• OAuthの複雑さを避けて実際の製品開発を始めるためのシンプルな土台を提供

​

主なファイル

• app/api/models/route.ts
• app/api/responses/route.ts
• app/components/ChatClient.tsx
• lib/gateway.ts

​

この構成を採用している理由

​

1. ブラウザーからPhaseoを直接呼び出さない

• サーバー側でシークレットを管理する
• ヘッダーとリクエスト本文を一か所で管理する
• 後から認証、レート制限、ログ記録を追加しやすくする

​

2. モデルの検出と生成を分離する

• モデル一覧を返すルート
• チャットリクエストを実行するルート

​

3. UIは操作状態のみを管理する

• 入力状態
• 読み込み状態
• エラー表示
• レンダリングするメッセージ

​

前提条件

• • Node.jsと対応するパッケージマネージャー
• Phaseo APIキー

​

サンプルを実行する

cd examples/web-chat-nextjs
npm install
cp .env.example .env.local

cd examples/web-chat-nextjs
pnpm install
cp .env.example .env.local

cd examples/web-chat-nextjs
yarn install
cp .env.example .env.local

cd examples/web-chat-nextjs
bun install
cp .env.example .env.local

• PHASEO_API_KEY
• NEXT_PUBLIC_GATEWAY_URL

npm run dev

pnpm dev

yarn dev

bun run dev

​

動作を確認する

• モデル選択欄にサーバールート経由でモデルが表示されます。
• メッセージを送信するとアシスタントから応答が返ります。
• ブラウザーのネットワークパネルに PHASEO_API_KEY.
• Gatewayリクエストが失敗すると、UIに役立つエラー状態が表示されます。

​

アプリをカスタマイズする

• デフォルトモデルを本番環境で使用するモデルに変更する
• トークンごとの出力が必要なUXではストリーミングを追加する
• 複数ユーザー向けのアプリになった段階で認証を追加する
• より高レベルなクライアントが必要な場合は、後でサーバールートの内部実装をTypeScript SDKに置き換える

​

別の開始方法を選ぶ場合

• UIではなくスクリプトやバックエンドの疎通確認が必要なら、Nodeクイックスタートを使います。
• 最初の統合先がworker、CLI、バックエンドサービスならPythonクイックスタートを使います。

​

関連ガイド

• ミニアプリ用の開始プロンプト
• サンプル
• クイックスタート