PenEcho MCP设置完全指南3步把Codex、Claude Code和Cursor接入你的画布【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penechoPenEcho MCP 设置只需要 3 步在 PenEcho 中打开 MCP 服务把一条配置写进 Codex、Claude Code 或 Cursor然后直接下命令。完成后你日常使用的 AI 客户端就能在 PenEcho 的无限画布上画图、排版、生成可交互的 Widget而你能在画布上手写批注AI 在下一轮对话中直接读取这些反馈。本文是面向新手的完整 MCP 教程从零到跑通全程不超过 10 分钟。一、为什么要把 AI 接入 PenEcho 画布在 PenEcho 中AI 不再只停留在聊天框里。接入 MCP 之后Codex、Claude Code、Cursor 等客户端会获得一整套画布工具空间化输出AI 把架构图、序列图、流程文档直接摆在画布上而不是挤在一段代码块里手绘反馈闭环你在画布上圈画、批注、提问AI 通过penecho_read_feedback读取这些视觉反馈继续修改可交互成果计算器、表单、原型等 Widget 直接在画布中运行可以收藏和分享。下面是一张真实的 MCP 协作画布Claude Code 生成了一份架构分析用户用笔在上面圈出了疑问点AI 在下一轮直接回应这些标注官方演示文档README.md 的 Connect your AI agent (MCP) 章节二、开始之前PenEcho MCP 的两种接入方式PenEcho 提供两条完全独立的 MCP 通路都可选、互不冲突方式适合场景特点Local MCP桌面应用 / npm 本地安装AI 客户端通过小型 stdio CLI 直连本机内置的 HTTPS MCP 服务数据不出你的电脑Cloud MCPpenecho.ai 云画布登录云端后在Cloud → MCP复制安装提示词支持 OAuth 或可撤销的访问令牌整体架构上浏览器、本地 PC、云服务和 AI Agent 是这样连通的Local MCP 的链路值得新手理解一遍PenEcho 随应用启动内置 HTTPS 服务依次尝试 3922、13922、23922 端口第三方 AgentCodex、Claude Code 等通过各自的 stdio 子进程接入本地 MCP Server再由 MCP Server 读写画布一个重要的安全默认值AI 只能看到你明确开启 MCP 的画布。启动服务不等于授权任何浏览器连接与画布操作本身免费、不消耗 PenEcho 额度。详细原理见 docs/mcp-setup.md实现代码位于 src/server/mcp/ 目录。三、MCP设置3步走接入 Codex / Claude Code / Cursor第 1 步在 PenEcho 中开启 MCP 服务打开Settings → MCP service为当前画布打开 MCP 开关。侧边栏的 MCP 标签页会列出所有被外部绑定的画布与活动会话带未读标记方便你追踪 AI 的动态见 docs/mcp-sidebar.md。第 2 步把配置写入你的 AI 客户端PenEcho 内置了Auto configure与Copy setup prompt两个入口二者使用同一条传输链路Auto configure支持一键写入的客户端直接点选完成Copy setup prompt把生成的提示词粘贴给你的 AI让它替你完成配置完整可复制的提示词模板见 docs/mcp-agent-instructions.md。如果 PenEcho 是通过 npm 全局安装的所有接受mcpServersJSON 的客户端Codex、Claude Code、Cursor 等都可以直接使用这条兼容配置{ mcpServers: { penecho: { command: penecho, args: [mcp] } } }底层机制上默认 stdio 配置会下载 SHA-256 校验过的discover.js和client.js到~/.penecho/mcpWindows 为%USERPROFILE%\.penecho\mcp要求 Node 18之后 CLI 会以node client.js --host-id hostId的方式直连本机 HTTPS 服务自动加载主机 CA无需改动 AI 进程的全局信任环境。端口被占用、IP 变化都有自动发现与缓存恢复机制详见 docs/mcp-setup.md 的地址发现章节。配置写入后记得在 AI 客户端中重载 MCP 工具列表——保存配置不等于运行中的进程已加载它。第 3 步让 AI 在画布上开工直接在对话里说一句例如Show the architecture we discussed on my PenEcho canvas.一次典型的 MCP 请求在内部是这样流转的客户端调用工具 → 本地 MCP 服务校验规则与 requestId → 浏览器文档运行时执行画布操作 → Widget Host 渲染并可选截图回传跑通后画布上就会出现 AI 生成的可交互内容比如这个由 MCP 生成并在 Windows 桌面版中运行的测试 Widget四、常用工具速查AI 能操作画布的哪些东西桥接会实时广播完整的工具清单共 19 个以tools/list的实时响应为准新手先认识下面 8 个最常用的工具大白话解释penecho_list_canvases列出所有已开启 MCP 的打开画布返回准确的连接 ID 与文档 IDpenecho_start_session为一次任务建立会话绑定画布target:current表示就在当前这个画布penecho_edit_canvas创建、移动、缩放、删除画布对象擦除墨迹不覆盖你的新版本penecho_draw/penecho_plot原生绘制流程图节点与连线 / 本地采样绘制函数曲线自动排版无需坐标penecho_present_widget上屏 HTML 预览 Widget同一 artifactId 会更新而非新建penecho_capture_canvas截图画布、视口、选中区域或单个对象penecho_read_feedback读取你在画布上提交的手写批注与反馈含当前截图上下文penecho_update_session更新任务进度状态、摘要、步骤与事件AI 用这些工具画出的专业图表例如一份 Kubernetes 生产集群部署图完整的工具契约与返回结构见 docs/mcp-setup.md 的工具契约表格。五、遇到问题常见 MCP 故障排查 ✅现象原因与处理HOST_UNREACHABLE确认 PenEcho 已启动、私有网络可达重新运行发现CLI 本身不会启动任何运行时或浏览器AUTH_REJECTED重新导入当前的主机信任包trust bundleTLS_CA/TLS_HOSTNAME核对主机、CA 与证书 IP 覆盖范围不要绕过 TLS 校验工具列表里看不到 PenEcho客户端写配置后必须重载 MCP确认浏览器端已开启 MCP 且画布未关闭会话过期 / 地址变化用原来的client/sessionKey/documentId重新penecho_start_session即可恢复同一文档更完整的排查清单含证书有效期、生命周期与容量上限见 docs/mcp-setup.md 的排查与验证章节。六、进阶与延伸阅读可选工作流 Skill仓库提供可移植的 skills/penecho-mcp/SKILL.md客户端支持本地 skills 且你需要该工作流时再按客户端文档安装云 MCP 接入登录 penecho.ai 后打开Cloud → MCP复制标准 Streamable HTTP 安装提示词即可配套插件清单见 integrations/penecho-cloud/自动化验收想确认本地环境是否彻底就绪参考 docs/mcp-acceptance.md画布 Agent 进阶内置 Agent 与画布运行时细节见 docs/architecture.md 和 src/server/canvas-agent/。写在最后PenEcho MCP 设置的精髓就是画布即工作台AI 产出落在空间上你的反馈落在笔尖上两者在同一块无限画布里汇合。3 步配置完成后无论 Codex、Claude Code 还是 Cursor都会多出一个能看见你画布、也能被你手写指挥的双向通道——这比单纯的聊天框更像一个真正的协作者。【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penecho创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
