agentation

Agentation 是一款與代理無關的視覺回饋工具，旨在縮小視覺化使用者介面開發與 AI 輔助編碼之間的差距。它允許開發人員透過直接在瀏覽器中點擊元素、拖曳選擇區域或醒目顯示文字來執行頁面標註。透過捕捉精確的 CSS 選擇器、類別名稱和元素位置，Agentation 讓 Claude Code、Cursor 或 Windsurf 等 AI 代理能精確理解開發人員所指的 DOM 部分，將模糊的自然語言描述替換為機器可讀的上下文。

• 視覺標註：點擊即可標註功能，並自動識別 CSS 選擇器和元素階層。

• 多模式選擇：支援文字選取、多元素選取和基於區域的標註，包含暫停動畫以捕捉特定狀態 UI 的功能。

• 即時同步：透過 MCP (Model Context Protocol) 伺服器整合，允許將標註從瀏覽器即時傳輸至 AI 編碼助手。

• 通用代理支援：透過 add-mcp 工具，相容於包括 Claude Code、Cursor、Codex 等廣泛的 AI 代理。

• 結構化資料輸出：產生基於 Markdown 的上下文，包含選擇器、座標和註解，確保 AI 代理能夠 grep 或定位與 UI 回饋相關的特定程式碼區塊。

• 開發者導向：針對 React 18+ 和 Next.js 優化，內建 NODE_ENV 檢查確保工具列僅在本地開發階段啟用。

• 安裝方式：使用 npm install agentation -D，並在開發環境保護下將 <Agentation /> 元件注入您的 Next.js 根佈局或 _app 檔案中。

• 若要獲得完整功能，應使用 npx add-mcp 初始化 Agentation MCP 伺服器，這會配置 HTTP 伺服器（預設連接埠 4747）來轉發標註。

• 該工具公開了一套強大的 MCP 工具集，包含 agentation_get_all_pending、agentation_resolve 和 agentation_watch_annotations，適用於複雜網頁專案的自動化狀態管理。

• 需使用桌面瀏覽器環境，不支援行動裝置上的標註工具列。

• 該系統提供高保真的回饋循環，能有效地將視覺 UI 錯誤和改進需求轉化為 AI 編碼代理可操作的程式碼層級任務。