mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-09-01 17:10:24 +08:00

Files

Dayuan Jiang 449e4c4e26 feat: add file-based admin settings panel at /admin (#866 )

* feat: add file-based admin settings panel at /admin

Settings saved in the panel are written to data/settings.json and
overlaid onto process.env, taking precedence over environment
variables and applying immediately without restart. Enable by setting
ADMIN_PASSWORD; on serverless platforms without persistent disk the
panel degrades to read-only.

* polish: admin panel UI improvements

- Provider logos in credential rows (shared ProviderLogo component,
  extracted from model-config-dialog)
- Scroll-spy active state in the sidebar nav
- Green success state in the save bar that clears after a few seconds
- Wider content column (max-w-6xl) for less wasted space on desktop

* polish: admin panel section toggles and reorder

- Move Quota & Rate Limits to the end of the settings page
- Add enable switches to Observability and Quota sections; default off
  with fields grayed out, auto-on when any field is already configured

* polish: make section enable switch more visible

Wrap the switch in a labeled pill ('Enabled'/'Disabled') with border
and background so the off state is clearly visible.

* refactor: derive admin registry from PROVIDER_INFO, simplify page state

- Provider options, labels, and base-URL placeholders now come from
  PROVIDER_INFO instead of hand-copied lists (fixes SiliconFlow .com/.cn
  placeholder drift; panel names now match the model-config dialog)
- Replace free-text subgroup strings + SUBGROUP_PROVIDERS reverse map
  with a typed provider field on SettingDef
- Precompute SETTINGS_BY_GROUP and PROVIDER_SUBGROUPS at module level
- Merge justSaved into saveMessage, drop unused mainRef, hoist
  fetchSettings out of the component, dedupe savedText logic
- Serialize from SETTINGS_REGISTRY directly; json validators in a map
  instead of a hardcoded key check
- Make allowPrivateUrls a function so ALLOW_PRIVATE_URLS edits in the
  admin panel apply without restart

* feat: graphical model management in admin panel

Replace the provider credential fields and raw AI_MODELS_CONFIG JSON
textarea with a Models section mirroring the in-app model settings UI:
provider instance list with logos, credential fields per provider type,
model add/remove with suggestions, per-model connectivity test, and a
default-provider star.

On save the server derives everything the runtime needs into
settings.json: credential env vars (with _2 suffixes for multiple
instances of one provider), AI_MODELS_CONFIG, and AI_PROVIDER/AI_MODEL
for the default. Secrets round-trip as masked markers and are never
sent back to the browser. The general settings registry now only
covers non-provider settings (generation, access, features,
observability, quota).

* fix: allow testing unsaved providers in admin panel

The test button previously looked up credentials by providerId in the
saved settings, so testing a newly added (unsaved) provider failed with
'Unknown provider or model'. The test endpoint now accepts the client's
current provider state; newly typed secrets are used as-is and masked
markers are resolved against the stored values, so testing works both
before and after saving.

* fix: merge env AI_MODELS_CONFIG with admin panel providers

Previously, saving in the admin panel wrote a complete AI_MODELS_CONFIG
into settings.json, which (by overlay precedence) replaced any config
from .env or ai-models.json — admins lost their env-configured models.

The panel no longer writes AI_MODELS_CONFIG. Instead its providers are
merged with the env baseline at read time in loadRawServerModelsConfig,
and panel credentials go to ADMIN_-prefixed env vars wired up via
apiKeyEnv/baseUrlEnv so they never shadow standard vars. Env-based
providers now appear read-only in the panel, name clashes are rejected,
and a panel default overrides the env default. data/ is now gitignored.

* fix: block global-credential providers already managed via env

Bedrock, Vertex AI, and Ollama credentials live in fixed env vars with
no apiKeyEnv redirection, so a panel instance of one of these would
silently override the credentials that env-configured models rely on.
The API now rejects saving such a provider when the env config already
uses that type, and the Add Provider dropdown disables it with a
'managed via env' note.

* fix: address admin panel review findings

- Security: test-model no longer resolves a stored secret when the
  request's baseUrl/provider differs from the stored entry, closing a
  path where a tampered baseUrl could exfiltrate a saved key
- Save failures are now visible: the save bar shows the error in red
  (was masked by the persistent 'Unsaved changes' text), and per-field
  validation errors from the settings API are surfaced under each field
- The Observability/Quota enable switch is now real: toggling off stages
  deletion of the group's saved values, and the toggle no longer snaps
  back to Enabled after saving
- Env provider's default star is hidden when a panel provider is the
  active default (no more double star)
- Clearing a credential field reverts to the stored value instead of
  silently deleting it; an explicit X button removes a stored secret
- Form inputs are disabled during an in-flight save

* refactor(admin): split 1549-line admin page into focused modules

Extract admin-shared.ts (types + fetch helper), setting-field.tsx
(registry-driven fields), and models-section.tsx (provider/model
manager) from page.tsx. Pure mechanical move, no behavior change.

* feat(admin): share credential fields with user dialog and localize panel

Extract ProviderCredentialsFields (display name + per-provider
credential inputs) used by both the user ModelConfigDialog and the
admin Models panel; secret input passed via renderSecret (plaintext
vs masked), test button via footer slot. Add full i18n for the admin
panel across en/zh/ja/zh-Hant, reusing modelConfig.* for shared parts.

* fix(admin): address Copilot review findings

- Reflect built-in defaults for boolean settings (ALLOW_PRIVATE_URLS
  defaults on) and allow clearing a saved boolean back to default,
  so the SSRF toggle matches actual runtime behavior.
- Harden JSON loading: filter settings values to strings only, and
  schema-validate stored ADMIN_PROVIDERS entries, dropping malformed
  ones instead of letting them reach runtime code.
- Set beforeunload returnValue so the unsaved-changes prompt shows in
  all browsers; reject non-finite numbers in settings validation.
- Fix README/CN/JA docs that claimed the panel auto-generates
  AI_MODELS_CONFIG (providers are merged at read time, not written).
- Add unit tests for corrupted-file value filtering and provider
  schema validation.

* docs: move admin panel details to dedicated docs/{en,cn,ja}/admin-panel.md

The READMEs now carry a short blurb + link, matching the existing
per-topic docs (docker.md, ai-providers.md, ...). Removes the ~22-line
inline section and the duplicated data/settings.json mentions.

* fix(admin): address follow-up Copilot findings on the prior fixes

- loadAdminProviders now validates against a stored-shape schema where
  secrets are plain strings, so a hand-edited ADMIN_PROVIDERS holding an
  {isSet} marker is dropped instead of later crashing maskSecret().
- loadSettings guards against array values (typeof [] === 'object'),
  which would otherwise overlay numeric keys onto process.env.
- Admin SecretInput uses the bare id so the shared component's
  <Label htmlFor> stays associated (only one ProviderDetail mounts).
- Add tests: marker-secret rejection, array-values guard, bedrock
  multi-secret round-trip.

2026-06-15 00:40:35 +09:00

10 KiB

Raw Blame History

Next AI Draw.io

AI驱动的图表创建工具 - 对话、绘制、可视化

English | 中文 | 日本語

一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。

注：感谢字节跳动豆包的赞助支持，本项目的 Demo 现已接入强大的 glm-4.7 模型！

https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979

示例

以下是一些示例提示词及其生成的图表：

动画Transformer连接器 Prompt: Give me a animated connector diagram of transformer's architecture.
RAG技术图 Prompt: Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion	React和AWS认证流程 Prompt: Generate authentication process using React with AWS. Use Serverless architecture.
开放式创新 Prompt: Create visualization of Henry Chesbrough's Open Innovation model.	猫咪素描 Prompt: Draw a cute cat for me.

功能特性

LLM驱动的图表创建：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
基于图像的图表复制：上传现有图表或图像，让AI自动复制和增强
PDF和文本文件上传：上传PDF文档和文本文件，提取内容并从现有文档生成图表
AI推理过程显示：查看支持模型的AI思考过程（OpenAI o1/o3、Gemini、Claude等）
图表历史记录：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
交互式聊天界面：与AI实时对话来完善您的图表
云架构图支持：专门支持生成云架构图（AWS、GCP、Azure）
动画连接器：在图表元素之间创建动态动画连接器，实现更好的可视化效果

MCP服务器

通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Claude Code CLI

claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

然后让Claude创建图表：

"创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"

图表会实时显示在浏览器中！

详情请参阅MCP服务器README，了解VS Code、Cursor等客户端配置。

快速开始

在线试用

无需安装！直接在我们的演示站点试用：

使用自己的 API Key：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。

桌面应用

从 Releases 页面下载适用于您平台的原生桌面应用：

支持的平台：Windows、macOS、Linux。

使用Docker运行

查看 Docker 指南

安装

克隆仓库：

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

详细设置说明请参阅提供商配置指南。

运行开发服务器：

npm run dev

在浏览器中打开 http://localhost:6002 查看应用。

部署

部署到腾讯云EdgeOne Pages

您可以通过腾讯云EdgeOne Pages一键部署。

直接点击此按钮一键部署：

查看腾讯云EdgeOne Pages文档了解更多详情。

同时，通过腾讯云EdgeOne Pages部署，也会获得每日免费的DeepSeek模型额度。

部署到Vercel

部署Next.js应用最简单的方式是使用Next.js创建者提供的Vercel平台。请确保在Vercel控制台中设置环境变量，就像您在本地 .env.local 文件中所做的那样。

查看Next.js部署文档了解更多详情。

部署到Cloudflare Workers

查看 Cloudflare 部署指南

多提供商支持

字节跳动豆包
AWS Bedrock（默认）
OpenAI
Anthropic
Google AI
Google Vertex AI
Azure OpenAI
Ollama
OpenRouter
DeepSeek
SiliconFlow
ModelScope
SGLang
Vercel AI Gateway

除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。

📖 详细的提供商配置指南 - 查看各提供商的设置说明。

服务端多模型配置

管理员可以配置多个服务端模型，让所有用户无需提供个人 API Key 即可使用。通过 AI_MODELS_CONFIG 环境变量（JSON 字符串）或 ai-models.json 文件配置。

模型要求：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。

注意：claude 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。

管理面板

设置 ADMIN_PASSWORD 环境变量并访问 /admin，即可在 Web 面板中管理服务端设置（模型、访问码、功能开关、可观测性、配额），无需手动编辑 .env。

📖 管理面板指南 — 启用方法、优先级规则和注意事项。

工作原理

本应用使用以下技术：

Next.js：用于前端框架和路由
Vercel AI SDK（ai + @ai-sdk/*）：用于流式AI响应和多提供商支持
react-drawio：用于图表表示和操作

图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。

支持与联系

特别感谢字节跳动豆包赞助演示站点的 API Token 使用！ 注册火山引擎 ARK 平台即可获得50万免费Token！

如果您觉得这个项目有用，请考虑赞助来帮助我托管在线演示站点！

如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：

邮箱：me[at]jiang.jp

常见问题

请参阅 FAQ 了解常见问题和解决方案。

动画Transformer连接器 Prompt: Give me a animated connector diagram of transformer's architecture.
RAG技术图 Prompt: Generate a RAG architecture diagram for chat application. Use connected diagram for data ingestion	React和AWS认证流程 Prompt: Generate authentication process using React with AWS. Use Serverless architecture.
开放式创新 Prompt: Create visualization of Henry Chesbrough's Open Innovation model.	猫咪素描 Prompt: Draw a cute cat for me.

10 KiB

Raw Blame History

Next AI Draw.io

目录

示例

功能特性

MCP服务器

Claude Code CLI

快速开始

在线试用

桌面应用

使用Docker运行

安装

部署

部署到腾讯云EdgeOne Pages

部署到Vercel

部署到Cloudflare Workers

多提供商支持

服务端多模型配置

管理面板

工作原理

支持与联系

常见问题

Star历史

10 KiB Raw Blame History Unescape Escape

Next AI Draw.io

目录

示例

功能特性

MCP服务器

Claude Code CLI

快速开始

在线试用

桌面应用

使用Docker运行

安装

部署

部署到腾讯云EdgeOne Pages

部署到Vercel

部署到Cloudflare Workers

多提供商支持

服务端多模型配置

管理面板

工作原理

支持与联系

常见问题

Star历史

10 KiB

Raw Blame History