mcpField
A
agentation

agentation

github.com/petekp设计与 UI4846 次安装2 天前更新
代码仓库

关于 agentation

agentation 是用于在 React 项目中配置 Agentation 标注工具栏的技能，涵盖安装与仅开发环境启用，并说明如何通过 MCP 将标注同步给编码 Agent。

主要功能

  1. 01检查依赖安装与项目配置
  2. 02配置仅在开发环境显示工具栏
  3. 03说明 MCP 设置与验证方式

适用场景

  1. 01在 React 项目中配置 Agentation
  2. 02让标注同步到编码 Agent

MCP 相关

该技能说明如何设置 agentation-mcp 服务，以便标注同步到编码 Agent，并列出获取待处理标注、解决标注和监听更新的工具。

安装

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

$npx skills add https://github.com/petekp/claude-code-setup --skill agentation

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

详细介绍

Agentation 设置

在此项目中设置 Agentation 标注工具栏。

步骤

  1. 检查是否已安装

    • 在 package.json 的依赖项中查找 agentation
    • 如果未找到，则运行 npm install agentation（或根据锁文件使用 pnpm/yarn）

  2. 检查是否已配置

    • 在 src/ 或 app/ 中搜索 <Agentation 或 import { Agentation }
    • 如果找到，请告知用户 Agentation 已设置，然后退出

  3. 检测框架

    • Next.js App Router：存在 app/layout.tsx 或 app/layout.js
    • Next.js Pages Router：存在 pages/_app.tsx 或 pages/_app.js

  4. 添加组件

    对于 Next.js App Router，将其添加到根布局：

    import { Agentation } from "agentation";

// Add inside the body, after children:
{process.env.NODE_ENV === "development" && <Agentation />}

    对于 Next.js Pages Router，将其添加到 _app：

    import { Agentation } from "agentation";

// Add after Component:
{process.env.NODE_ENV === "development" && <Agentation />}

  5. 确认组件设置

    • 告知用户 Agentation 工具栏组件已配置

  6. 建议设置 MCP 服务

    • 说明如需与 AI Agent 实时同步标注，还应设置 MCP 服务
    • 建议采用以下任一方式：
      • 通用方案（支持 9 种以上 Agent，包括 Claude Code、Cursor、Codex、Windsurf 等）： 查看 add-mcp — 运行 npx add-mcp，并按照提示将 agentation-mcp 添加为 MCP 服务
      • 仅适用于 Claude Code（交互式向导）： 安装软件包后运行 agentation-mcp init
    • 告知用户，设置 MCP 后需重启编码 Agent，以加载该服务
    • 说明配置完成后，标注将自动同步到 Agent

备注

  • NODE_ENV 检查可确保 Agentation 仅在开发环境中加载
  • Agentation 需要 React 18
  • MCP 服务的 HTTP 服务默认运行在端口 4747
  • MCP 服务提供 agentation_get_all_pending、agentation_resolve 和 agentation_watch_annotations 等工具
  • 安装后运行 agentation-mcp doctor，以验证设置

评论

支持 Markdown