Agentation favicon

Agentation

オープンサイト

Agentation - UIアノテーションをAIエージェント用の構造化データに変換するSEO最適化ツール

導入:

Agentationは、Webサイト上のUI要素への指示をAIが理解できる構造化コンテキストに変換する画期的なツールです。CSSセレクタ、Reactコンポーネントツリー、スタイル情報を自動抽出し、Claude CodeやCursorなどのAIエージェントへの指示を劇的に効率化します。MCP連携により、コピペ不要でリアルタイムな同期も可能です。個人および社内利用は無料で、直感的なビジュアルフィードバックを実現します。

追加日:

2026-03-29

月間訪問者数:

--K

コードとIT
Agentation - AI Tool Screenshot and Interface Preview

Agentation 製品情報

Agentation：UIアノテーションをAIエージェントの構造化コンテキストへ変換

Agentationは、WebサイトのUIアノテーションをAIコーディングエージェントが即座に理解し、実行できる構造化されたコンテキストへと変換する強力なツールです。開発者がブラウザ上で要素をクリックしてメモを残すだけで、その要素のCSSセレクタ、ファイルパス、Reactコンポーネントツリー、計算済みスタイルなどの詳細情報がパッケージ化されます。

Claude Code、Cursor、CodexといったAIツールを利用する際、「サイドバーにある青いボタン」といった曖昧な説明は不要になります。Agentationを使えば、.sidebar > button.primaryのような正確な情報をAIに提供でき、エージェントはソースコードを直接検索（grep）して修正箇所を特定できます。

Agentationとは（What's Agentation）

Agentationは、人間とAIエージェントの間のコミュニケーションギャップを埋めるためのインターフェースです。現在、バージョン v3.0.2 がリリースされており、開発現場でのビジュアルフィードバックを加速させます。

通常、AIに修正を依頼する場合、対象のコード箇所を特定させるのに時間がかかります。しかし、Agentationを使用すると、ブラウザ上の視覚的な操作がそのままAIへの詳細な指示書になります。特にMCP (Model Context Protocol) を活用することで、コピー＆ペーストの工程さえ省略し、エージェントに直接「アノテーション3を修正して」と伝えるだけで作業が完了します。

Agentationの主な機能（Features）

Agentationには、AIとの連携をスムーズにするための豊富な機能が搭載されています。

  • ビジュアルフィードバック: ブラウザ上で要素を直接クリックしてアノテーションを追加できます。
  • 高度なメタデータ抽出:
    • CSSセレクタ: コードベースを検索するための正確なパス。
    • ソースファイルパス: 修正すべきファイルへ直接ジャンプ可能。
    • Reactコンポーネントツリー: アプリケーションの階層構造を理解。
    • 計算済みスタイル: 現在の見た目（スタイル）をAIに共有。
  • MCP（Model Context Protocol）連携: エージェントとリアルタイムで同期し、双方向の対話を実現。
  • Webhooks & API: 外部サービスへのデータ送信や、カスタム統合の構築が可能。
  • アニメーションの一時停止: 特定のアニメーションフレームを固定して正確にアノテーションを付与。
  • スキーマ対応 (AFS 1.1): 標準化されたアノテーションフォーマットスキーマを採用。
  • 出力カスタマイズ: 標準出力、Reactコンポーネント情報の含めるかどうか、マーカーの色の変更などが設定可能。

Agentationの使用方法（How to Use）

Agentationの導入と使用手順は非常にシンプルです。

インストール

プロジェクトに導入するには、npmを使用します： npm install agentation

操作手順

  1. 起動: 画面右下にあるアイコンをクリックして、Agentationをアクティブにします。
  2. 選択: 要素の上にマウスを置くと、その要素名がハイライトされます。
  3. アノテーション: 任意の要素をクリックしてメモ（フィードバック）を入力し、「Add」をクリックします。
  4. エクスポート: アイコンをクリックして、フォーマットされたMarkdownをコピーします。
  5. 連携: コピーした内容をAIエージェント（Claude Code等）に貼り付けます。

Tips: MCPを使用している場合は、貼り付け作業は不要です。エージェントはすでにあなたが指し示している内容を把握しています。

活用シーン（Use Case）

  • デバッグとUI修正: 「このボタンのパディングを修正して」といった指示を、正確なセレクタと共にAIに送る。
  • デザインレビュー: チーム内でのフィードバックを構造化データとして残し、エージェントに一括解決させる。
  • コンテンツ更新: テキストを選択してアノテーションを追加し、タイポや文言の変更をAIに依頼する。
  • 複雑なコンポーネントの分析: Reactの階層構造をAIに伝え、リファクタリングのヒントを得る。

よくある質問（FAQ）

Q: Agentationは無料で使用できますか？ A: はい、個人利用および企業内での内部利用については無料です。独自のプロジェクトのデバッグやチーム内のフィードバックにご活用ください。製品の一部として再配布する場合は、商用ライセンスについてお問い合わせください。

Q: どのようなAIツールと互換性がありますか？ A: コードベースへのアクセス権を持つAIツール（Claude Code、Cursor、Codexなど）で最適に動作します。

Q: MCP連携のメリットは何ですか？ A: MCP（Model Context Protocol）を使用すると、エージェントが「どのアノテーションがあるか？」を自ら確認したり、修正完了を報告したりと、フィードバックが一方通行ではなく「会話」になります。

Q: 特定の瞬間のアニメーションにコメントをつけたいです。 A: ツールバーの停止ボタンをクリックすることで、アニメーションをフリーズさせて正確にアノテーションを追加できます。

Made by Benji Taylor, Dennis Jin, and Alex Vanderzon