Agentation

AgentationはUI要素に注釈を付け、コードを意識したAIエージェント向けの正確な指示を共有して、修正を高速化します。

Agentationとは？

Agentationは、UI上で要素に直接注釈を付け、そのフィードバックをAIエージェントと共有して、コードベース内の正確な対象を特定できるビジュアルフィードバックツールです。主な目的は、「ここを指す」フィードバックを、構造化された機械が実行可能な指示に変換し、エージェントが行動できるようにすることです。

プロジェクトファイルにアクセスできるAIコーディングツールで特に効果を発揮します。Agentationの出力にはセレクタ、ファイルパス、構造情報が含まれており、エージェントが正しい行やコンポーネントにたどり着くのを助けます。

主な機能

ページ上でのビジュアル注釈: ツールバーをアクティブにし、要素をクリックまたは選択して、画面上の特定対象に紐づく注釈を作成します。
エージェント向け要素ターゲティング: Agentationは要素パス、CSSセレクタ、ファイル位置の詳細を生成し、エージェントがどのUI要素を指しているか推測する必要をなくします。
より良い修正のためのコードベースコンテキスト: エージェントがコードベースにアクセスできる場合（例: Claude CodeやCursorなどのツール経由）、セレクタでgrep、ソースファイルパスで正しい行にジャンプ、Reactコンポーネントツリーで階層を理解、計算されたスタイルで要素の現在の外観を推測できます。
フォーマットされたMarkdown出力: フィードバックを追加後、フォーマットされたMarkdownをコピーしてエージェントの入力に貼り付けられます。
MCP統合サポート: MCPを使用するとコピー&ペーストを省略可能で、エージェントが注釈コンテキストを既に認識しています。「フィードバックに対応せよ」や「注釈3を修正せよ」などの指示でプロンプトできます。
注釈ライフサイクル制御: エージェントは既存のフィードバックをクエリ（例: 全ページの注釈一覧）でき、項目の却下や解決（例: 「全注釈をクリア」）などのアクションに応答します。

Agentationの使い方

注釈ツールバーをアクティブ化: Agentationインターフェース内で利用可能（デモページではツールバーがアクティブと記載）。
要素を特定するためにホバー: 要素にホバーすると名前がハイライトされます。
注釈を作成: 対象要素をクリックまたはテキストを選択（提供デモ要素など）して新しい注釈を作成し、フィードバックを入力します。
フィードバックを送信・共有: 注釈を追加し、フォーマットされたMarkdown出力をコピーしてエージェントに貼り付けます。
オプションでMCPを使用: MCP経由でエージェントが接続されている場合、手動コピー&ペーストを避け、特定注釈の対応や修正を依頼できます。

ユースケース

特定UI要素のバグ報告: 「間違った」ボタン状態やスタイリングを見かけたら、要素をホバーで特定し、期待値 vs 実際の状態を注釈して共有。セレクタ/パス情報でエージェントが関連コードを特定します。
タイポグラフィとスペーシングのフィードバック: パディングやサイズの問題で、正確なコンポーネント領域を注釈し、エージェントに代替案（例: 「24pxか16pxか」）を判断させて解決します。
テキスト/コンテンツ修正: ラベルやコピーの誤字に、正確なテキストを選択して簡潔なフィードバック（例: 「ボタンテキスト不明瞭」「コンテンツはXにせよ」）を追加。エージェントが特定UI文字列を対象にします。
アニメーションフレーム特化フィードバック: ツールバーでアニメーションを一時停止し、気になるフレームでビジュアル状態を注釈して、一時停止コンテキストに紐づくフィードバックを提供します。
チーム/複数ページフィードバック調整: エージェントに全ページの注釈一覧をリストさせ、1つずつ解決し、レビュー完了時にすべてクリアします。

FAQ

Agentationはエージェントにアプリの正しい部分を見つけさせるにはどう役立ちますか？
Agentationの出力にはCSSセレクタ、ソースファイルパス、Reactコンポーネント階層、計算済みスタイルが含まれるため、エージェントはgrepを実行し、正しい行に移動し、要素がどこにどのように適合するかを理解できます。

フィードバックをエージェントにコピー＆ペーストする必要がありますか？
常にではありません。ページではMCP統合により、コピー＆ペーストを省略できると記載されており、エージェントがすでに注釈コンテキストを見ているためです。

注釈にどのようなフィードバックを書くべきですか？
ページでは、具体的であること（例: 問題を明確に記述）、1つの注釈につき1つの問題を扱うこと、期待した結果と実際の結果についてのコンテキストを含めることを推奨しています。

エージェントは質問したり注釈に返信したりできますか？
はい。MCP統合とAnnotation Format Schemaにより、ページでは注釈のリスト表示、明確化の依頼、要約による解決、注釈の却下などのエージェントの相互作用が記述されています。

Agentationのライセンスモデルは何ですか？
Agentationは個人および企業による内部利用で無料です。販売する製品の一部としてAgentationを再配布する場合は、ページで商用ライセンスの連絡を勧めています。

代替案

インタラクティブなUIスクリーンショット/マークアップツール（人間レビュー workflow付き）: UIをキャプチャ・マークアップしてレビューするツールはフィードバック共有をサポートしますが、通常コードを意識したエージェント向けに構造化されたセレクタ/ファイルパスを生成しません。
トラッカー内のテキストベースの問題テンプレート（例: バグチケット）: バグトラッカーは期待結果と実際の動作を文書化しますが、説明に依存し、コードベース内の特定のUI要素パスをエージェントに直接指し示しません。
視覚注釈なしのエージェント対応コードナビゲーションツール: リポジトリを理解するコーディングアシスタントはフィードバックに基づいて動作しますが、注釈レイヤーなしではターゲットを間接的に記述する必要があります（例: コンポーネントを手動で命名）。