{"_id":"@c6c/canvas-agent","name":"@c6c/canvas-agent","dist-tags":{"latest":"0.3.0"},"versions":{"0.3.0":{"name":"@c6c/canvas-agent","version":"0.3.0","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","bin":{"canvas-agent":"dist/index.js"},"scripts":{"dev":"tsx src/index.ts","debug":"tsx src/index.ts --debug","test":"tsx --test src/canvas/session.test.ts","build":"tsc -p tsconfig.json","start":"node dist/index.js","prepack":"npm run build"},"dependencies":{"@modelcontextprotocol/sdk":"^1.12.1","@openai/codex":"0.145.0","express":"^5.1.0","winston":"^3.19.0","zod":"^3.25.0"},"devDependencies":{"@types/express":"^5.0.0","@types/node":"^22.0.0","tsx":"^4.19.0","typescript":"^5.8.0"},"engines":{"node":">=18"},"publishConfig":{"access":"public"},"_id":"@c6c/canvas-agent@0.3.0","gitHead":"46cfe8c8bfed70d19f4d51e71967c16d16b49ef8","description":"本地 Canvas Agent 用来连接画布网页和用户电脑上的 Codex / Claude Code。本地开发时优先连接 `http://localhost:3000`，不需要先使用线上站点。","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-kTVj/MApZy/BYa7WExC1VAGX3cAVbwdRd1V8Vd5Tc/FO/Mii2LnTM6Srp6TA5Y8YlhCxGCjBm3l2coL5KAsNnQ==","shasum":"3f304135d55ff55d5d65796cb72bd5102d1e9d7c","tarball":"https://registry.npmjs.org/@c6c/canvas-agent/-/canvas-agent-0.3.0.tgz","fileCount":39,"unpackedSize":188992,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDH3qfYutanOuNoyiw6rcuqYuEStZupGo4J9R+jRT5tCAiBlvLac5VHNQWx0ASDxmgW0RZ1JGzyb3KjJYFFo3oNiTw=="}]},"_npmUser":{"name":"c6c","email":"linq21824@gmail.com"},"directories":{},"maintainers":[{"name":"c6c","email":"linq21824@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/canvas-agent_0.3.0_1785726242968_0.7674318741424389"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-03T03:04:02.671Z","0.3.0":"2026-08-03T03:04:03.114Z","modified":"2026-08-03T03:04:03.362Z"},"maintainers":[{"name":"c6c","email":"linq21824@gmail.com"}],"description":"本地 Canvas Agent 用来连接画布网页和用户电脑上的 Codex / Claude Code。本地开发时优先连接 `http://localhost:3000`，不需要先使用线上站点。","readme":"# Infinite Canvas Agent\n\n本地 Canvas Agent 用来连接画布网页和用户电脑上的 Codex / Claude Code。本地开发时优先连接 `http://localhost:3000`，不需要先使用线上站点。\n\n## 启动\n\n```bash\nnpx -y @c6c/canvas-agent\n```\n\n需要排查连接、线程、Codex app-server 或工具调用问题时，可开启 Debug 模式：\n\n```bash\nnpx -y @c6c/canvas-agent --debug\n```\n\nDebug 日志会以 `[DEBUG][HH:mm:ss]` 等传统格式输出到终端，并按启动日期保存到 `~/.infinite-canvas/logs/canvas-agent-YYYY-MM-DD.log`。终端日志带级别颜色，文件日志为纯文本；日志包含 HTTP、SSE、线程、turn、Codex app-server 和工具调用事件，token 与图片 Data URL 会自动隐藏。\n\n本仓库开发时也可以直接运行：\n\n```bash\ncd canvas-agent\nnpm install\nnpm run build\nnode dist/index.js\n```\n\n启动后会输出本机地址和 token：\n\n```txt\nLocal URL: http://127.0.0.1:17371\nConnect token: xxxxxx\n```\n\n在画布右上角点击 `Agent`，填入地址和 token 后连接。\n\nCodex app 插件会读取启动输出里的 Local URL 和 Connect token，并直接打开画布网页地址；Canvas Agent 不负责生成画布打开 URL。\n\nCanvas Agent 默认只监听 `127.0.0.1`。网页第一次带正确 token 连接后，Canvas Agent 会记录该网页 Origin；之后其他 Origin 不能复用这个本地 Agent，除非用户清理 `~/.infinite-canvas/canvas-agent.json` 里的 `origins`。\n\n## 发布\n\n`canvas-agent` 使用自己的 `package.json` 版本号，不跟仓库根目录 `VERSION` 绑定。当前仓库没有配置自动发布流程；需要发布自有 npm 包时再单独补充。\n\n## Codex MCP\n\n如果希望 Codex 终端能直接操作画布，需要先把 Canvas Agent 注册成 Codex MCP。\n\n直接运行 `npx -y @c6c/canvas-agent` 只启动本地 Agent 服务，不会安装 MCP，也不会增加 Codex 工具上下文。只有安装 Codex app 插件，或手动执行 `codex mcp add` 后，`infinite-canvas` 工具才会进入 Codex 上下文；由于工具较多，不使用时建议移除。\n\n通过插件安装时移除插件：\n\n```bash\ncodex plugin remove infinite-canvas\n```\n\n手动添加 MCP 时移除 MCP：\n\n```bash\ncodex mcp remove infinite-canvas\n```\n\n### Codex app 插件\n\n仓库内提供了 Codex app 插件：`plugins/infinite-canvas`。在 Codex app 中添加本仓库的 marketplace 后，可以安装 `Infinite Canvas` 插件；插件会注册同一个 `infinite-canvas` MCP，并带上画布操作说明。\n\n添加本地 marketplace 时建议使用仓库绝对路径，避免 Codex 从其他工作目录解析失败：\n\n```bash\ncd /path/to/infinite-canvas\ncodex plugin marketplace add \"$(pwd)\"\ncodex plugin add infinite-canvas@infinite-canvas-local\n```\n\n插件默认通过 npm 启动 MCP；这个命令只提供 MCP 工具，不会把 MCP 写入全局配置，也不会在退出时自动卸载：\n\n```bash\nnpx -y @c6c/canvas-agent mcp\n```\n\n使用时可以直接在 Codex 里说“打开 Infinite Canvas”，插件会启动本地前端和 Agent，读取 Local URL 和 Connect token，然后在右侧打开 `http://localhost:3000/` 并自动新建、连接画布；如果前端实际使用其他端口，以终端输出为准。\n\nCanvas Agent 启动后，给 Codex 添加 MCP：\n\n```bash\ncodex mcp add infinite-canvas -- npx -y @c6c/canvas-agent mcp\n```\n\n本仓库开发时可以改成，实际使用建议替换为本机绝对路径：\n\n```bash\ncodex mcp add infinite-canvas -- node /path/to/infinite-canvas/canvas-agent/dist/index.js mcp\n```\n\nCanvas Agent 源码使用 TypeScript 编写，MCP 协议层使用官方 `@modelcontextprotocol/sdk`，工具入参使用 `zod` 描述。\n\n如果希望终端里的 Codex 不被 MCP 审批卡住，可以在 `~/.codex/config.toml` 里给这个 MCP 设置自动放行：\n\n```toml\n[mcp_servers.infinite-canvas]\ncommand = \"npx\"\nargs = [\"-y\", \"@c6c/canvas-agent\", \"mcp\"]\ndefault_tools_approval_mode = \"approve\"\n```\n\n可用工具包括：\n\n- 站点与状态：`site_navigate`、`canvas_list_projects`、`generation_get_status`\n- 画布读取：`canvas_get_state`、`canvas_get_selection`、`canvas_export_snapshot`\n- 画布编辑：`canvas_apply_ops`、`canvas_create_node`、`canvas_create_attachment_nodes`、`canvas_create_text_node`、`canvas_create_text_nodes`、`canvas_create_config_node`、`canvas_update_node`、`canvas_update_node_text`、`canvas_move_nodes`、`canvas_resize_node`、`canvas_delete_nodes`、`canvas_connect_nodes`、`canvas_select_nodes`、`canvas_set_viewport`\n- 生成流程：`canvas_create_image_prompt_flow`、`canvas_create_generation_flow`、`canvas_generate_text`、`canvas_generate_image`、`canvas_generate_video`、`canvas_generate_audio`、`canvas_run_generation`\n- 工作台与素材：`workbench_image_get_config`、`workbench_image_generate`、`workbench_video_get_config`、`workbench_video_generate`、`prompts_search`、`assets_list`、`assets_add`\n\n`canvas_apply_ops` 示例：\n\n```json\n{\n  \"ops\": [\n    {\n      \"type\": \"add_node\",\n      \"nodeType\": \"text\",\n      \"title\": \"标题\",\n      \"position\": { \"x\": 0, \"y\": 0 },\n      \"metadata\": { \"content\": \"文本内容\" }\n    }\n  ]\n}\n```\n\n## 侧边栏 Codex\n\n本地面板会把提示词发送给 Canvas Agent。Canvas Agent 使用官方 `@openai/codex` CLI 的 `codex app-server --stdio` 启动并复用同一个 Codex thread，启动时会注入 `infinite-canvas` MCP 配置并自动放行 MCP 审批；网页侧边栏可在“手动确认”和“自动确认”之间切换画布写操作。\n\n侧边栏会展示 Codex 返回的 `thread.started`、`turn.started`、`item.*`、`turn.completed` 等结构化事件；Canvas Agent 会合并短时间内的回复、思考摘要和命令输出增量，网页使用同一条消息持续更新，并把任务进度、计划、搜索、文件修改与工具操作整理为中文过程时间线。\n\n侧边栏上传或粘贴的图片会先发到本机 Canvas Agent，再由 Canvas Agent 临时写入本机文件并作为 app-server `localImage` 输入传给 Codex；前端会提示附件体积，单次请求体限制为 30MB。\n\n## Claude Code\n\nClaude Code Adapter 代码暂时保留，但当前网页侧边栏只开放 Codex。后续开放 Claude 入口时，Canvas Agent 会调用本机 `claude -p --output-format stream-json` 并把流式 JSON 事件转发到侧边栏。\n\n如果希望 Claude Code 也能操作画布，需要给 Claude Code 添加同一个 MCP。建议用 user scope，避免 Canvas Agent 从不同目录启动时找不到配置：\n\n```bash\nclaude mcp add --scope user --transport stdio infinite-canvas -- npx -y @c6c/canvas-agent mcp\n```\n\n本仓库开发时可以改成：\n\n```bash\nclaude mcp add --scope user --transport stdio infinite-canvas -- node /path/to/infinite-canvas/canvas-agent/dist/index.js mcp\n```\n\nCanvas Agent 调用 Claude Code 时会默认带上 `--allowedTools mcp__infinite-canvas__*`，画布写操作仍由网页侧边栏确认。\n","readmeFilename":"README.md","_rev":"1-4b15bea282e2c2bd81937c89fa3a02bd"}