AI导哈

画布渲染服务器

Canvas MCP Server 是一个为AI代理提供A2UI画布渲染能力的服务器，支持实时可视化和状态持久化。

  • by pigeek
  • Python
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 pigeek/canvas-mcp

使用说明

Canvas MCP服务器

MCP（模型上下文协议）服务器，为AI代理提供A2UI画布渲染功能。

概述

Canvas MCP Server使AI代理能够使用 A2UI 协议。它提供：

  • MCP工具 用于创建和管理画布表面
  • HTTP服务器 为A2UI渲染器提供服务
  • WebSocket 服务器 用于实时更新
  • 状态持久性 帆布召回

建筑

┌─────────────────────────────────────────────────────────────────┐
│                     Canvas MCP Server                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌─────────────┐    ┌─────────────────┐    ┌────────────────┐  │
│  │ MCP Server  │    │ Canvas Manager  │    │ Web Server     │  │
│  │             │───▶│                 │───▶│ (HTTP + WS)    │  │
│  │ - Tools     │    │ - Surfaces      │    │                │  │
│  │ - Resources │    │ - Persistence   │    │ /canvas/{id}   │  │
│  └─────────────┘    └─────────────────┘    │ /ws/{id}       │  │
│                                             └────────────────┘  │
│                                                     │           │
│                                                     ▼           │
│                                            ┌────────────────┐   │
│                                            │ Browser / TV   │   │
│                                            │ (A2UI Renderer)│   │
│                                            └────────────────┘   │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

安装

pip install canvas-mcp

或者从源代码安装：

git clone https://github.com/pigeek/canvas-mcp.git
cd canvas-mcp
pip install -e ".[dev]"

用法

作为MCP服务器（stdio）

canvas-mcp --port 8080 --host 0.0.0.0

使用nanobot

增添 ~/.nanobot/config.json:

{
  "tools": {
    "mcpServers": {
      "canvas": {
        "command": "canvas-mcp",
        "args": ["--port", "8080"]
      }
    }
  }
}

CLI选项

Usage: canvas-mcp [OPTIONS]

Options:
  --host TEXT               Host to bind the web server to [default: 0.0.0.0]
  --port INTEGER            Port for the web server [default: 8080]
  --persistence-path TEXT   Path to store canvas state [default: ~/.canvas-mcp/surfaces/]
  --no-persistence          Disable state persistence
  --default-size TEXT       Default canvas size preset [default: tv_1080p]
                            Options: tv_1080p, tv_4k, phone, tablet, square, auto
  --receiver-url TEXT       URL of the external Chromecast receiver app
  --cast-app-id TEXT        Google Cast application ID
  -v, --verbose             Enable verbose logging
  --help                    Show this message and exit

MCP工具

canvas_create

创建新的画布表面。

参数：

  • name （可选）：画布的友好名称
  • size （可选）：画布尺寸预设或自定义尺寸

尺寸预设：

预设 尺寸 用例
tv_1080p 1920×1080 全高清电视（默认）
tv_4k 3840×2160 4K电视
phone 390×844 手机人像
tablet 1024×768 平板电脑
square 1080×1080 社交媒体
auto 视口 填充浏览器窗口

退货：

{
  "success": true,
  "surface_id": "abc123def456",
  "name": "my-canvas",
  "size": {"width": 1920, "height": 1080, "preset": "tv_1080p"},
  "local_url": "http://localhost:8080/canvas/abc123def456",
  "ws_url": "ws://localhost:8080/ws/abc123def456"
}

canvas_update

使用A2UI格式更新画布上的组件。

参数：

  • surface_id：要更新的曲面ID
  • components：A2UI组件定义数组

例子：

{
  "surface_id": "abc123def456",
  "components": [
    {"id": "root", "component": "Column", "children": ["header", "content"]},
    {"id": "header", "component": "Text", "text": "Hello!", "style": {"fontSize": 48}},
    {"id": "content", "component": "Card", "children": ["message"]},
    {"id": "message", "component": "Text", "text": "Welcome to Canvas"}
  ]
}

canvas_data

更新数据模型而不重新渲染组件。

参数：

  • surface_id：要更新的曲面ID
  • path：JSON指针路径（例如。， /user/name)
  • value：要在路径上设置的值

canvas_close

关闭并删除画布曲面。

参数：

  • surface_id：要关闭的曲面ID

canvas_list

列出所有画布表面。

退货：

{
  "success": true,
  "count": 2,
  "surfaces": [
    {
      "surface_id": "abc123",
      "name": "dashboard",
      "local_url": "http://localhost:8080/canvas/abc123",
      "ws_url": "ws://localhost:8080/ws/abc123",
      "created_at": "2024-02-16T10:00:00",
      "connected_clients": 1
    }
  ]
}

canvas_get

获取画布的完整状态。

参数：

  • surface_id：要检索的曲面ID

退货：

{
  "success": true,
  "surface_id": "abc123",
  "name": "dashboard",
  "components": [...],
  "data_model": {...},
  "created_at": "2024-02-16T10:00:00",
  "updated_at": "2024-02-16T10:05:00"
}

MCP资源

  • canvas://{surface_id}/state -全画布状态（组件+数据模型）
  • canvas://{surface_id}/url -用于访问的画布URL

A2UI组件

内置渲染器支持以下A2UI组件：

组件 描述
Column 垂直柔性容器
Row 水平柔性容器
Card 样式卡容器
Text 文本显示
Image 图像显示
List 列出容器
Divider 视觉分隔符

样式

组件支持a style 具有类似CSS属性的属性：

{
  "id": "header",
  "component": "Text",
  "text": "Dashboard",
  "style": {
    "fontSize": 48,
    "fontWeight": "bold",
    "color": "#ffffff",
    "padding": 24
  }
}

数据绑定

使用 {{/path/to/data}} 数据绑定语法：

{
  "id": "greeting",
  "component": "Text",
  "text": "Hello, {{/user/name}}!"
}

然后通过更新 canvas_data:

{
  "surface_id": "abc123",
  "path": "/user/name",
  "value": "Alice"
}

发展

# Install in development mode
pip install -e ".[dev]"

# Run tests
pytest

# Lint
ruff check .

# Format
ruff format .

# Type check
mypy src/

与Chromecast集成

Canvas MCP Server旨在与Chromecast/Google TV设备配合使用，以实现可视化效果。典型的工作流程：

  1. 使用以下命令创建画布表面 canvas_create
  2. 使用以下内容更新组件 canvas_update
  3. 在Chromecast设备或支持cast的浏览器上打开画布URL

有关与设备发现和配对的高级电视集成，请参阅 AndroidTV MCP服务器.

许可证

麻省理工学院

相关 MCP