AIコーディングツールにUI修正を依頼するとき、どの要素を直したいのか伝えるのに苦労した経験はないでしょうか。

「サイドバーの青いボタンを暗くして」と伝えても、エージェントが別の要素を修正する——このすれ違いは、AIの能力の問題ではなく「文脈の問題」です。Agentationは、この問題を視覚的なアノテーションで解決するReact向け開発ツールです。

この記事でわかること：

  • Claude CodeやCursorへのUI指示がなぜ伝わりにくいのか
  • Agentationで何が変わるのか
  • インストールから使い始めるまでの手順
  • MCP連携でコピー&ペーストをなくす方法
  • 料金と使用条件

https://www.agentation.com/

言葉でUIを説明する限界

AIエージェントへのUI修正依頼は、通常2つの方法に頼ります。

1つはスクリーンショット＋テキスト説明。エージェントはピクセルからコンポーネントを推測しなければならず、正確に伝わるかは運次第です。もう1つは純粋なテキスト説明。「HeaderコンポーネントのSubmitボタン」と書いても、同名のボタンが複数あれば的外れな修正が起きます。

根本的な問題は、開発者がブラウザで見ている要素と、コードベースのどこにその要素があるかを結びつける手段がないことです。

Agentationはこの橋渡しを担います。

Agentationとは

AgentationはReact 18以上に対応したnpmパッケージです。アプリ内にアノテーション用のツールバーを追加し、要素をクリックするだけでAIが必要とする構造情報を自動生成します。

出力されるMarkdownには次の情報が含まれます。

  • CSSセレクター（.sidebar > button.primaryなど）
  • クラス名と要素の位置（x/y/幅/高さ）
  • テキストコンテンツ
  • DOM構造のコンテキスト
  • 任意で計算済みスタイル

「青いボタン」という曖昧な説明の代わりに、AIは.sidebar > button.primaryというセレクターを受け取り、コードベースを直接grepできます。

2026年5月時点でGitHubスター数1,800以上、npmインストール数は数十万件に達しています。

主な機能

4段階の出力モード

用途に応じて情報量を調整できます。

  • Compact: セレクターとメモのみ。軽量で素早い確認向き
  • Standard: クラス名と位置情報も含む標準的な出力
  • Detailed: 計算済みスタイルまで含む詳細出力
  • Forensic: 内部コンポーネントを含むすべての情報

Reactコンポーネント検出

バージョン2.0で追加された機能です。要素にカーソルを当てると、DOMセレクターだけでなく、実際のコンポーネントの階層（ProductCard > CheckoutButtonなど）を表示します。生成されたクラス名ではなく、コードで使っている名前でAIが検索できるため、大規模なコードベースでも修正対象のファイルへ素早くたどり着けます。

アニメーションの一時停止

CSSトランジションやJavaScriptアニメーションを途中で止めて、特定フレームの状態にアノテーションを付けられます。「ホバー時の色が微妙に違う」といった一瞬しか現れない問題も、正確にAIへ伝えられます。

テキスト・エリア選択

テキストを選択してアノテーションを付けると、タイポや文章の修正を正確に指示できます。空白領域をドラッグしてスペーシングの問題を指摘することも可能です。

インストールと使い始め方

開発依存として追加します。

npm install agentation -D
# または
pnpm add agentation -D

Next.js App Router（app/layout.tsx）への組み込み例です。

import { Agentation } from 'agentation';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        {process.env.NODE_ENV === "development" && <Agentation />}
      </body>
    </html>
  );
}

process.env.NODE_ENV === "development" の条件で囲むことで、本番環境にツールバーが出ることはありません。

開発サーバーを起動すると、画面の隅にドラッグ可能なツールバーが現れます。アノテーションモードを有効化して要素をクリック→メモを追加→生成されたMarkdownをClaude CodeやCursorに貼り付けるだけで使えます。

MCP連携でコピー&ペーストをなくす

バージョン2.0の最大の変更点がMCP（Model Context Protocol）対応です。エージェントがアノテーションをリアルタイムで直接読み取れるため、コピー&ペーストの手間がなくなります。

npm install agentation-mcp
npx agentation-mcp init
npx agentation-mcp server

Claude Codeと連携するには、設定ファイルに以下を追加します。

// ~/.claude/settings.json
{
  "mcpServers": {
    "agentation": {
      "command": "npx",
      "args": ["agentation-mcp", "server"]
    }
  }
}

設定後のワークフローはこのようになります。

あなた: 「アノテーションは何件ある？」
エージェント: 「3件あります。/checkoutのボタン、/settingsのコントラスト、/aboutのタイポです」
あなた: 「ボタンを直して」
エージェント: 「フォームに合わせて左寄せか中央寄せか、どちらにしますか？」
あなた: 「中央」
エージェント: 「完了しました。解決済みにしました」

エージェントがアノテーションを見て、質問し、完了報告まで行う対話型のフローが実現します。

ステータス管理も備わっており、エージェントが作業中のアノテーションを「acknowledged」、完了したものを「resolved」に変更します。すべての状態変化にタイムスタンプが記録されるため、何がどこまで進んでいるかを把握できます。

Claude Code用のスキルを使うと、フレームワーク自動検出からコンポーネントのマウントまで一括でセットアップできます。

npx skills add benjitaylor/agentation

Webhookで既存ツールへ連携

AgentationのアノテーションイベントをWebhookで外部サービスへ送信できます。想定される活用例を挙げます。

  • GitHub Issues: アノテーションを自動でIssue化し、GitHub ActionsでClaude Codeに修正させる
  • Slack: 重要度「blocking」のアノテーションをチャンネルへ通知する
  • Linear: コンポーネントパスをチケットに自動入力してタスク化する

料金

個人利用・社内利用は無料です。Agentationを自社製品の一部として再配布する場合のみ、商用ライセンスが必要になります。

React 18以上が必要で、デスクトップブラウザのみ対応しています。AIエージェントがコードベースにアクセスできる環境（Claude Code、Cursor、Windsurfなど）と組み合わせて使う前提のツールです。

まとめ

AgentationはAIコーディングツールを使うすべてのReact開発者が直面する「どの要素を直したいか伝える問題」を解消します。コードを生成するわけでも、エージェントを置き換えるわけでもありません。AIへの入力品質を上げることに特化した、目的が明確なツールです。

Claude CodeやCursorでフロントエンドのUI調整を繰り返しているなら、試す価値は十分あります。セットアップは数分で完了し、アノテーションひとつ試すだけで効果を実感できます。