星战科技xingzhan.cloud
返回市场
画布MCP客户端

画布MCP客户端

作者：n00bvn54 星标更新：2025-11-16
安装使用来源：spider==github.com

项目介绍

Canvas MCP 客户端

<div align="center">

Canvas MCP 客户端 LicensePythonNodeFastAPINext.jsFastMCP

一个可定制的无限画布仪表板，支持集成模型上下文协议（MCP）服务器

特性 • 快速开始 • 文档 • 贡献 • 许可证

</div>

🎯 什么是 Canvas MCP 客户端？

Canvas MCP 客户端是一个围绕无限、可缩放、可平移画布构建的开源、自托管仪表板应用程序。它提供了一个统一的界面，通过灵活的小部件系统与多个 MCP（模型上下文协议）服务器进行交互。

为什么选择 Canvas MCP 客户端？

  • 🎨 无限画布：利用无限缩放和平移能力在空间上组织您的工作区
  • 🧩 模块化小部件：使用 12+ 预建小部件或创建您自己的自定义组件
  • 🛠️ 无代码小部件生成器：使用小部件生成器无需编码即可创建自己的小部件
  • 🤖 MCP 集成：使用 FastMCP 库无缝连接到多个 MCP 服务器
  • 🔌 AI 功能：配置多个 AI 提供商（OpenAI、Anthropic、Ollama、Google）以增强功能
  • 🎭 模板系统：保存和分享小部件和仪表板配置
  • 🐳 简单部署：单命令 Docker 设置或手动安装
  • 🔒 隐私优先：所有数据都保留在您的基础设施中，没有外部依赖

非常适合 AI 用户、开发者、内容创作者以及任何希望拥有一个可定制的工作区来管理 AI 工具和服务的人。

🎥 快速演示

<div align="center"> <a href="https://www.youtube.com/watch?v=SwHP6ae9v_w"> <img src="https://img.youtube.com/vi/SwHP6ae9v_w/maxresdefault.jpg" alt="Canvas MCP 客户端演示" width="600"> </a> <p><i>点击观看 Canvas MCP 客户端演示视频</i></p> </div>

✨ 特性

核心功能

  • 🎨 无限画布界面

    • 平滑缩放和平移
    • 网格对齐工具
    • 持久视图状态
    • 响应式和优化渲染

  • 🧩 丰富的插件系统（12+ 插件）

    • 📝 备忘录 - 快速笔记和提醒
    • ✅ 待办事项列表 - 带复选框的任务管理
    • 💬 AI 聊天 - 集成大型语言模型对话
    • 🖼️ 图像显示 - 视觉内容展示
    • 🃏 闪卡 - 学习和记忆
    • 🎬 视频播放器 - 媒体播放
    • 📊 看板 - 项目管理
    • 📈 电子表格 - 数据表和组织
    • 📄 Markdown 编辑器 - 格式化文档
    • 🌐 网页预览 - 嵌入式网页内容
    • 🌍 世界时钟 - 多个时区显示
    • ☁️ 天气插件 - 实时天气信息

  • 🔌 MCP 服务器管理

    • 配置多个 MCP 服务器连接
    • 支持 stdio、HTTP 和 SSE 传输协议
    • 实时连接状态监控
    • 导入/导出服务器配置

  • 🤖 AI LLM 配置

    • 多个 AI 提供商支持（OpenAI、Anthropic、Ollama、Google）
    • 可配置模型参数
    • 安全凭证存储
    • 自定义 API 端点

  • 📦 模板系统

    • 将插件保存为可重用模板
    • 导出/导入仪表板配置
    • 与社区共享模板
    • 带预览的模板库

  • 🎨 自定义

    • 浅色和深色主题
    • 插件颜色和形状自定义
    • 灵活布局选项
    • 拖放界面

  • 💾 数据持久性

    • 自动保存
    • 本地 SQLite 存储（PostgreSQL 准备就绪）
    • 会话恢复
    • 备份和还原功能

🚀 快速开始

先决条件

  • Docker & Docker Compose（推荐） 或
  • Node.js 18+ 和 Python 3.10+（手动设置）

方案 1：Docker（推荐）

最快的方式开始：

# 克隆仓库
git clone https://github.com/n00bvn/CanvasMCPClient.git
cd CanvasMCPClient

# 启动应用
docker-compose up -d

# 访问应用
open http://localhost:3031

应用将在以下地址可用：

方案 2：手动设置

<details> <summary><b>点击展开手动设置说明</b></summary>

后端设置

# 导航到后端目录
cd backend

# 创建并激活虚拟环境
python -m venv venv
source venv/bin/activate  # 在 Windows 上：venv\Scripts\activate

# 安装依赖
pip install -r requirements.txt

# 创建数据目录
mkdir -p data

# 设置环境变量
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"

# 启动后端
uvicorn main:app --reload --host 0.0.0.0 --port 8081

前端设置

# 导航到前端目录（在新终端中）
cd frontend

# 安装依赖
npm install

# 设置环境变量
export NEXT_PUBLIC_API_URL="http://localhost:8081"

# 启动前端
npm run dev

应用将在 http://localhost:3031 可用

</details>

第一步

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

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

  2. 设置 AI 提供商（可选）

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

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

    • 点击左侧面板中的“新建仪表板”
    • 从工具栏添加插件
    • 拖动、调整大小并按喜好自定义

  4. 探索功能

    • 尝试不同类型的插件
    • 保存模板以便重复使用
    • 导出并分享您的仪表板

📚 文档

🏗️ 架构

Canvas MCP 客户端使用现代且经过验证的技术构建：

前端

  • 框架：Next.js 15 结合 React 19
  • 语言：TypeScript
  • 样式：Tailwind CSS
  • 状态管理：Redux Toolkit
  • UI 组件：带有 Heroicons 的自定义组件
  • 画布渲染：HTML5 画布，性能优化

后端

  • 框架：FastAPI（Python 3.10+）
  • 数据库：SQLite（开发）/ PostgreSQL（生产准备就绪）
  • ORM：SQLAlchemy 结合 Alembic 迁移
  • MCP 集成：FastMCP 库
  • API 文档：自动生成的 OpenAPI/Swagger 文档

基础设施

  • 容器化：Docker & Docker Compose
  • Web 服务器：Uvicorn（开发）/ Gunicorn（生产）
  • 反向代理：Nginx（可选，用于生产）

🤝 贡献

我们欢迎来自社区的贡献！无论您是修复错误、添加功能、改进文档还是创建新的插件，您的帮助都是宝贵的。

贡献方式：

  • 🐛 报告错误和问题
  • 💡 建议新功能或插件
  • 📝 改进文档
  • 🔧 提交拉取请求
  • 🎨 分享插件和仪表板模板
  • ⭐ 关注仓库并传播消息

开始之前：

  1. 阅读我们的 贡献指南
  2. 查看 开放问题
  3. 加入 GitHub 讨论 的讨论

提交 PR 之前：

# 自动修复格式问题
./lint-fix.sh

# 检查所有格式规则
./lint.sh

参见 Linting Setup 获取详细信息。

在贡献之前，请阅读我们的 行为准则。

🛡️ 安全

安全是我们最优先考虑的问题。如果您发现安全漏洞，请按照我们的 安全策略 负责任地报告。

安全功能：

  • 加密凭证存储
  • 本地优先的数据架构
  • 无遥测或外部数据传输
  • 安全的 MCP 服务器连接
  • 定期更新依赖项

🗺️ 发展路线图

  • 支持 OAuth 的远程 MCP 服务器
  • 集成 OpenAI 应用
  • 将自定义提示附加到插件
  • 支持图像和视频生成 AI 模型
  • 添加更多内置插件如日历、音乐播放器、图表等
  • 添加更多实用工具如文本、形状等
  • 添加插件的自定义数据源（webhook、REST API 等）
  • 画布仪表板历史记录和撤销/重做
  • 增强小部件生成器以支持更高级的小部件
  • 支持网络抓取和深度研究能力
  • 移动响应设计改进
  • 增强 AI 集成功能
  • 对大型仪表板进行性能优化
  • 导入/导出改进
  • 实时协作功能
  • 可访问性增强（符合 WCAG 2.1 标准）

查看 开放问题 获取完整的提议功能和已知问题列表。

📊 项目状态

Canvas MCP 客户端正在积极维护，并处于稳定开发阶段。我们遵循语义版本控制，并维护一个 变更日志 来记录所有发布。

当前版本：1.0.0 状态：稳定 - 已准备好自托管 最后更新：2025年10月

🙏 致谢

  • 使用 FastMCP 进行 MCP 服务器集成
  • 受无限画布工具如 Miro、Figma 和 Obsidian Canvas 的启发
  • 图标由 Heroicons 提供
  • 社区贡献者和测试人员

📄 许可证

本项目采用 MIT 许可证 - 详情请参阅 LICENSE 文件。

💬 社区和支持

⭐ 星数历史

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

<div align="center">

由 VISONA 和开源社区制作

⬆ 返回顶部

</div>