Next AI Draw.io 如何从源码安装并配置 AI 提供商跑通本地开发服务

Next AI Draw.io 如何从源码安装并配置 AI 提供商跑通本地开发服务

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io

如果你的目标是把 next-ai-draw-io 从源码跑起来，并且让 AI 真正能生成 draw.io 图表，需要完成一条链路：克隆仓库 → 安装依赖 → 复制.env.example为.env.local并填入某个 AI 提供商的 API 密钥与模型名 →npm run dev启动开发服务 → 在浏览器中验证模型可用、图表能生成。本文按这条链路给出每一步的具体命令、配置项和验证方式，适用对象是本地开发环境（Docker 与线上部署方式见 docs/en/docker.md 和 docs/en/cloudflare-deploy.md，不在本文范围内）。

一、克隆仓库并安装依赖

按 README.md 的 Installation 部分，在项目目录下执行：

git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io npm install cp env.example .env.local

cp env.example .env.local会生成 Next.js 本地开发读取的环境变量文件，后续所有提供商配置都写在这个文件里。env.example 中每一类提供商的配置项都有注释说明，改动前先对照注释能避免填错变量名。

二、在 .env.local 中配置 AI 提供商

env.example默认值是 AWS Bedrock（AI_PROVIDER=bedrock），如果你用其他提供商，需要改AI_PROVIDER、AI_MODEL并填对应的密钥。各提供商的完整配置项和自定义 endpoint 说明见 docs/en/ai-providers.md，下面给出几个常用主路径的最小配置。

OpenAI：

OPENAI_API_KEY=your_api_key AI_MODEL=gpt-4o

豆包（火山引擎 ARK）：

DOUBAO_API_KEY=your_api_key AI_MODEL=doubao-seed-1-8-251215

本地 Ollama：

AI_PROVIDER=ollama AI_MODEL=llama3.2 # 可选：指向本地实例 OLLAMA_BASE_URL=http://localhost:11434

your_api_key是占位符，替换为你在对应平台申请的真实密钥；AI_MODEL填文档示例中的模型名，也可以换成你账号下可用的同提供商模型。

关于AI_PROVIDER的填写规则，docs/en/ai-providers.md 的 Auto-Detection 一节说明：

• 只配置一个提供商的 API 密钥时，系统会自动检测并使用该提供商，可以不设置AI_PROVIDER；
• 配置了多个API 密钥时，必须显式设置，可选值：google、openai、anthropic、aihubmix、deepseek、siliconflow、doubao、azure、bedrock、openrouter、ollama、gateway、sglang、modelscope、minimax、glm、qwen、kimi、qiniu、mimo等。

如果只改AI_MODEL而密钥、AI_PROVIDER仍是默认值，服务会用 Bedrock 凭证去请求你的模型，验证时就会失败——这是跑不通时最常见的配置错位。

可选配置：TEMPERATURE=0可降低输出随机性（文档推荐用于图表生成）；但对 GPT-5.1 等推理类模型，文档明确要求不要设置TEMPERATURE，保持未设置即可。

模型能力要求

docs/en/ai-providers.md 指出该任务需要较强的模型能力（生成长文本且严格遵循 draw.io XML 格式），推荐 Claude Sonnet 4.5 / Opus 4.5；README.md 还列出 GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 作为推荐模型。使用 Ollama 时，除非本地跑的是 DeepSeek R1、Qwen3-235B 这类高能力模型，否则文档认为一般不具备实用性。选弱模型时常见现象见文末排查部分。

三、启动本地开发服务

npm run dev

该脚本实际执行next dev --turbopack --port 6002（见 package.json），所以本地开发地址是http://localhost:6002，README 第 3 步也是让你在这个地址打开应用。

四、验证配置是否生效

有两条验证路径，建议先用接口验证凭证，再在页面上验证完整生成链路。

1. 用 validate-model 接口验证凭证

应用内置POST /api/validate-model接口（app/api/validate-model/route.ts），它会对指定提供商发起一次最小测试请求（prompt 为 "Say 'OK'"），返回 JSON：

{ "valid": true, "responseTime": 320 }

以上为文档代码中的成功响应结构，responseTime为实测毫秒数，不是固定值。验证失败时同样返回 HTTP 200，但valid为false，并带错误信息，接口将底层错误映射为：

可以用下面的命令直接验证（provider、apiKey、modelId 换成你.env.local里配置的值）：

curl -X POST http://localhost:6002/api/validate-model \ -H "Content-Type: application/json" \ -d '{"provider":"openai","apiKey":"你的API_KEY","baseUrl":"https://api.openai.com/v1","modelId":"gpt-4o"}'

AWS Bedrock 的provider需传bedrock，并且不传apiKey，而是传awsAccessKeyId、awsSecretAccessKey、awsRegion三个字段（缺少任一会返回 400 提示 AWS credentials are required）。

2. 在应用内测试并实际生成图表

开发服务启动后，应用内的模型配置弹窗在 API 密钥输入框旁带有 Test 按钮（components/model-config-dialog.tsx），点击即调用同一个/api/validate-model接口，无需手动拼 curl。

接口验证通过后，在 http://localhost:6002 的聊天面板输入一条生成指令（README Examples 一节的示例 prompt，如 "Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion"），能流式返回并渲染出 draw.io 图表，即说明本地开发服务与 AI 提供商链路完整跑通。

五、排查与限制

• 自托管模型只输出思考过程、不出图：docs/en/FAQ.md 第 3 条给出的可能原因：模型太小（建议 32B 参数以上）、模型服务未开启 tool calling。以 vLLM 为例需要加参数开启工具调用：

  python -m vllm.entrypoints.openai.api_server \ --model Qwen/Qwen3-32B \ --enable-auto-tool-choice \ --tool-call-parser hermes

• 上传图片后提示 "No Image Provided"：该模型不支持视觉（如 Kimi K2、DeepSeek、Qwen 纯文本模型），需换用支持 vision 的模型（如 GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro），或使用名称中带有vision/vl的模型。

• 导出 PDF 无反应：内嵌 draw.io 不支持直接导出 PDF，依赖外部转换服务且在 iframe 中不可用，文档给出的方案是先导出 PNG 再打印为 PDF。

• 多模型场景：如果只是想让多个同提供商模型出现在选择器里，可用逗号分隔的AI_MODEL（第一个为默认）；多个提供商或自定义apiKeyEnv/baseUrlEnv时使用AI_MODELS_CONFIG环境变量（JSON 字符串）或项目根目录的ai-models.json文件，格式见 docs/en/ai-providers.md 的 Server-Side Multi-Model Configuration 一节。

• 内网环境注意：NEXT_PUBLIC_*是构建期变量，默认会访问https://embed.diagrams.net加载 draw.io 编辑器；内网被墙时需自建 draw.io 实例并在构建时传入NEXT_PUBLIC_DRAWIO_BASE_URL，详见 docs/en/offline-deployment.md。

跑通后如需调整服务器侧模型与功能开关，可设置ADMIN_PASSWORD环境变量后访问/admin管理面板（说明见 docs/en/admin-panel.md）；这是本地开发之外的下一步，不影响本文链路本身。

【免费下载链接】next-ai-draw-ioA next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.项目地址: https://gitcode.com/GitHub_Trending/ne/next-ai-draw-io