Canvas MCP 客户端
一个可定制的无限画布仪表板，支持集成模型上下文协议（MCP）服务器
特点/功能 • 快速入门 • 文档 • 做出贡献 • 许可证
______________________________________________________________________
🎯 什么是Canvas MCP客户端？
Canvas MCP 客户端是一个 开源、可自托管的仪表板应用程序 它围绕一个无限大、可缩放和可平移的画布构建。它提供了一个统一的界面，通过一个灵活的、基于小部件的系统与多个MCP（模型上下文协议）服务器进行交互。
为何选择Canvas MCP客户端？
- 🎨（颜料/绘画相关的表情符号，可意译为“绘画”或根据上下文具体描述） 无限画布利用无限缩放和平移功能，对您的工作空间进行空间布局
- 拼图碎片 模块化小部件使用12+个预建小部件或创建您自己的自定义组件
- 🛠️（工具/修理/手工工具） 无代码小部件构建器使用小部件构建器来创建您自己的小部件，无需编写代码
- 🤖 表情符号“🤖”通常被用来表示机器人或机器人的形象，它是一个带有圆形头部、机械特征的卡通风格机器人形象。在中文中，这个表情符号可以直接用其英文原样表示，或者根据语境解释为“机器人”或“机械人”。所以，翻译成中文可以是“机器人”或“机械人”，具体取决于上下文和使用场景。 MCP集成使用FastMCP库无缝连接到多个MCP服务器
- 🔌（电源插头/插座） 由人工智能驱动配置多个AI服务提供商（OpenAI、Anthropic、Ollama、Google）以增强功能
- 🎭 表情符号“🎭”通常代表“戏剧面具”或“表演面具”，在中文中可以翻译为“戏剧面具”或根据语境简化为“面具”。这个表情符号常用于表示戏剧、表演、神秘或伪装等含义。 模板系统保存并共享小部件和仪表板配置
- 🐳 表示“海豚”或“海豚的叫声”，在中文中可以直接用“海豚”来翻译这个表情符号。 轻松部署一键式Docker设置或手动安装
- 🔒（锁形符号，常用于表示安全、保密或锁定状态） 隐私优先所有数据均保存在您的基础设施上，无外部依赖
非常适合AI高级用户、开发者、内容创作者以及任何希望拥有可定制工作空间来管理AI工具和服务的人士。
🎥 快速演示
Click to watch the Canvas MCP Client demo video
✨ 特点/功能
核心功能
- 🎨 无限画布界面
- 平滑缩放和平移 - 网格吸附和对齐工具 - 持久的视口状态 - 响应式且优化的渲染
- 🧩 丰富的控件系统 (12+ 小部件)
- 📝 便签纸 - 快速记笔记和提醒 - ✅ 待办事项列表 - 带复选框的任务管理 - 💬 AI聊天 - 集成大型语言模型对话 - 🖼️ 图像显示 - 视觉内容展示 - 🃏 闪卡 - 学习与记忆 - 🎬 视频播放器 - 媒体播放 - 📊 看板 - 项目管理 - 📈 电子表格 - 数据表与组织 - 📄 Markdown 编辑器 - 格式化文档 - 🌐 网页预览 - 嵌入式网页内容 - 🌍 世界时钟 - 多时区显示 - ☁️ 天气小部件 - 实时天气信息
- 🔌 MCP 服务器管理
- 配置多个MCP服务器连接 - 支持stdio、HTTP和SSE传输协议 - 实时连接状态监控 - 导入/导出服务器配置
- 🤖 大型语言模型（LLM）配置
- 支持多家AI服务提供商（OpenAI、Anthropic、Ollama、Google） - 可配置的模型参数 - 安全凭证存储 - 自定义API端点
- 📦 模板系统
- 将小部件保存为可重用的模板 - 导出/导入仪表板配置 - 与社区分享模板 - 带预览功能的模板库
- 🎨 定制化
- 浅色和深色主题 - 小部件颜色和形状的自定义 - 灵活的布局选项 - 拖放式界面
- 💾 数据持久化
- 自动保存 - 本地 SQLite 存储（支持 PostgreSQL） - 会话恢复 - 备份和恢复功能
🚀 快速入门
先决条件
- Docker & Docker Compose（注：这里的“&”在中文语境下通常不直接翻译，保持原样以表示并列关系，所以翻译为“Docker 和 Docker Compose”） （推荐）或者
- Node.js 18及以上版本 并且 Python 3.10及以上版本 （手动设置）
选项1：Docker（推荐）
开始的最快方式：
# Clone the repository
git clone https://github.com/n00bvn/CanvasMCPClient.git
cd CanvasMCPClient
# Start the application
docker-compose up -d
# Access the application
open http://localhost:3031该应用程序将在以下网址提供：
- 前端http://localhost:3031（本地主机，端口3031）
- 后端APIhttp://localhost:8081 翻译为中文是：“本地主机上的8081端口”。不过，通常我们不会直接翻译这个URL，而是理解为“访问本地运行在8081端口上的服务或应用”。在中文语境中，我们可能会说：“访问本地8081端口的服务”或者“打开本地8081端口的应用”
- API文档http://localhost:8081/docs 翻译为中文是：“本地主机上的8081端口文档页面”。不过，通常我们不会直接翻译这样的URL地址，而是会说明其访问方式或功能，比如：“访问本地开发服务器上的文档页面，请打开浏览器并输入 http://localhost:8081/docs”
选项2：手动设置
Click to expand manual setup instructions
后端设置
# Navigate to backend directory
cd backend
# Create and activate virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Create data directory
mkdir -p data
# Set environment variables
export DATABASE_URL="sqlite:///./data/canvas_mcp.db"
export CORS_ORIGINS="http://localhost:3031,http://127.0.0.1:3031"
export SECRET_KEY="your-secret-key-here"
# Start the backend
uvicorn main:app --reload --host 0.0.0.0 --port 8081前端设置
# Navigate to frontend directory (in a new terminal)
cd frontend
# Install dependencies
npm install
# Set environment variables
export NEXT_PUBLIC_API_URL="http://localhost:8081"
# Start the frontend
npm run dev该应用程序将在 http://localhost:3031 上可用
第一步
- 配置MCP服务器 （可选）
- 点击侧边栏中的“MCP 服务器”按钮 - 添加您的MCP服务器配置 - 测试连接
- 设置人工智能服务提供商 （可选）
- 点击侧边栏中的“AI 配置” - 为您的首选提供商（OpenAI、Anthropic 等）添加 API 密钥 - 配置默认模型
- 创建您的第一个仪表板
- 点击左侧面板中的“新建仪表板” - 从工具栏中添加小部件 - 拖动、调整大小，并根据您的喜好进行自定义
- 探索功能
- 尝试不同的小部件类型 - 保存模板以供重用 - 导出并共享您的仪表板
📚 文档
🏗️ 建筑学
Canvas MCP 客户端采用现代且经过验证的技术构建：
前端
- 框架Next.js 15 配合 React 19
- 语言TypeScript
- 造型Tailwind CSS
- 状态管理Redux Toolkit
- 用户界面组件使用Heroicons的自定义组件
- 画布渲染优化性能的HTML5 Canvas
后端
- 框架FastAPI（Python 3.10+）
- 数据库SQLite（开发用）/ PostgreSQL（生产就绪）
- ORM（对象关系映射）使用 Alembic 进行迁移的 SQLAlchemy
- MCP集成FastMCP 库
- API 文档自动生成的OpenAPI/Swagger文档
基础设施
- 集装箱化Docker & Docker Compose
- 网络服务器Uvicorn（开发环境）/ Gunicorn（生产环境）
- 反向代理Nginx（可选，用于生产环境）
🤝 贡献
我们欢迎社区成员的贡献！无论您是修复漏洞、添加功能、改进文档，还是创建新控件，您的帮助都将受到赞赏。
贡献方式：
- 🐛 报告错误和问题
- 💡 提出新功能或小部件的建议
- 📝 改善文档
- 🔧 提交拉取请求
- 🎨 分享小部件和仪表板模板
- ⭐ 给仓库点个星，并分享出去
开始吧：
在提交拉取请求（PR）之前：
# Auto-fix formatting issues
./lint-fix.sh
# Check all linting rules
./lint.sh见 代码检查设置 以获取详细信息。
请阅读我们的 行为准则 在贡献之前。
🛡️ 安全
安全是首要任务。如果您发现安全漏洞，请按照我们的 安全政策 负责任地报告它。
安全特性：
- 加密凭证存储
- 本地优先数据架构
- 无遥测或外部数据传输
- 确保MCP服务器连接安全
- 定期更新依赖项
🗺️ 路线图
- \[ \] 支持oAuth的远程MCP服务器
- \[ \] 与OpenAI应用集成
- \[ \] 为小部件添加自定义提示
- \[ \] 支持图像和视频生成AI模型
- \[ \] 添加更多内置小部件，如日历、音乐播放器、图表等。
- \[ \] 添加更多实用工具，如文本、形状等。
- \[ \] 为小部件添加自定义数据源（webhook、REST API 等）
- \[ \] 画布仪表板历史记录及撤销/重做功能
- \[ \] 增强小部件构建器以支持更高级的小部件
- \[ \] 支持网页抓取和深入研究能力
- \[ \] 移动端响应式设计改进
- \[ \] 增强的人工智能集成能力
- \[ \] 对大型仪表板进行性能优化
- \[ \] 进口/出口改进
- \[ \] 实时协作功能
- \[ \] 可访问性增强（符合WCAG 2.1标准）
看看 悬而未决的问题 以获取完整功能提案列表和已知问题列表。
📊 项目状态
Canvas MCP 客户端正在积极维护中，并且 稳定发展我们遵循语义化版本控制，并维护一个 更改日志（或更新日志） 适用于所有版本。
当前版本1.0.0 状态稳定 - 准备好进行自托管 最后更新时间2025年10月
🙏 致谢
- 构建于 FastMCP 用于MCP服务器集成
- 受Miro、Figma和Obsidian Canvas等无限画布工具的启发
- 图标由 Heroicons（英雄图标）
- 社区贡献者和测试人员
📄 许可证
这个项目遵循MIT许可证授权——详见 许可证 文件中有详细信息。
______________________________________________________________________
💬 社区与支持
- 问题：
- 讨论：
- 文档： 项目维基
- Discord社区: Discord社区
- 关注我们： @VisonaHQ（维索纳总部） | @thaw_tran（这个用户名或标签直接保留原样，因为它是特定于某个平台或用户的标识，没有直接的中文翻译）
⭐ 星辰历史
如果您觉得Canvas MCP客户端很有用，请考虑给它点个星吧！ ⭐
______________________________________________________________________
由充满爱意的团队倾心打造 VISONA（注：此词在中文中无直接对应含义，可能是特定品牌、项目或概念的名称，根据音译可暂译为“维索纳”，但具体翻译需依据上下文或品牌官方命名） 以及开源社区