mcpField
A
agentation

agentation

github.com/benjitaylorAgent 工作流5.1k13.7k 次安装5 周前更新
代码仓库

关于 agentation

用于在 React 项目中安装和配置 Agentation 工具栏的技能，并可按需通过 MCP 连接编码 Agent。它会检查批注是否真正到达 Agent，而不只依据服务健康状态判断。

主要功能

  1. 01检查项目配置与包管理器
  2. 02安装或复用 Agentation 组件
  3. 03按需配置 MCP 连接
  4. 04验证批注是否送达 Agent

适用场景

  1. 01在 React 项目中添加 Agentation
  2. 02将浏览器反馈连接到编码 Agent
  3. 03排查批注未送达的问题

MCP 相关

按需配置 agentation-mcp 服务连接，并验证 Agent 能否读取测试批注。也支持无需连接服务的手动复制模式。

安装

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

$npx skills add https://github.com/benjitaylor/agentation --skill agentation

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

详细介绍

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