Canvas AIGC

Canvas AIGC 是连接网页画布与本机 Codex / Claude 的 MCP 服务。v0.2 通过本地 HTTP 桥接按浏览器会话隔离画布状态，并通过 stdio MCP 暴露读取、创建、修改、连线和生成等 30 个工具。

环境要求

• Node.js 18 或更高版本

• 已安装并登录 Codex CLI，或已配置 Claude Agent SDK 所需凭据

• 本地 Infinite Canvas 默认运行在 http://localhost:3000

Related MCP server: @designjs/mcp-server

快速启动

直接启动本地桥接服务：

npx -y github:3108482409song-commits/Canvas-AIGC

默认输出：

Canvas AIGC
Local URL: http://127.0.0.1:17371
Connect token: <token>

配置保存在 ~/.canvas-aigc/config.json。服务只监听 127.0.0.1，网页必须携带正确 token，首次成功连接后会记录允许访问的网页 Origin。

Codex MCP

codex mcp add canvas-aigc -- npx -y github:3108482409song-commits/Canvas-AIGC mcp

MCP 启动时会自动检测并拉起本地 HTTP 桥接服务，不需要另外启动第二个进程。注册或更新后需要开启新的 Codex 对话加载工具。

也可以在 ~/.codex/config.toml 中手动配置：

[mcp_servers.canvas-aigc]
command = "npx"
args = ["-y", "github:3108482409song-commits/Canvas-AIGC", "mcp"]
startup_timeout_sec = 60
tool_timeout_sec = 90

Claude MCP

claude mcp add --scope user --transport stdio canvas-aigc -- npx -y github:3108482409song-commits/Canvas-AIGC mcp

主要工具

• canvas_get_capabilities、canvas_list_sessions、canvas_use_session

• canvas_get_state、canvas_get_selection、canvas_export_snapshot

• canvas_get_nodes

• canvas_create_node、canvas_create_text_node、canvas_create_text_nodes

• canvas_create_config_node、canvas_create_generation_flow

• canvas_generate_text、canvas_generate_image、canvas_generate_video、canvas_generate_audio

• canvas_update_node、canvas_move_nodes、canvas_resize_node

• canvas_delete_nodes、canvas_connect_nodes、canvas_select_nodes

• canvas_set_viewport、canvas_run_generation、canvas_apply_ops

• canvas_get_generation_status、canvas_wait_generation、canvas_cancel_generation

写入操作仍由网页 Agent 侧边栏按手动或自动模式处理，MCP 不绕过画布确认流程。每次写入都校验目标会话和 revision，批量操作返回逐项结果；生成工具只表示任务已排队，需要通过状态或等待工具取得真实结果。

本地开发

npm install
npm run dev

源码位于 src/，协议层使用官方 @modelcontextprotocol/sdk，工具入参使用 zod 校验。

License

AGPL-3.0-only。维护与派生说明见 NOTICE。