Files
next-ai-draw-io/docs/ja/ai-providers.md
T
Dayuan Jiang 60105ddb51 refactor: remove dead code and over-engineering found by two audits (#986)
## Problem

Two audits of the repository (a workflow of finder, dedup and per-file verifier agents, run on 2026-10-11 against 1f4141e and again against 07f3e3c after a first round of refactoring) found dead code and features that were more machinery than the app needs: an Electron configuration-preset system with its own settings window, three copies of the about page, a hand-written `.env` parser, an "extended" system prompt nobody selected, two data migrations for formats from 2025-12 and 2026-01, a server-side example cache, type-to-confirm provider deletion, 81 unused dictionary keys, wrapper components around single call sites, and a long tail of unused exports, props, options and tests.

## Change

Every item below was either approved one by one or covered by "fix all of the others".

- **Electron:** the configuration-preset system is gone (settings window, preload, IPC, menu entry, dev watcher); `config-manager.ts` keeps only `userLocale`; `.env` files are parsed with `dotenv`. Entitlements file and a duplicate CI workflow removed; `test.yml` gets a type check and concurrency.
- **Server:** no extended prompt, no example cache, no `ENABLE_HISTORY_XML_REPLACE`, no message metadata or `hasConfig`; the connection test is one shared helper; EdgeOne loses its mock branch and model aliases; `DEBUG_LLM_PAYLOAD` logs message structure instead of payloads; Langfuse scoring helper; `apiKeyEnv` arrays kept and documented in `env.example` and the provider docs.
- **Pages:** one about page per language from a single component (old `/cn` and `/ja` URLs redirect with 308); layout uses `hasLocale`; the GitHub icon is a local component instead of `react-icons`; Cloudflare deploys without an R2 cache by default.
- **Chat and canvas:** the legacy `diagramHistory` conversion, the localStorage chat migration and the templates storage are gone; `chat-engine` reads the diagram through the context's refs; the diagram context has one tagged export path (`requestTaggedExport` / `fetchDiagramXml`); the screenshot check uses fetch + JSON and `generateText` with `Output.object`; `load-diagram` accepts `<svg:svg>` and strips the XML prolog.
- **Settings UI:** `model-selector` inlines its Dialog, Command and Tooltip; `ai-elements/model-selector`, `button-with-tooltip`, `error-toast` removed; no type-to-confirm, no footer, no `bedrockApiKey`; `use-model-config` loses the old-format migration; one reasoning component; the shimmer is CSS (no `motion`, no `@radix-ui/react-use-controllable-state`); 81 dictionary keys removed in all four languages.
- **MCP server:** `registerTool` / `ok` / `fail` replace per-tool try/catch; `syncFromBrowser`, `commitDocument`, `describePages`; the hand-written XML syntax check, unused result fields, `pickPageSelector`, `expandStyles` and the `host` attribute handling are gone; tests get a shared `setup.ts` and drive the server through the SDK client.
- **Prompt:** the web app's style rules come from the MCP drawing guide (`styleRules`), byte-identical to before.
- **Tests:** shared e2e helpers (`openApp`, `sse`, `toolCallEvents`, `chunkedReplies`); placeholder specs dropped; `settings-review-fixes` split by topic; unit tests use `vi.stubEnv`.
- **Dependencies removed:** `@xmldom/xmldom`, `remark-gfm`, `@anthropic-ai/tokenizer`, `@testing-library/user-event`, `concurrently`, `wait-on`, `eslint`, `eslint-config-next`, `@vitest/coverage-v8`, `shx`, `motion`, `@radix-ui/react-use-controllable-state`, `react-icons`.

Source lines: 74,983 before, 67,418 after (excluding lockfiles).

The last commit merges #984 (the canvas shell). Where the shell, the classic page or their tests depend on a wire format or signature this branch had changed, main's version wins (export fields of the poll response, `addHistory` signature); where main only extended code this branch restructured, main's change is carried into the new structure (`start_session`, `get_selection`, `prepareNewDiagram`, the diagram context's `requestExport`).

## Testing

- `tsc --noEmit` for the web app, `packages/mcp-server`, its shell and `electron`: clean
- `biome ci`: 0 errors (37 pre-existing warnings)
- Root `vitest run`: 719 passed; `packages/mcp-server` `vitest run`: 372 passed
- `next build`: clean
- Playwright, whole web suite on the dev server (4 workers): 280 tests, 279 passed; `language.spec.ts` "a stale offer to switch without saving does nothing once a message is being sent" failed under parallel load and passed alone, as it does on main
2026-10-12 12:35:55 +09:00

13 KiB
Raw Blame History

AIプロバイダーの設定

このガイドでは、next-ai-draw-io でさまざまな AI モデルプロバイダーを設定する方法について説明します。

クイックスタート

  1. .env.example を .env.local にコピーします
  2. 選択したプロバイダーの API キーを設定します
  3. AI_MODEL を希望のモデルに設定します
  4. npm run dev を実行します

対応プロバイダー

Doubao (ByteDance Volcengine)

DOUBAO_API_KEY=your_api_key
AI_MODEL=doubao-seed-1-8-251215  # または他の Doubao モデル

Google Gemini

GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
AI_MODEL=gemini-2.0-flash

任意のカスタムエンドポイント:

GOOGLE_BASE_URL=https://your-custom-endpoint

OpenAI

OPENAI_API_KEY=your_api_key
AI_MODEL=gpt-4o

任意のカスタムエンドポイント(OpenAI 互換サービス用):

OPENAI_BASE_URL=https://your-custom-endpoint/v1

LM Studio などのローカルな OpenAI 互換サーバーも同じ方法で使えます。ベース URL を http://localhost:1234/v1(LM Studio の既定ポート)に設定し、API キーには lm-studio など空でない任意の値を入力してください。上の環境変数でも、モデル設定画面でも設定できます。

AIHubMix

AIHubMix は、単一の API キーで Claude、GPT、Gemini、DeepSeek などのモデルへのアクセスを提供します。

AIHUBMIX_API_KEY=your_api_key
AI_MODEL=claude-sonnet-4-5-20250929

任意のカスタムエンドポイント:

AIHUBMIX_BASE_URL=https://aihubmix.com/v1

Anthropic

ANTHROPIC_API_KEY=your_api_key
AI_MODEL=claude-sonnet-4-5-20250514

または、Bearer 認証トークンを使用することもできます(OAuth スタイルのトークンを発行するゲートウェイ経由で利用する場合など)。ANTHROPIC_AUTH_TOKEN は Authorization: Bearer <token> ヘッダーで送信され、ANTHROPIC_API_KEY は x-api-key ヘッダーで送信されます。両者は排他的なので、いずれか一方のみを設定してください:

ANTHROPIC_AUTH_TOKEN=your_auth_token
AI_MODEL=claude-sonnet-4-5-20250514

任意のカスタムエンドポイント:

ANTHROPIC_BASE_URL=https://your-custom-endpoint

DeepSeek

DEEPSEEK_API_KEY=your_api_key
AI_MODEL=deepseek-chat

任意のカスタムエンドポイント:

DEEPSEEK_BASE_URL=https://your-custom-endpoint

SiliconFlow (OpenAI 互換)

SILICONFLOW_API_KEY=your_api_key
AI_MODEL=deepseek-ai/DeepSeek-V3  # 例; 任意の SiliconFlow モデル ID を使用

任意のカスタムエンドポイント(デフォルトは推奨ドメイン):

SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # または https://api.siliconflow.cn/v1

SGLang

SGLANG_API_KEY=your_api_key
AI_MODEL=your_model_id

任意のカスタムエンドポイント:

SGLANG_BASE_URL=https://your-custom-endpoint/v1

Azure OpenAI

AZURE_API_KEY=your_api_key
AZURE_RESOURCE_NAME=your-resource-name  # 必須: Azure リソース名
AI_MODEL=your-deployment-name

またはリソース名の代わりにカスタムエンドポイントを使用:

AZURE_API_KEY=your_api_key
AZURE_BASE_URL=https://your-resource.openai.azure.com  # AZURE_RESOURCE_NAME の代替
AI_MODEL=your-deployment-name

任意の推論設定:

AZURE_REASONING_EFFORT=low      # 任意: low, medium, high
AZURE_REASONING_SUMMARY=detailed  # 任意: none, brief, detailed

AWS Bedrock

AWS_REGION=us-west-2
AWS_ACCESS_KEY_ID=your_access_key_id
AWS_SECRET_ACCESS_KEY=your_secret_access_key
AI_MODEL=global.anthropic.claude-sonnet-5-5

最近の Claude モデルは、推論プロファイル(inference profile)の ID でのみ呼び出せます。この ID は global. や us. などのリージョン接頭辞で始まります。anthropic.claude-sonnet-5-5 のような接頭辞なしの ID では「on-demand throughput isn't supported」というエラーになります。

注: AWS 上(IAM ロールを持つ Lambda や EC2)では、認証情報は IAM ロールから自動的に取得されます。

OpenRouter

OPENROUTER_API_KEY=your_api_key
AI_MODEL=anthropic/claude-sonnet-4

任意のカスタムエンドポイント:

OPENROUTER_BASE_URL=https://your-custom-endpoint

Ollama (ローカル)

AI_PROVIDER=ollama
AI_MODEL=llama3.2

任意のカスタム URL:

OLLAMA_BASE_URL=http://localhost:11434/api

ModelScope

MODELSCOPE_API_KEY=your_api_key
AI_MODEL=Qwen/Qwen3-235B-A22B-Instruct-2507

任意のカスタムエンドポイント:

MODELSCOPE_BASE_URL=https://your-custom-endpoint

Vercel AI Gateway

Vercel AI Gateway は、単一の API キーで複数の AI プロバイダーへの統合アクセスを提供します。これにより認証が簡素化され、複数の API キーを管理することなくプロバイダーを切り替えることができます。

基本的な使用法 (Vercel ホストの Gateway):

AI_GATEWAY_API_KEY=your_gateway_api_key
AI_MODEL=openai/gpt-4o

カスタム Gateway URL (ローカル開発またはセルフホスト Gateway 用):

AI_GATEWAY_API_KEY=your_custom_api_key
AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
AI_MODEL=openai/gpt-4o

モデル形式は provider/model 構文を使用します:

  • openai/gpt-4o - OpenAI GPT-4o
  • anthropic/claude-sonnet-4-5 - Anthropic Claude Sonnet 4.5
  • google/gemini-2.0-flash - Google Gemini 2.0 Flash

設定に関する注意点:

  • AI_GATEWAY_BASE_URL が設定されていない場合、デフォルトの Vercel Gateway URL (https://ai-gateway.vercel.sh/v1/ai) が使用されます
  • カスタムベース URL は以下の場合に便利です:
    • カスタム Gateway インスタンスを使用したローカル開発
    • セルフホスト AI Gateway デプロイメント
    • エンタープライズプロキシ設定
  • カスタムベース URL を使用する場合、AI_GATEWAY_API_KEY も指定する必要があります

Vercel AI Gateway ダッシュボードから API キーを取得してください。

MiniMax

MiniMax は 2 つの API 形式をサポートしています:

  • Anthropic 互換(/anthropic エンドポイント)— 推奨、インターリーブ思考をサポート
  • OpenAI 互換(/v1 エンドポイント)— 標準 OpenAI チャット補完形式
MINIMAX_API_KEY=your_api_key
AI_MODEL=MiniMax-M3

オプション設定:

# 中国大陸版、Anthropic 互換(デフォルト)
MINIMAX_BASE_URL=https://api.minimaxi.com/anthropic

# 中国大陸版、OpenAI 互換
MINIMAX_BASE_URL=https://api.minimaxi.com/v1

# 国際版、Anthropic 互換
MINIMAX_BASE_URL=https://api.minimax.io/anthropic

# 国際版、OpenAI 互換
MINIMAX_BASE_URL=https://api.minimax.io/v1

GLM (Zhipu AI)

GLM_API_KEY=your_api_key
AI_MODEL=glm-4

オプションのカスタムエンドポイント:

GLM_BASE_URL=https://your-custom-endpoint

Qwen (Alibaba Cloud)

QWEN_API_KEY=your_api_key
AI_MODEL=qwen-turbo

オプションのカスタムエンドポイント:

QWEN_BASE_URL=https://your-custom-endpoint

Kimi (Moonshot AI)

KIMI_API_KEY=your_api_key
AI_MODEL=kimi-latest

オプションのカスタムエンドポイント:

KIMI_BASE_URL=https://your-custom-endpoint

Qiniu (Qiniu Cloud)

QINIU_API_KEY=your_api_key
AI_MODEL=your_model_id

オプションのカスタムエンドポイント:

QINIU_BASE_URL=https://your-custom-endpoint

MiMo (Xiaomi)

MIMO_API_KEY=your_api_key
AI_MODEL=mimo-v2.5-pro

オプションのカスタムエンドポイント(Token Plan 加入者は専用の Base URL を設定してください):

MIMO_BASE_URL=https://token-plan-cn.xiaomimimo.com/v1

自動検出

1つのプロバイダーの API キーのみを設定した場合、システムはそのプロバイダーを自動的に検出して使用します。AI_PROVIDER を設定する必要はありません。

複数の API キーを設定する場合は、AI_PROVIDER を明示的に設定する必要があります:

AI_PROVIDER=google  # または: openai, anthropic, aihubmix, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang, modelscope, minimax, glm, qwen, kimi, qiniu, mimo

サーバーサイドマルチモデル設定

管理者は、ユーザーが個人のAPIキーを提供することなく利用できる複数のサーバーサイドモデルを設定できます。

設定方法

方法1:環境変数(クラウドデプロイ推奨)

AI_MODELS_CONFIG をJSON文字列として設定:

AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'

方法2:設定ファイル

プロジェクトルートに ai-models.json ファイルを作成します(または AI_MODELS_CONFIG_PATH でパスを指定)。

方法3:AI_MODEL をカンマ区切りで指定(単一プロバイダーの簡易設定)

同一プロバイダー内の複数モデルだけを公開したい場合は、AI_MODEL にカンマ区切りで列挙できます。最初のモデルがデフォルトになります。

AI_PROVIDER=doubao
AI_MODEL=doubao-seed-1-8-251215,doubao-seed-1-6-flash,doubao-seed-1-6-pro

これは等価な ai-models.json の簡易表記です。複数のプロバイダーや、カスタム apiKeyEnv / baseUrlEnv を使う場合は、方法1または方法2を使ってください。

設定例

{
  "providers": [
    {
      "name": "OpenAI Production",
      "provider": "openai",
      "models": ["gpt-4o", "gpt-4o-mini"],
      "default": true
    },
    {
      "name": "Custom DeepSeek",
      "provider": "deepseek",
      "models": ["deepseek-chat"],
      "apiKeyEnv": "MY_DEEPSEEK_KEY",
      "baseUrlEnv": "MY_DEEPSEEK_URL"
    }
  ]
}

フィールド説明

フィールド 必須 説明
name はい 表示名(同一プロバイダーの複数設定をサポート)
provider はい プロバイダータイプ(openai, anthropic, google, bedrock など)
models はい モデルIDのリスト
default いいえ true に設定すると、そのプロバイダーの最初のモデルがデフォルトで選択されます
apiKeyEnv いいえ カスタムAPIキー環境変数名(デフォルトは OPENAI_API_KEY などの標準変数)。環境変数名の配列も指定でき、リクエストごとに値のある変数から1つがランダムに選ばれます(複数キーへの負荷分散)
baseUrlEnv いいえ カスタムBase URL環境変数名

備考

  • APIキーと認証情報は環境変数で提供します。デフォルトは標準変数名(例:OPENAI_API_KEY)を使用しますが、apiKeyEnv でカスタム変数名を指定できます。
  • name フィールドにより同一プロバイダーの複数設定が可能です(例:「OpenAI Production」と「OpenAI Staging」が両方とも provider: "openai" を使用しつつ、異なる apiKeyEnv を持つ)。
  • 設定が存在しない場合、アプリは AI_PROVIDER/AI_MODEL 環境変数設定にフォールバックします。

モデル性能要件

このタスクは、厳密なフォーマット制約(draw.io XML)を伴う長文テキストの生成を含むため、非常に強力なモデル性能が必要です。

推奨モデル:

  • Claude Sonnet 4.5 / Opus 4.5

Ollama に関する注意: Ollama はプロバイダーとしてサポートされていますが、DeepSeek R1 や Qwen3-235B のような高性能モデルをローカルで実行していない限り、このユースケースでは一般的に実用的ではありません。

Temperature(温度)設定

環境変数で Temperature を任意に設定できます:

TEMPERATURE=0  # より決定論的な出力(ダイアグラムに推奨)

重要: 以下の Temperature 設定をサポートしていないモデルでは、TEMPERATURE を未設定のままにしてください:

  • GPT-5.1 およびその他の推論モデル
  • 一部の特殊なモデル

未設定の場合、モデルはデフォルトの挙動を使用します。

推奨事項

  • 最高の体験: 画像からダイアグラムを生成する機能には、ビジョン(画像認識)をサポートするモデル(GPT-4o, Claude, Gemini)を使用してください
  • 低コスト: DeepSeek は競争力のある価格を提供しています
  • プライバシー: 完全にローカルなオフライン操作には Ollama を使用してください(強力なハードウェアが必要です)
  • 柔軟性: OpenRouter は単一の API で多数のモデルへのアクセスを提供します