Agentation 开发工具安装指南：React 组件设置与 MCP 服务器配置教程

agentation by benjitaylor/agentation

6,300 周安装量

3,000 GitHub Stars

GitHub

安装命令

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

AI/机器学习开发生产力

🇨🇳中文介绍

Agentation 设置

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

步骤

检查是否已安装
- 在 package.json 的 dependencies 中查找 agentation
- 如果未找到，运行 npm install agentation（或根据 lockfile 使用 pnpm/yarn）
检查是否已配置
- 在 src/ 或 app/ 目录中搜索 <Agentation 或 import { Agentation }
- 如果找到，报告 Agentation 已设置完成并退出
检测框架
- Next.js App Router：存在 app/layout.tsx 或 app/layout.js

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

685,800 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

240,900 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

193,000 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

125,300 周安装

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

Next.js Pages Router：存在 pages/_app.tsx 或 pages/_app.js

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

     import { Agentation } from "agentation";
     
     // 在 body 内，children 之后添加：
     {process.env.NODE_ENV === "development" && <Agentation />}

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

     import { Agentation } from "agentation";
     
     // 在 Component 之后添加：
     {process.env.NODE_ENV === "development" && <Agentation />}

5. 确认组件设置

 * 告知用户 Agentation 工具栏组件已配置完成

6. 推荐 MCP 服务器设置

 * 说明为了与 AI 代理进行实时标注同步，还应设置 MCP 服务器
 * 推荐以下方法之一：
   * **通用（支持 9+ 种代理，包括 Claude Code、Cursor、Codex、Windsurf 等）：** 参见 [add-mcp](https://github.com/neondatabase/add-mcp) — 运行 `npx add-mcp` 并按照提示添加 `agentation-mcp` 作为 MCP 服务器
   * **仅限 Claude Code（交互式向导）：** 安装包后运行 `agentation-mcp init`
 * 告知用户在 MCP 设置完成后重启其编码代理以加载服务器
 * 说明一旦配置完成，标注将自动同步到代理

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

🇺🇸English

Agentation Setup

Set up the Agentation annotation toolbar in this project.

Steps

Check if already installed
- Look for agentation in package.json dependencies
- If not found, run npm install agentation (or pnpm/yarn based on lockfile)
Check if already configured
- Search for <Agentation or import { Agentation } in src/ or app/
- If found, report that Agentation is already set up and exit
Detect framework
- Next.js App Router: has app/layout.tsx or app/layout.js
- Next.js Pages Router: has pages/_app.tsx or pages/_app.js
Add the component

For Next.js App Router, add to the root layout:

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

For Next.js Pages Router, add to _app:

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

5. Confirm component setup

 * Tell the user the Agentation toolbar component is configured

6. Recommend MCP server setup

 * Explain that for real-time annotation syncing with AI agents, they should also set up the MCP server
 * Recommend one of the following approaches: 
   * **Universal (supports 9+ agents including Claude Code, Cursor, Codex, Windsurf, etc.):** See [add-mcp](https://github.com/neondatabase/add-mcp) — run `npx add-mcp` and follow the prompts to add `agentation-mcp` as an MCP server
   * **Claude Code only (interactive wizard):** Run `agentation-mcp init` after installing the package
 * Tell user to restart their coding agent after MCP setup to load the server
 * Explain that once configured, annotations will sync to the agent automatically

Notes

The NODE_ENV check ensures Agentation only loads in development
Agentation requires React 18
The MCP server runs on port 4747 by default for the HTTP server
MCP server exposes tools like agentation_get_all_pending, agentation_resolve, and agentation_watch_annotations
Run agentation-mcp doctor to verify setup after installing

Weekly Installs

5.5K

Repository

benjitaylor/agentation

GitHub Stars

2.8K

First Seen

Jan 22, 2026

Security Audits

Gen Agent Trust HubWarn SocketFail SnykPass

Installed on

claude-code4.7K

opencode4.4K

codex4.3K

gemini-cli4.2K

cursor3.8K

github-copilot3.4K