mcpField
A
agentation

agentation

github.com/growthx-club开发0169 次安装5 周前更新
代码仓库

关于 agentation

agentation 是一项为 React 项目配置 Agentation 工具栏及可选 MCP 连接的技能。它强调核对浏览器批注是否实际到达编码 Agent，而不只检查服务健康状态。

主要功能

  1. 01检查现有组件与项目配置
  2. 02安装并配置 Agentation 工具栏
  3. 03选择 MCP 或手动复制模式
  4. 04配置 Agent 的 MCP 连接
  5. 05用测试批注验证完整链路

适用场景

  1. 01在 React 项目中安装反馈工具栏
  2. 02将浏览器批注连接到编码 Agent
  3. 03保留现有自定义服务地址
  4. 04排查批注未传到 Agent 的问题

MCP 相关

当请求 MCP 反馈时，该技能配置 agentation-mcp 服务，并将工具栏端点指向相同 HTTP 地址。它通过读取测试批注验证浏览器与 Agent 之间的连接。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/growthx-club/build-sprint-skills --skill agentation

安装后在 Claude Code 中输入/agentation确认已加载。

附带文件UPSTREAM-LICENSE

详细介绍

Agentation 设置

设置工具栏，并在用户提出要求时将其连接到用户的编码 Agent。 工具栏可见且 MCP 服务运行正常，并不能证明浏览器反馈已传达到 Agent。请在宣布设置完成前验证这最后一步。

步骤

  1. 检查项目

    • 阅读项目说明并检测其包管理器。
    • 安装前查找 agentation 和现有的 <Agentation> 挂载。
    • 如果已挂载，请检查其 endpoint 和当前 MCP 设置。不要仅因组件已存在就结束，也不要添加重复挂载。
    • 如果缺少 agentation，请使用现有锁文件对应的包管理器安装。

  2. 根据请求选择连接模式

    • 如果需要 MCP 或 Agent 实时反馈，请使用与 Agent 相同的 HTTP 服务 URL。 默认本地服务为 http://localhost:4747；保留现有自定义端口或代理 URL。如果项目是远程项目，切勿假设浏览器和 Agent 使用同一台机器。
    • 如果仅需手动复制/粘贴，请省略 endpoint，并说明反馈仍保留在此浏览器中。不要擅自启用服务连接。
    • 如果意图不明确，请在检查现有项目时提出一个简短问题。继续处理独立的设置检查。

  3. 添加或更新组件

    对于 Next.js App Router 项目，在根布局的 body 中、children 之后渲染。对于 Pages Router，在 pages/_app 中的 Component 之后渲染。 保留任何现有回调和选项。

    import { Agentation } from "agentation";

// Use the actual server URL selected above for MCP sync:
{process.env.NODE_ENV === "development" && (
  <Agentation endpoint="http://localhost:4747" />
)}

    该包提供自己的客户端边界。除非项目有其他原因需要更改，否则请保持应用的根布局为服务器渲染。

  4. 在请求 MCP 时配置 Agent

    • 使用项目现有的 MCP 客户端和配置惯例。
    • 启动命令必须包含 server 子命令： npx -y agentation-mcp server。
    • 对于受支持的 Agent，npx add-mcp "npx -y agentation-mcp server" 是一种设置方式。对于 Claude Code，请使用 claude mcp add agentation -- npx -y agentation-mcp server 或初始化向导。
    • 对服务命令和组件 endpoint 使用相同的自定义端口。
    • 如果 Agent 配置要求，请重启或重新连接 Agent。不要在已由正常运行的服务占用的端口上创建第二个 HTTP 服务。

  5. 验证完整连接

    • 运行 npx agentation-mcp doctor 进行服务诊断。对于自定义 URL，如果已安装版本支持，请使用 doctor --http-url <url>。
    • 打开应用，并通过工具栏创建一条标识清晰的测试批注。使用 agentation_get_all_pending 或会话范围的工具读取该批注。
    • 检查确切的测试评论和页面，而不只是非零计数或健康状态响应。不要改动无关批注。
    • 如果批注为空，请检查组件 endpoint、浏览器网络故障/CORS，以及 Agent 和浏览器是否指向同一服务。
    • 如果无法使用浏览器或 MCP 工具，请准确说明哪些部分仍未验证，并告知用户进行最后这项检查。不要声称实时同步正常。

说明

  • 开发环境保护机制会阻止工具栏在生产环境中显示。
  • Agentation 需要 React 18 或更高版本。
  • 安装工具栏不会安装、配置或连接 MCP 服务。
  • 支持手动复制模式，无需运行服务。

评论

支持 Markdown