AI导哈

无限画布仪表盘

Canvas MCP Client 是一个开源、可自托管的无限画布仪表盘应用，支持模块化小部件和MCP服务器集成，适用于AI工具管理和自定义工作空间。

  • by n00bvn
  • TypeScript
  • 本地部署
  • 78 星标
  • 更新于
在 GitHub 查看 n00bvn/CanvasMCPClient

使用说明

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 上可用

第一步

  1. 配置MCP服务器 （可选）

    • 点击侧边栏中的“MCP 服务器”按钮
    • 添加您的MCP服务器配置
    • 测试连接

  2. 设置人工智能服务提供商 （可选）

    • 点击侧边栏中的“AI 配置”
    • 为您的首选提供商（OpenAI、Anthropic 等）添加 API 密钥
    • 配置默认模型

  3. 创建您的第一个仪表板

    • 点击左侧面板中的“新建仪表板”
    • 从工具栏中添加小部件
    • 拖动、调整大小，并根据您的喜好进行自定义

  4. 探索功能

    • 尝试不同的小部件类型
    • 保存模板以供重用
    • 导出并共享您的仪表板

📚 文档

🏗️ 建筑学

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（可选，用于生产环境）

🤝 贡献

我们欢迎社区成员的贡献！无论您是修复漏洞、添加功能、改进文档，还是创建新控件，您的帮助都将受到赞赏。

贡献方式：

  • 🐛 报告错误和问题
  • 💡 提出新功能或小部件的建议
  • 📝 改善文档
  • 🔧 提交拉取请求
  • 🎨 分享小部件和仪表板模板
  • ⭐ 给仓库点个星，并分享出去

开始吧：

  1. 阅读我们的 贡献指南
  2. 办理退房/结账 悬而未决的问题
  3. 加入讨论 GitHub 讨论区

在提交拉取请求（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许可证授权——详见 许可证 文件中有详细信息。

💬 社区与支持

⭐ 星辰历史

如果您觉得Canvas MCP客户端很有用，请考虑给它点个星吧！ ⭐

由充满爱意的团队倾心打造 VISONA（注：此词在中文中无直接对应含义，可能是特定品牌、项目或概念的名称，根据音译可暂译为“维索纳”，但具体翻译需依据上下文或品牌官方命名） 以及开源社区

⬆ 返回顶部

相关 MCP