agentation

Agentation 設定

在此專案中設定 Agentation 註解工具列。

步驟

1. 檢查是否已安裝

   • 在 package.json 的 dependencies 中尋找 agentation
   • 若未找到，執行 npm install agentation（或根據 lockfile 使用 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";
   
   // 在 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 — 執行 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 驗證設定