Next AI Draw.io を自分でホストする場合は、環境変数で AI プロバイダーとモデルを選びます。このページでは、プロバイダーごとの環境変数と、全ユーザーに複数のモデルを提供する方法、コードに新しいプロバイダーを追加する方法を説明します。
はじめる
env.exampleを.env.localにコピーします。- 選んだプロバイダーの API キーを設定します。
AI_MODELに使いたいモデルを設定します。npm run devを実行します。
プロバイダーごとに設定する
OpenAI
OPENAI_API_KEY=your_api_key
AI_MODEL=gpt-4oOpenAI 互換サービスを使う場合は、カスタムエンドポイントも設定できます。
OPENAI_BASE_URL=https://your-custom-endpoint/v1LM Studio などのローカルな OpenAI 互換サーバーも同じ方法で使えます。ベース URL を http://localhost:1234/v1(LM Studio の既定ポート)に設定し、API キーには lm-studio など空でない任意の値を入力してください。上の環境変数でも、設定の「モデル」タブでも設定できます。
Anthropic
ANTHROPIC_API_KEY=your_api_key
AI_MODEL=claude-sonnet-4-5-20250929Bearer トークンでサインインすることもできます。OAuth スタイルのトークンを発行するゲートウェイを経由する場合などです。
ANTHROPIC_AUTH_TOKEN=your_auth_token
AI_MODEL=claude-sonnet-4-5-20250929ANTHROPIC_API_KEY は x-api-key ヘッダーで送信され、ANTHROPIC_AUTH_TOKEN は Authorization: Bearer <token> で送信されます。2 つは同時に使えないので、どちらか一方だけを設定してください。
必要に応じて、カスタムエンドポイントを設定できます。
ANTHROPIC_BASE_URL=https://your-custom-endpointGoogle Gemini
GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
AI_MODEL=gemini-2.0-flash必要に応じて、カスタムエンドポイントを設定できます。
GOOGLE_BASE_URL=https://your-custom-endpointDeepSeek
DEEPSEEK_API_KEY=your_api_key
AI_MODEL=deepseek-chat必要に応じて、カスタムエンドポイントを設定できます。
DEEPSEEK_BASE_URL=https://your-custom-endpointQwen(Alibaba Cloud)
QWEN_API_KEY=your_api_key
AI_MODEL=qwen-turbo必要に応じて、カスタムエンドポイントを設定できます。
QWEN_BASE_URL=https://your-custom-endpointDoubao(ByteDance Volcengine)
DOUBAO_API_KEY=your_api_key
AI_MODEL=doubao-seed-1-8-251228 # または他の Doubao モデルGLM(Zhipu AI)
GLM_API_KEY=your_api_key
AI_MODEL=glm-4必要に応じて、カスタムエンドポイントを設定できます。
GLM_BASE_URL=https://your-custom-endpointKimi(Moonshot AI)
KIMI_API_KEY=your_api_key
AI_MODEL=kimi-latest必要に応じて、カスタムエンドポイントを設定できます。
KIMI_BASE_URL=https://your-custom-endpointMiniMax
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/v1MiMo(Xiaomi)
MIMO_API_KEY=your_api_key
AI_MODEL=mimo-v2.5-pro必要に応じて、カスタムエンドポイントを設定できます。Token Plan 加入者は、専用のベース URL を設定してください。
MIMO_BASE_URL=https://token-plan-cn.xiaomimimo.com/v1OpenRouter
OPENROUTER_API_KEY=your_api_key
AI_MODEL=anthropic/claude-sonnet-4必要に応じて、カスタムエンドポイントを設定できます。
OPENROUTER_BASE_URL=https://your-custom-endpointAIHubMix
AIHubMix では、1 つの API キーで Claude、GPT、Gemini、DeepSeek などのモデルを使えます。
AIHUBMIX_API_KEY=your_api_key
AI_MODEL=claude-sonnet-4-5-20250929必要に応じて、カスタムエンドポイントを設定できます。
AIHUBMIX_BASE_URL=https://aihubmix.com/v1SiliconFlow(OpenAI 互換)
SILICONFLOW_API_KEY=your_api_key
AI_MODEL=deepseek-ai/DeepSeek-V3 # 例; 任意の SiliconFlow モデル ID を使用ベース URL を設定しない場合、アプリは https://api.siliconflow.cn/v1 を使います。これは cloud.siliconflow.cn で作成したキー用のエンドポイントです。キーを国際版のサイト cloud.siliconflow.com で作成した場合は、.com のエンドポイントを設定してください。
SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1ModelScope
MODELSCOPE_API_KEY=your_api_key
AI_MODEL=Qwen/Qwen3-235B-A22B-Instruct-2507必要に応じて、カスタムエンドポイントを設定できます。
MODELSCOPE_BASE_URL=https://your-custom-endpointNovita AI
NOVITA_API_KEY=your_api_key
AI_MODEL=deepseek/deepseek-v4-pro必要に応じて、カスタムエンドポイントを設定できます。設定しない場合は https://api.novita.ai/openai が使われます。
NOVITA_BASE_URL=https://your-custom-endpointAtlas Cloud
ATLASCLOUD_API_KEY=your_api_key
AI_MODEL=your_model_idアプリには Atlas Cloud のモデル一覧が組み込まれていません。設定の「モデル」タブでキーを入力すると、アプリが Atlas Cloud からモデル一覧を読み込みます。
必要に応じて、カスタムエンドポイントを設定できます。設定しない場合は https://api.atlascloud.ai/v1 が使われます。
ATLASCLOUD_BASE_URL=https://your-custom-endpointQiniu(Qiniu Cloud)
QINIU_API_KEY=your_api_key
AI_MODEL=your_model_id必要に応じて、カスタムエンドポイントを設定できます。
QINIU_BASE_URL=https://your-custom-endpointVercel AI Gateway
Vercel AI Gateway では、1 つの 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モデル ID は provider/model の形式で書きます。
AI_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 も設定する必要があります。
API キーは Vercel AI Gateway のダッシュボードで取得してください。
Amazon 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 上(Lambda や、IAM ロールを持つ EC2)では、認証情報は IAM ロールから自動的に取得されます。
Google Vertex AI
Google Vertex AI は、企業向けの Google Cloud のサービスです。エンタープライズ向けの機能とデータレジデンシー(データを選んだリージョンに保管すること)を備えています。Express モードでは普通の API キーでサインインできるので、Vercel や Cloudflare などのエッジランタイムでも使えます。
GOOGLE_VERTEX_API_KEY=your_api_key
AI_MODEL=gemini-2.0-flash必要に応じて、カスタムエンドポイントを設定できます。
GOOGLE_VERTEX_BASE_URL=https://your-custom-endpointAzure OpenAI
Azure には、リソース名かエンドポイント URL のどちらかが必要です。どちらか一方を設定してください。両方を設定した場合は AZURE_BASE_URL が使われます。
リソース名を使う場合です。
AZURE_API_KEY=your_api_key
AZURE_RESOURCE_NAME=your-resource-name # Azure リソース名
AI_MODEL=your-deployment-nameリソース名の代わりに、エンドポイント URL を指定することもできます。
AZURE_API_KEY=your_api_key
AZURE_BASE_URL=https://your-resource.openai.azure.com/openai # AZURE_RESOURCE_NAME の代わり
AI_MODEL=your-deployment-name必要に応じて、推論の設定もできます。
AZURE_REASONING_EFFORT=low # 任意: low, medium, high
AZURE_REASONING_SUMMARY=detailed # 任意: none, brief, detailedEdgeOne Pages(Tencent Cloud)
アプリを Tencent EdgeOne Pages にデプロイした場合は、サイト自身の Edge AI 関数 /api/edgeai を使えます。API キーもベース URL も要りません。検出できるキーがないので、サーバーはこのプロバイダーを自動では選べません。AI_PROVIDER を設定してください。
AI_PROVIDER=edgeone
AI_MODEL=@tx/deepseek-ai/deepseek-v32この関数が受け付けるモデルは @tx/deepseek-ai/deepseek-v32、@tx/deepseek-ai/deepseek-r1-0528、@tx/deepseek-ai/deepseek-v3-0324 です。ACCESS_CODE_LIST を設定した場合は、関数もアクセスコードを確認します。
Ollama(ローカル)
AI_PROVIDER=ollama
AI_MODEL=llama3.2必要に応じて、カスタム URL を設定できます。
OLLAMA_BASE_URL=http://localhost:11434/apiSGLang
SGLANG_API_KEY=your_api_key
AI_MODEL=your_model_id必要に応じて、カスタムエンドポイントを設定できます。
SGLANG_BASE_URL=https://your-custom-endpoint/v1そのほかの OpenAI 互換 API(custom)
上に挙がっていないサーバー(vLLM、LM Studio、LiteLLM、API ゲートウェイなど)は、設定で OpenAI-compatible を選び、そのベース URL とキーを入力します。キーを確認しないサーバーには、空でない任意の値を入れてください。
アプリは複数の system メッセージを 1 つにまとめます。オープンソースモデルのチャットテンプレートがそれを前提にしているためです。<think> 内の推論は返答から分離されます。
CUSTOM_API_KEY=your_api_key
CUSTOM_BASE_URL=http://127.0.0.1:8000/v1
AI_MODEL=your_model_idサーバーがプロバイダーを選ぶしくみ
1 つのプロバイダーの API キーだけを設定した場合は、サーバーがそのプロバイダーを自動的に検出して使います。AI_PROVIDER を設定する必要はありません。
複数のプロバイダーの API キーを設定した場合は、AI_PROVIDER を設定する必要があります。
AI_PROVIDER=google # または: openai, anthropic, google, vertexai, azure, bedrock, ollama, openrouter, aihubmix, deepseek, siliconflow, sglang, gateway, edgeone, doubao, modelscope, glm, qwen, qiniu, kimi, minimax, novita, mimo, atlascloud, custom全ユーザーに複数のモデルを提供する
管理者は、サーバーに複数のモデルを設定できます。全ユーザーが、自分の API キーなしでそれらのモデルを使えます。この設定がない場合、アプリは環境変数 AI_PROVIDER と AI_MODEL を使います。
設定の方法は 3 つあります。
設定を環境変数に書く
クラウドにデプロイする場合は、この方法をおすすめします。AI_MODELS_CONFIG に JSON 文字列を設定します。
AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'設定ファイルを使う
プロジェクトのルートに ai-models.json ファイルを作成します。別の場所に置く場合は、AI_MODELS_CONFIG_PATH でその場所を指定します。
AI_MODEL に複数のモデルを並べる
1 つのプロバイダー向けの簡易設定です。1 つのプロバイダーの複数のモデルだけが必要な場合は、AI_MODEL にカンマ区切りで並べます。最初のモデルがデフォルトになります。
AI_PROVIDER=doubao
AI_MODEL=doubao-seed-1-8-251228,doubao-seed-1-6-flash-250828,doubao-seed-1-6-251015これは同じ内容の ai-models.json を短く書いたものです。複数のプロバイダーを使う場合や、独自の apiKeyEnv と baseUrlEnv を使う場合は、環境変数か設定ファイルを使ってください。
例
{
"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 | いいえ | ベース URL を入れる独自の環境変数名です |
キーと名前
- API キーと認証情報は環境変数で渡します。デフォルトでは
OPENAI_API_KEYなどの標準の変数名を使います。apiKeyEnvを使うと、独自の変数名を指定できます。 nameを使うと、同じプロバイダーに複数の設定を作れます。たとえば「OpenAI Production」と「OpenAI Staging」の両方でprovider: "openai"を使い、apiKeyEnvをそれぞれ別にできます。
モデルを選ぶ
図を描くとき、モデルは厳密な形式に従った長い draw.io XML を書きます。そのため、この作業にはとても高い性能のモデルが必要です。
推奨モデル:Claude Sonnet 4.5 または Opus 4.5。
Ollama もプロバイダーとして使えます。ただしこの作業では、DeepSeek R1 や Qwen3-235B のような高性能なモデルをローカルで動かす場合でないと、たいてい実用的ではありません。
| 目的 | 使うもの |
|---|---|
| 最高の体験 | 画像を読めるモデル(GPT-4o、Claude、Gemini)。画像から図を作る機能に使います |
| 低コスト | DeepSeek。競争力のある価格です |
| プライバシー | Ollama。完全にローカルで、オフラインで動きます。高性能なハードウェアが必要です |
| 柔軟性 | OpenRouter。1 つの API で多くのモデルを使えます |
Temperature(温度)を設定する
Temperature の設定は任意です。環境変数で設定します。
TEMPERATURE=0 # より決定論的な出力(ダイアグラムに推奨)重要: Temperature の設定に対応していないモデルでは、TEMPERATURE を設定しないでください。たとえば次のモデルです。
- GPT-5.1 およびその他の推論モデル
- 一部の特殊なモデル
設定しない場合、モデルはデフォルトの動作になります。
新しいプロバイダーを追加する
プロバイダーに関する情報は、すべて lib/providers.ts の 1 つのレコードにあります。
- 使用する AI SDK(
sdk) - サインインに使う資格情報(
credential) - 環境変数
<PREFIX>_API_KEYと<PREFIX>_BASE_URLのプレフィックス(envPrefix) - 公式 URL
- プロバイダー選択でのグループ
- 任意の注記
設定画面、接続テスト、チャットのルート、管理パネルは、すべてこのレコードを読みます。OpenAI 互換プロバイダーを追加する手順は次のとおりです。
-
lib/providers.tsにレコードを追加します。例:acme: { label: "Acme AI", sdk: "openai-compatible", credential: "apiKey", group: "aggregators", envPrefix: "ACME", defaultBaseUrl: "https://api.acme.example/v1", apiKeyUrl: "https://acme.example/keys", modelList: "openai", },ベース URL 欄の下にヒントを表示したいプロバイダーや、プロバイダー選択に注記を表示したいプロバイダーには、
baseUrlHintまたはnoteオブジェクトを追加します。4 つの UI 言語(en、zh、ja、zh-Hant)をすべて書きます。モデル一覧をオンラインで取得できないプロバイダーは、modelListの代わりに短いmodelsリストを持ちます。 -
env.exampleにACME_API_KEYとACME_BASE_URLを追加します。各レコードの変数がそこにあることを、ユニットテストが確認します。 -
docs/en、docs/cn、docs/jaのこのページに、それぞれセクションを追加します。 -
tests/unit/provider-matrix.test.tsの先頭にある 2 つのリスト(MATRIX_PROVIDERSとMATRIX_MODEL_IDS)に追加します。次にnpx vitest run tests/unit/provider-matrix.test.ts -uで動作のスナップショットを作り直します。新しく増える行はこのプロバイダーのものです。既存の行は変わってはいけません。 -
tests/unit/providers.test.tsにも追加します。このファイルには、プロバイダー選択のグループと、サーバーの動作を変えるプロバイダーの集合(自動検出、system メッセージが 1 つだけ)が書き出されています。 -
3 つの README のプロバイダー数と、このページの
AI_PROVIDERの選択肢一覧を更新します。