Agentation MCP 服务器部署指南：让 Claude Code 实时接收网页标注的完整步骤

Agentation MCP 服务器部署指南让 Claude Code 实时接收网页标注的完整步骤【免费下载链接】agentationThe visual feedback tool for agents.项目地址: https://gitcode.com/gh_mirrors/ag/agentationAgentation 是一款面向 AI 编程 Agent 的可视化反馈工具你在浏览器里点击页面元素、写下备注Claude Code 就能通过 Agentation MCP 服务器实时收到这些网页标注并直接去修改对应代码。本文带你一步步完成 MCP 服务器的部署、验证与常用配置。 你将学到注册 MCP 服务器到 Claude Code、启动标注服务器、用doctor一键体检、配置存储与 Webhooks。一、先搞懂网页标注是怎么流向 Claude Code 的Agentation 由两部分组成浏览器端标注工具栏React 组件点击任意元素、框选区域或划选文字写下这里应该改成什么样。Agentation MCP 服务器接收标注并保存再通过 MCP 协议把待处理标注暴露给 Claude Code 等 AI Agent 调用。整体数据流非常直观浏览器工具栏 ──POST──▶ HTTP 服务器(端口4747) ──存储──▶ SQLite │ Claude Code ──MCP工具调用──▶ 读取/处理标注 ◀──┘部署完成后你只需要对 Claude Code 说一句处理我的所有标注它就会回复我看到 4 条待处理标注马上开始二、部署前置在项目中安装网页标注组件MCP 服务器负责收但标注本身来自浏览器所以先确保前端页面装好了 Agentation 组件要求 React 18npm install agentation -D然后在根布局中引入组件即可开发模式下右下角会出现标注工具栏完整示例见 package/example/import { Agentation } from agentation; {process.env.NODE_ENV development Agentation /} 也可以直接让 Claude Code 帮你装好仓库自带的 skills/agentation/SKILL.md 就是一份自动安装 Agentation 工具栏的技能说明。三、一键安装步骤注册 MCP 服务器到 Claude Code安装agentation-mcp包npm install agentation-mcp然后有三种方式把它注册给 Claude Code任选其一方式命令适用场景① Claude Code 专用命令claude mcp add agentation -- npx agentation-mcp server只用 Claude Code② 交互式安装向导agentation-mcp init新手推荐自动检测配置并测试连接③ 通用 add-mcpnpx add-mcp npx -y agentation-mcp serverCursor、Codex、Windsurf 等 9 种 Agent其中agentation-mcp init会弹出交互式向导检查你的 Claude Code 配置文件、询问端口、自动执行claude mcp add并立即启动服务器做健康检查。新手建议优先用它。四、启动 MCP 服务器一条命令同时跑起两个服务agentation-mcp server这条命令同时启动两个服务HTTP 服务器默认端口4747接收浏览器工具栏 POST 过来的标注MCP 服务器stdio向 Claude Code 暴露一组标注操作工具常用启动参数详见 mcp/src/server/index.ts参数作用--port 端口修改 HTTP 端口默认 4747冲突时常用--mcp-only跳过 HTTP 服务只运行 stdio MCP--http-url urlMCP 从指定地址的 HTTP 服务器读取数据--api-key key使用云端存储的 API Key五、最快验证方法用 doctor 体检你的部署agentation-mcp doctor诊断工具会依次检查 4 项实现见 mcp/src/cli.tsNode.js 版本是否 ≥ 18Claude Code 配置中是否已注册 agentation MCP是否存在旧版遗留配置文件服务器连通性请求http://localhost:4747/health是否健康看到✓ Server: Running and healthy就说明浏览器和 Claude Code 都通了。此外也可以直接访问健康检查接口/health与状态接口/status。六、标注如何变成代码修改MCP 工具一览MCP 服务器把标注操作封装成 9 个工具完整列表见 mcp/README.mdClaude Code 会按需调用工具用途agentation_get_all_pending拉取所有待处理标注agentation_list_sessions/get_session查看标注会话agentation_acknowledge标记已看到agentation_resolve修复完成后标记已解决agentation_dismiss附理由驳回一条标注agentation_reply在标注线程中回复agentation_watch_annotations阻塞等待新标注来了就批量返回每条标注都会携带 CSS 选择器、元素路径、坐标、选中文本等结构化上下文数据定义参考 mcp/src/types.ts结构示意如下图所以 Agent 可以精确grep到你指的那段代码而不是靠侧边栏的蓝色按钮这种模糊描述免手动模式Hands-Free在项目的CLAUDE.md里加一段指令让 Agent 循环调用agentation_watch_annotations——你标注一条它自动认领 → 改代码 → 标记解决全程无需你再开口。七、常用环境变量与存储配置变量说明默认值AGENTATION_STORE存储后端sqlite或memorysqliteAGENTATION_WEBHOOK_URL单条 Webhook 通知地址-AGENTATION_WEBHOOKS多条 Webhook逗号分隔-AGENTATION_EVENT_RETENTION_DAYS事件保留天数7默认情况下标注持久化到~/.agentation/store.dbSQLite实现见 mcp/src/server/sqlite.ts临时演示可以用内存存储AGENTATION_STOREmemory agentation-mcp server配置 Webhook 后用户点击请求 Agent 处理时会推送到你的服务器适合多 Agent 协作场景。八、常见问题排查清单工具栏一直显示 MCP Connecting...HTTP 服务器没启动或工具栏配置的服务地址与实际端口不一致组件支持传入 server URL 参数见 package/src/components/page-toolbar-css/index.tsx。端口 4747 被占用用agentation-mcp server --port 8080换端口记得同步修改 Claude Code 的注册命令与工具栏配置。doctor 提示未注册 MCP重新执行claude mcp add agentation -- npx agentation-mcp server然后重启 Claude Code使其加载 MCP 服务器。改了配置不生效MCP 服务器由 Claude Code 通过 stdio 拉起注册命令变更后必须重启 Agent 会话。 进阶玩法把 skills/agentation-self-driving/SKILL.md 链到~/.claude/skills/即可开启自动驾驶模式——一个会话在浏览器里自动添加设计批注另一个会话通过 MCP 实时接收并改代码实现全自动设计评审。九、相关文件速查mcp/README.mdMCP 服务器完整文档工具表、HTTP API、Webhooksmcp/src/cli.tsinit/server/doctor命令实现mcp/src/server/mcp.tsMCP 工具定义与 HTTP 代理逻辑mcp/src/server/http.ts接收标注的 HTTP 服务package/example/可运行的前端示例站部署完成现在打开你的开发页面点几个元素写下标注对 Claude Code 说处理我的所有标注——剩下的交给 Agent。【免费下载链接】agentationThe visual feedback tool for agents.项目地址: https://gitcode.com/gh_mirrors/ag/agentation创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考