无限画布 · 多智能体协作推理链
AgentCanvas 是一个可视化的多智能体协作平台。你可以在无限画布上创建对话节点，通过树形结构构建推理链，每个节点代表一轮完整的问答。支持文件上传、节点隐藏、自动分支、多会话管理，所有数据自动保存在浏览器本地。
- 🎨 无限画布 — 基于 React Flow，流畅拖拽、缩放（支持 0.05 极缩）、平移
- 🌲 树形对话节点 — 每个节点包含问题与回复，沿父链向上追溯上下文
- 🔗 四方向连线 — 上下左右任意连接，精准控制连接点，末端带箭头，默认深色加粗
- 💫 流光线动画 — 发送消息时，从当前节点到根节点呈现金色脉冲，路径一目了然
- 🤖 多 Agent 支持 — 可配置 DeepSeek、Qwen、OpenAI 等模型 API
- 🧠 AI 自动节点 — 当回复需要其他 Agent 协助时，自动创建高亮节点（可开关）
- 📎 文件上传 — 支持多种文本格式，附件标签持久显示，内容前置以利用缓存
- 👻 节点隐藏 — 隐藏节点自身不参与上下文，但不影响子节点追溯
- 📁 多会话管理 — 新建、恢复、删除、双击重命名会话，自动持久化至 localStorage
- 📏 可调宽度 — 拖拽节点边缘自由调整宽度（200–1000px）
- ♻️ 循环检测 — 自动防止父子连线形成循环引用
- 📋 内容复制 — 右键一键复制节点的问题与回复到剪贴板
- 🎯 Markdown 完善渲染 — 支持表格、代码块、列表等完整 GFM 语法
| 层级 | 技术 |
|---|---|
| 前端 | React 18 + React Flow 11 + Zustand + Tailwind CSS + Vite |
| 后端 | Node.js + Express + OpenAI SDK (兼容多模型) |
| 数据持久化 | Zustand persist + localStorage |
- Node.js >= 18
- npm 或 yarn
cd ./backend
npm install
cd ./frontend
npm install
./script_run.sh
cd ./backend
npm.cmd install
cd ./frontend
npm.cmd install
Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd './frontend'; npm.cmd run dev"; Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd './backend'; npm.cmd start"
浏览器中输入：http://localhost:5173/
AgentCanvas_productSpecifications.md
该项目默认使用DeepSeek，需要在backend中添加.env文件，文件内保存API的密钥，文件的格式如下： DEEPSEEK_API_KEY=[Your API Key]
touch ./backend/.env
echo "DEEPSEEK_API_KEY=[Your API Key]" >> ./backend/.env
本仓库代码采用 个人非商业使用许可证。允许个人学习、研究、非商业项目免费使用。商业使用必须购买授权，请联系 [iamwanglihaha@gmail.com]。