chatbot-api
ChatBotプロジェクトに新しいAI APIを統合するためのスキル。APIクラスの実装パターン、プロキシ設定、ストリーミング実装を提供します。新しいAI APIを追加する時、APIクラスを実装する時、ストリーミング機能を追加する時、サーバープロキシを設定する時に使用してください。
SKILL.md.claude/skills/chatbot-api
GitHubAI プロバイダ追加
既存クラス(手本)
| クラス | ファイル | 特徴 |
|---|---|---|
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)。モデル名でプロバイダを判定して各クラスに委譲する。
手順
- 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配下の対応モデル表にも足す
- サーバープロキシ(
app/server/index.js):references/server-proxy-setup.md。単純転送ならcreateProxyMiddleware、ヘッダ組み替えや動的 URL ならapp.post型。起動ログのProxy Endpoints:一覧にも1行足す - API クラス(
js/core/newApi.js):references/api-class-template.md。必須メソッド:callNewAPI(messages, model, attachments, options)#validateAPISettings()#prepareNewRequest()#executeNewRequest()(非ストリーミング)#executeStreamNewRequest()(ストリーミング。references/streaming-implementation.md)
- ルーティング(
js/core/api.js):callAIAPIのプロバイダ判定に分岐を追加 - API 設定 UI(
js/modals/apiSettings/apiSettingsModal.jsとindex.htmlの対応フォーム): キー入力欄と保存処理を追加。キーはStorage経由で暗号化保存される - index.html:
<script src="js/core/responsesApi.js">の並び(api.jsの直後ブロック)に追加 - README.md の対応モデル表を更新
動作確認
cd app && npm start→ 起動ログに新プロキシが出る- API 設定モーダルでキーを保存し、再読み込み後も残っている
- モデル選択に新モデルが出て、非ストリーミング・ストリーミング双方で応答が返る
- サーバーコンソールに
[NewAPI] POST /...のログが出る - 添付ファイル付きで送って
#prepareNewRequestが壊れない - 無効なキーで
[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。続けてブラウザで保存・再読み込み・通常チャットを確認する。