Agentation
Agentationは、エージェントに依存しない視覚的なフィードバックツールであり、開発者はUI要素にアノテーションを付け、AIコーディングエージェントが理解して対応するための構造化されたコンテキストを生成できます。
https://www.agentation.com/?ref=producthunt&utm_source=aipure
製品情報
更新日:2026年03月31日
Agentationとは
Agentationは、デザインフィードバックとコード変更のギャップを埋めるデスクトップベースの開発者ツールです。開発者は、要素をクリックし、メモを追加し、AIコーディングエージェントがすぐに理解できる構造化された出力を生成することにより、ユーザーインターフェースを視覚的に操作できます。このツールは開発者コミュニティで大きな支持を得ており、1.8k以上のGitHubスターとnpm経由での数十万のインストールがあり、開発者がUIでAIを使用する方法の不可欠な部分になっています。
Agentationの主な機能
Agentationは、開発者がWebアプリケーションでUI要素に直接注釈を付け、AIコーディングエージェント向けに構造化された出力を生成できる、視覚的なフィードバックツールです。ユーザーは、あいまいなテキストの説明を使用する代わりに、要素をクリックし、メモを追加し、正確なセレクター、位置、およびコンテキストメタデータをキャプチャできます。このツールは、Claude CodeやCodexなどのさまざまなAIコーディングエージェントと統合されており、フィードバックからコードへの実装プロセスをより効率的にします。
視覚的要素の選択: 特定のUI要素を選択するためのクリックおよびホバー機能。CSSセレクター、コンポーネント階層、および計算されたスタイルを自動的にキャプチャします。
アニメーション一時停止機能: アニメーションをフリーズして、通常は数ミリ秒で消えてしまう特定のフレームに関するフィードバックをキャプチャする機能。
エージェント統合: MCP統合によるAIエージェントとの双方向通信。エージェントはフィードバックを直接認識、質問、または解決できます。
構造化された出力の生成: 正確な要素識別子を含むマークダウン形式の出力を自動的に生成し、AIエージェントが正確なコード参照を簡単に見つけられるようにします。
Agentationのユースケース
フロントエンド開発の反復: 開発者は、変更が必要な特定の要素について、AIコーディングエージェントに正確なフィードバックを提供することで、UIの変更を迅速に反復できます。
UIバグレポート: チームは、正確な要素参照を使用してUIの問題を報告できるため、AIエージェントまたは開発者が問題を特定して修正することが容易になります。
デザイン実装レビュー: デザイナーは、調整が必要なコンポーネントを正確に注釈することで、実装されたUI要素に関する具体的なフィードバックを提供できます。
メリット
スムーズなインストールプロセス
正確な要素識別システム
複数のAIツールをサポートするエージェントに依存しない設計
デメリット
デスクトップのみの制限
プロジェクトごとのインストールが必要
開発環境での使用に限定
Agentationの使い方
Agentationをインストール: npm経由でパッケージをインストールします: npm install agentation
React/Next.jsプロジェクトに追加: Agentationコンポーネントをインポートしてアプリのルートに追加します: import { Agentation } from 'agentation'; function App() { return (<> <YourApp /> <Agentation /> </>) }
開発環境チェックを追加: NODE_ENVチェックを追加して、Agentationが開発環境でのみロードされるようにします: {process.env.NODE_ENV === 'development' && <Agentation />}
開発サーバーを起動: 開発サーバーを実行し、右下隅にあるAgentationツールバー（フローティングボタン）を探します
アノテーションモードをアクティブ化: 右下隅にあるスパークルアイコンをクリックして、アノテーションツールバーをアクティブ化します
要素にカーソルを合わせる: UI要素にカーソルを合わせると、要素名がハイライト表示されます
クリックしてアノテーション: フィードバックを提供したい要素をクリックします
フィードバックを追加: アノテーションポップアップにフィードバックを書き込み、「追加」をクリックします
フォーマットされた出力をコピー: コピーボタンをクリックして、セレクター、位置、コンテキストを含む構造化されたマークダウン出力を取得します
AIツールで使用: コピーした出力をClaude Code、Codex、またはその他のAIコーディングエージェントなどのAIツールに貼り付けて、支援を受けます
オプション: MCP統合を設定: 直接エージェント統合の場合は、'npx add-mcp'を実行し、プロンプトに従ってagentation-mcpをMCPサーバーとして追加し、コピーアンドペーストの手順をスキップします
Agentationのよくある質問
Agentation\u306f\u3001Web\u30da\u30fc\u30b8\u306b\u30a2\u30ce\u30c6\u30fc\u30b7\u30e7\u30f3\u3092\u8ffd\u52a0\u3057\u3001AI\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u5411\u3051\u306b\u69cb\u9020\u5316\されたフィードバックを生成するフローティングツールバーです\u3002\u30e6\u30fc\u30b6\u30fc\u306f\u3001\u8981\u7d20\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u30c6\u30ad\u30b9\u30c8\u3092\u9078\u629e\u3057\u3001\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u304c\u30d1\u30fc\u30b9\u3057\u3066\u30b3\u30fc\u30c9\u306e\u554f\u984c\u3092\u898b\u3064\u3051\u3066\u4fee\u6b63\u3067\u304d\u308b\u30de\u30fc\u30af\u30c0\u30a6\u30f3\u3092\u30b3\u30d4\u30fc\u3067\u304d\u307e\u3059\u3002
Agentationに類似した最新のAIツール
Gait
Gaitは、AI支援コード生成とバージョン管理を統合するコラボレーションツールであり、チームがAI生成コードのコンテキストを効率的に追跡、理解、共有できるようにします
invoices.dev
invoices.devは、開発者のGitコミットから直接請求書を生成する自動請求プラットフォームで、GitHub、Slack、Linear、Googleサービスとの統合機能を備えています。
EasyRFP
EasyRFPは、RFP（提案依頼）の応答を効率化し、深層学習技術を通じてリアルタイムのフィールド表現型を可能にするAI駆動のエッジコンピューティングツールキットです
Cart.ai
Cart.aiは、コーディング、顧客関係管理、ビデオ編集、eコマースの設定、カスタムAI開発を含む包括的なビジネス自動化ソリューションを提供するAI駆動のサービスプラットフォームで、24時間365日のサポートがあります
Agentationに似た人気のAIツール
GitHub Copilot Chat
GitHub Copilot Chatは、自然言語の対話、リアルタイムのコード提案、そしてサポートされているIDEおよびGitHub.com内での文脈に応じた支援を提供するAI駆動のコーディングアシスタントです
CopilotForXcode
CopilotForXcodeは、Xcode内でAI駆動のコード提案、チャット支援、プロンプトからコードへの機能を提供するXcodeソースエディタ拡張機能です。
BrowserAI
BrowserAI is an open-source library that enables running local Large Language Models (LLMs) directly in web browsers with WebGPU acceleration, offering privacy-focused AI capabilities without requiring server infrastructure.
OpenAI Codex CLI
OpenAI Codex CLIは、ターミナルで実行される軽量なオープンソースのコーディングエージェントであり、開発者は自然言語をコード実行に変換し、コードを実行し、ファイルを操作し、バージョン管理下で反復処理できるChatGPTレベルの推論を提供します。