Agentation – AIコーディングエージェント向けビジュアルUI注釈ツール

Agentationは、AIコーディングエージェントのために設計されたビジュアルUI注釈ツールです。Webページ上でツールバーを起動し、要素をクリックすることで注釈を追加できます。各注釈には、CSSセレクタ、ソースファイルパス、Reactコンポーネントツリーの階層、現在の計算スタイルが自動的に含まれ、ユーザーのフィードバックと共に構造化されたMarkdown形式で出力されます。この出力はClaude CodeやCursorなどのAIエージェントに直接貼り付けることができます。

従来のように「サイドバーの青いボタン」と曖昧に記述する代わりに、Agentationは「.sidebar > button.primary」のような正確なセレクタを提供し、エージェントがコードベースを直接検索して問題を特定できるようにします。また、アニメーションの一時停止機能も備えており、特定のフレームを注釈するのに便利です。

さらに、MCP（Model Context Protocol）統合により、エージェントは注釈を読み取るだけでなく、ユーザーと対話できます。例えば、エージェントは未処理の注釈を一覧表示したり、「24pxか16pxのどちらですか？」と確認したり、修正後に「パディングを修正しました」と解決済みにしたり、すべての注釈を一度にクリアすることもできます。これにより、フィードバックは一方向の送信ではなく、協力的な対話へと変わります。

ベストプラクティスとして、Agentationは注釈ごとに1つの問題に絞り、期待と実際の差異を明確に記述することを推奨しています。誤字脱字などのコンテンツ問題にはテキスト選択を利用します。現在、Agentationは個人および企業内利用は無料ですが、製品として再配布する場合は商用ライセンスが必要です。また、MCPによるリアルタイム同期、外部サービスへのプッシュ、API統合などの高度な機能も提供されており、チームでのコラボレーションや自動化ワークフローに適しています。