chatbot-api

ChatBotプロジェクトに新しいAI APIを統合するためのスキル。APIクラスの実装パターン、プロキシ設定、ストリーミング実装を提供します。新しいAI APIを追加する時、APIクラスを実装する時、ストリーミング機能を追加する時、サーバープロキシを設定する時に使用してください。

SKILL.md

GitHub

AI プロバイダ追加

既存クラス(手本)

クラス ファイル 特徴
OpenAIAPI js/core/openaiApi.js Chat Completions。最も標準的な手本
ClaudeAPI js/core/claudeApi.js Messages API。Web検索ツール対応
GeminiAPI js/core/geminiApi.js GenerateContent
ResponsesAPI js/core/responsesApi.js OpenAI Responses API(Web検索)

ルーターは js/core/api.js の AIAPI.callAIAPI(messages, model, attachments, options)。モデル名でプロバイダを判定して各クラスに委譲する。

手順

  1. config.js(app/public/js/core/config.js)
    • AIAPI.ENDPOINTS にプロキシ経由のパスを追加(例: NEW_API: '/newapi/v1/chat')
    • STORAGE.KEYS に API キー保存用キーを追加(例: NEW_API_KEY: 'newApiKey')
    • MODELS にモデル配列を追加。既存は MODELS.OPENAI / CLAUDE / GEMINI
    • Function Calling に対応するなら TOOLS.COMPATIBLE_MODELS にも同じモデル名を足す。ここに無いとチャットツールが出ない
    • Web検索に対応するなら WEB_SEARCH 配下の対応モデル表にも足す
  2. サーバープロキシ(app/server/index.js): references/server-proxy-setup.md。単純転送なら createProxyMiddleware、ヘッダ組み替えや動的 URL なら app.post 型。起動ログの Proxy Endpoints: 一覧にも1行足す
  3. API クラス(js/core/newApi.js): references/api-class-template.md。必須メソッド:
    • callNewAPI(messages, model, attachments, options)
    • #validateAPISettings()
    • #prepareNewRequest()
    • #executeNewRequest()(非ストリーミング)
    • #executeStreamNewRequest()(ストリーミング。references/streaming-implementation.md)
  4. ルーティング(js/core/api.js): callAIAPI のプロバイダ判定に分岐を追加
  5. API 設定 UI(js/modals/apiSettings/apiSettingsModal.js と index.html の対応フォーム): キー入力欄と保存処理を追加。キーは Storage 経由で暗号化保存される
  6. index.html: <script src="js/core/responsesApi.js"> の並び(api.js の直後ブロック)に追加
  7. README.md の対応モデル表を更新

動作確認

  1. cd app && npm start → 起動ログに新プロキシが出る
  2. API 設定モーダルでキーを保存し、再読み込み後も残っている
  3. モデル選択に新モデルが出て、非ストリーミング・ストリーミング双方で応答が返る
  4. サーバーコンソールに [NewAPI] POST /... のログが出る
  5. 添付ファイル付きで送って #prepareNewRequest が壊れない
  6. 無効なキーで [NewAPI] プレフィックスのエラーが UI に表示される

参照ファイル

ファイル 読むタイミング
references/api-class-template.md 手順3でクラスを書くとき
references/server-proxy-setup.md 手順2でプロキシを足すとき
references/streaming-implementation.md SSE ストリーミングを実装するとき

Azure Responses API の設定と検証

  • Azure の通常チャットは azureResponsesEndpoint(共通の完全URL)が設定されていれば Responses API を使用する。azureDeployments[model] を本文の model に設定し、URLのパス・クエリは保持する。
  • 設定の追加時は config.js の型・保存キー、storage.js、apiSettingsModal.js の表示、modalHandlers.js の保存を揃える。デプロイ名マップは JSON として読み戻す。
  • apiType で OpenAI / Azure を選ぶ。保存済み Azure 設定が存在するだけで OpenAI の送信先を変更しない。
  • 共通URLが空のときだけ従来の azureEndpoints[model] を使用する。RAG用のエンドポイントは別設定。
  • /azure-openai は { targetUrl, apiKey, body } を受け取り、api-key 認証で転送する。
  • 回帰確認: リポジトリ直下で node --test tests/azure-responses.test.cjs。続けてブラウザで保存・再読み込み・通常チャットを確認する。