{"_id":"@atspider/spider-ai-studio-agent","name":"@atspider/spider-ai-studio-agent","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@atspider/spider-ai-studio-agent","version":"0.2.0","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","bin":{"spider-ai-studio-agent":"dist/index.js"},"scripts":{"dev":"tsx src/index.ts","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.139.0","express":"^5.1.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"},"gitHead":"d1030ab18faee28f1e8a3f46e52e629a422455fd","_id":"@atspider/spider-ai-studio-agent@0.2.0","description":"本地 Canvas Agent 用来连接画布网页和用户电脑上的 Codex / Claude Code。本地开发时优先连接 `http://localhost:3000`，不需要先使用线上站点。","_nodeVersion":"25.8.0","_npmVersion":"11.11.0","dist":{"integrity":"sha512-3KmdWrEvgVHsZO/rkN+qObw9GPBjXmZwUPaXBKYdB9/a6vfO5tLSvpEldO+9H/eI0xSdVfKV2Qf2xO1gn606JQ==","shasum":"04188b6ca0e0c8c9b901e6eecf9308c9521d902d","tarball":"https://registry.npmjs.org/@atspider/spider-ai-studio-agent/-/spider-ai-studio-agent-0.2.0.tgz","fileCount":20,"unpackedSize":136085,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA1Be5HKVJLuGhhPMgfVNhf3XHDip+ta6ubwGlo1aSJpAiA7qxEpL6wdlmmxcsCEv7jxN5484vIafKvp/CiFgtn75A=="}]},"_npmUser":{"name":"atspider","email":"xclitmail@gmail.com"},"directories":{},"maintainers":[{"name":"atspider","email":"xclitmail@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/spider-ai-studio-agent_0.2.0_1785280702690_0.5777047670375064"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-28T23:18:22.571Z","0.2.0":"2026-07-28T23:18:22.825Z","modified":"2026-07-28T23:18:22.992Z"},"maintainers":[{"name":"atspider","email":"xclitmail@gmail.com"}],"description":"本地 Canvas Agent 用来连接画布网页和用户电脑上的 Codex / Claude Code。本地开发时优先连接 `http://localhost:3000`，不需要先使用线上站点。","readme":"# Spider AI Studio Agent\n\n本地 Canvas Agent 用来连接画布网页和用户电脑上的 Codex / Claude Code。本地开发时优先连接 `http://localhost:3000`，不需要先使用线上站点。\n\n## 启动\n\n```bash\nnpx -y @atspider/spider-ai-studio-agent\n```\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`。配置与站点工作区统一保存在：\n\n```txt\n~/.spider-ai-studio/agent/config.json\n~/.spider-ai-studio/agent/workspaces/site\n```\n\n网页携带正确 token 连接后，Canvas Agent 会把该网页 Origin 写入配置；换用其他部署域名时，需要再次携带正确 token 完成授权。\n\n## 发布\n\n`canvas-agent` 使用自己的 `package.json` 版本号，不跟仓库根目录 `VERSION` 绑定。推送到 `main` 后，GitHub Actions 会检查 npm 上是否已经存在当前包版本；不存在时才发布 `@atspider/spider-ai-studio-agent`。\n\n发布前需要在 GitHub 仓库 Secrets 中配置 `NPM_TOKEN`。\n\n## Codex MCP\n\n如果希望 Codex 终端能直接操作画布，需要先把 Canvas Agent 注册成 Codex MCP。\n\n直接运行 `npx -y @atspider/spider-ai-studio-agent` 只启动本地 Agent 服务，不会安装 MCP，也不会增加 Codex 工具上下文。只有安装 Codex app 插件，或手动执行 `codex mcp add` 后，`spider-ai-studio` 工具才会进入 Codex 上下文；由于工具较多，不使用时建议移除。\n\n通过插件安装时移除插件：\n\n```bash\ncodex plugin remove spider-ai-studio\n```\n\n手动添加 MCP 时移除 MCP：\n\n```bash\ncodex mcp remove spider-ai-studio\n```\n\n### Codex app 插件\n\n仓库内提供了 Codex app 插件：`plugins/spider-ai-studio`。在 Codex app 中添加本仓库的 marketplace 后，可以安装 `Spider AI Studio` 插件；插件会注册同一个 `spider-ai-studio` MCP，并带上画布操作说明。\n\n添加本地 marketplace 时建议使用仓库绝对路径，避免 Codex 从其他工作目录解析失败：\n\n```bash\ncd /path/to/spider-ai-studio\ncodex plugin marketplace add \"$(pwd)\"\ncodex plugin add spider-ai-studio@spider-ai-studio-local\n```\n\n插件默认通过 npm 启动 MCP；这个命令只提供 MCP 工具，不会把 MCP 写入全局配置，也不会在退出时自动卸载：\n\n```bash\nnpx -y @atspider/spider-ai-studio-agent mcp\n```\n\n使用时可以直接在 Codex 里说“打开 Spider AI Studio”，插件会启动本地 Agent，读取 Local URL 和 Connect token，然后在右侧打开 `https://canvas.best/` 并自动新建、连接画布；只有明确要求使用本地项目时才会启动本地前端。\n\nCanvas Agent 启动后，给 Codex 添加 MCP：\n\n```bash\ncodex mcp add spider-ai-studio -- npx -y @atspider/spider-ai-studio-agent mcp\n```\n\n本仓库开发时可以改成，实际使用建议替换为本机绝对路径：\n\n```bash\ncodex mcp add spider-ai-studio -- node /path/to/spider-ai-studio/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.spider-ai-studio]\ncommand = \"npx\"\nargs = [\"-y\", \"@atspider/spider-ai-studio-agent\", \"mcp\"]\ndefault_tools_approval_mode = \"approve\"\n```\n\n可用工具：\n\n- `canvas_get_state`\n- `canvas_get_selection`\n- `canvas_export_snapshot`\n- `canvas_apply_ops`\n- `canvas_create_text_node`\n- `canvas_create_image_prompt_flow`\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，启动时会注入 `spider-ai-studio` MCP 配置并自动放行 MCP 审批，真正执行画布修改前仍由网页侧边栏二次确认。\n\n侧边栏会展示 Codex 返回的 `thread.started`、`turn.started`、`item.*`、`turn.completed` 等结构化事件；收到 app-server 的 `item/agentMessage/delta` 时，Canvas Agent 会转成 `item.updated`，网页会用同一条消息做真实流式更新，并把工具细节收进运行日志。\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 spider-ai-studio -- npx -y @atspider/spider-ai-studio-agent mcp\n```\n\n本仓库开发时可以改成：\n\n```bash\nclaude mcp add --scope user --transport stdio spider-ai-studio -- node /path/to/spider-ai-studio/canvas-agent/dist/index.js mcp\n```\n\nCanvas Agent 调用 Claude Code 时会默认带上 `--allowedTools mcp__spider-ai-studio__*`，画布写操作仍由网页侧边栏确认。\n","readmeFilename":"README.md","_rev":"1-7d1c375b41668ed01ae70fcccbc5e5b6"}