Agentation
Benji Taylor · コーディング
Agentationは、UI注釈をAIコーディングエージェント向けの構造化されたコンテキストに変えるデスクトップ向けのビジュアルフィードバックツールだ。壊れたボタンを言葉で説明する代わりに、そのボタンをクリックし、メモを打ち込み、CSSセレクター、ソースファイルのパス、あなたの意図、そしてその要素の実際のReactコンポーネントツリーを含むmarkdownブロックをコピーする。そのブロックをClaude、Codex、Gemini、あるいはコードを読める任意のエージェントに渡せば、どの要素を指しているのかを正確に理解する。
Agentation について
Agentationとは
Agentationは、実行中のアプリとAIコーディングアシスタントの間に挟まる、エージェント非依存のフィードバック層だ。Reactアプリに小さなツールバーを取り付け、要素にホバーして名前を確認し、任意の要素をクリックしてコメントを付ける。あとはツールがすべてをmarkdownに整え、それをエージェントとのチャットに貼り付ける。
解決する問題ははっきりしている。「サイドバーの青いボタンの見た目がおかしい」とエージェントに伝えると、どの要素を指しているのかを推測しなければならず、推測を外すたびに往復が一回無駄になる。Agentationはその推測を、.sidebar > button.primary、ソースファイル、Reactコンポーネントツリーという確かな識別子に置き換える。エージェントは色を探すのではなく、コードをgrepする。推測は要らない。
最大の難点は、Agentationが今のところデスクトップ専用だという点だ。モバイルアプリも、スマートフォンからのワークフローもなく、作業場所がタブレットならそこから注釈を付ける手段もない。またReactプロジェクトを優先して対象にする。コンポーネントツリーとセレクターの出力がその構成を前提にしているからだ。
はじめかた
npm install agentation（または好みのパッケージマネージャー）でパッケージをインストールし、Agentationコンポーネントをアプリに追加する。- ページ右下のアイコンからツールバーを開く。
- 要素にホバーして名前を確認し、要素をクリックして注釈のポップアップを開く。
- フィードバックを書き、意図と優先度を選び、Addをクリックする。
- 整形されたmarkdownをコピーし、AIコーディングエージェントに貼り付ける。
AIツール情報
Agentationの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- AIコーディングエージェントを使うフロントエンド開発者。プロジェクトがデスクトップブラウザで動いていれば、出力はメモを実際のセレクターとファイルパスに対応付ける。
- ライブビルドにフィードバックするプロダクトデザイナー。説明する代わりに正確な要素を指せる。ただし先にアプリへツールバーを取り付けておく必要がある。
- 社内QAを行う小さなエンジニアリングチーム。ローカルのNode.jsプロセスを動かすことを許容するなら、MCPサーバー経由で注釈を解決・確認できる。
タスク
- UI注釈のワークフローでスタイルのバグを報告する。要素を注釈し、期待した見た目と実際の見た目を書き添える。
- 誤字を指摘する。エージェントが正しい文字列を編集できるよう、正確なテキストを選択する。
- アニメーションを確認する。まずフレームを止めてから注釈する。
- デザイン判断の明確化をエージェントに求める。注釈に紐づいたままの追加質問を送る。
シーン
- 別ウィンドウでClaude CodeやCodexを開きながらReactアプリを反復開発する。
- ファイルは分かるが行は分からない、自分のプロジェクトをデバッグする。
- 新機能ブランチがQAに届く前に、開発者向けフィードバックツールとして試す。デザインとエンジニアリングのメモが、エージェントがすでに理解している同じ構造化フォーマットに収まる。
- フィードバックを人間のチケットではなくエージェントに届ける必要があるデザインレビューを行う。
主な機能
要素を認識する注釈
要素をクリックすると、Agentationはそれが実際に何であるかを捉える。CSSセレクター、ソースファイルのパス、Reactコンポーネント階層、計算済みスタイルだ。あなたの書いたメモはその技術的コンテキストと一緒に運ばれる。結果として、エージェントは説明を解釈するのではなく、直接動けるフィードバックを得る。クリック一回で多くのことが済む。
あらゆるエージェント向けのmarkdown出力
ツールは整形されたmarkdownブロックをコピーする。Claude、Codex、Gemini、Grok、あるいはコードにアクセスできる任意のエージェントで動く。設計上エージェント非依存なので、特定のアシスタントに縛られない。チャットに貼ればいい。エージェントはセレクターをgrepするか、ソース行へ直接飛べる。
双方向フィードバックのMCP連携
agentation-mcpサーバーを入れると、エージェントは注釈を読むだけでは済まない。未処理のフィードバックを一覧し、確認の質問を投げ、問題を解決済みにできる。追加メッセージと解決状態は元の注釈に紐づいたままなので、長いやり取りがチャット履歴に散らばらず読みやすく保たれる。レビューが十数項目を超えると、これが効いてくる。
注釈の意図と優先度
各メモには意図と優先度のフィールドがあり、いちいち説明しなくても、エージェントは阻害要因とあると嬉しい程度のものを区別できる。注釈一つにつき問題一つを書くので、混ざった苦情の濃い段落をほどくのではなく、エージェントは項目ごとに対処しやすい。
アニメーションの一時停止
ツールバーからアニメーションを凍結し、特定のフレームに注釈を付けられる。「スライドする部分だけど、始まったばかりのところではない」を文章で説明したい人はいない。小さな機能だが、時間の節約は大きい。
Webhookと外部配信
サーバーのWebhookは注釈を外部サービスへ送り、ネットワーク障害、タイムアウト、HTTP 429や5xxの応答で再試行する。再試行は同じ配信IDを保つので、受け取り側は重複排除できる。配信はベストエフォートで、サーバーの再起動は乗り越えられない。頼る前に知っておく価値がある。
メリットとデメリット
メリット
- 曖昧な説明を具体的なセレクターとファイルパスに置き換え、どの要素を指すかをエージェントに伝える往復を削る。
- 単一のアシスタントに縛らず、Claude、Codex、Gemini、Grokで動く。
- 個人および社内利用は無料なので、試すのに課金の壁がない。
- MCP対応により、エージェントはメモを受け取るだけでなく、質問し問題を閉じられる。
デメリット
- デスクトップ専用なので、スマートフォンやタブレットから注釈できない。
- React優先のコンポーネントツリー出力はReactコードベースを前提にし、他のフロントエンドスタックでは制約になる。
- MCPのワークフローはローカルでのNode.js実行を要し、ツールバーだけ欲しいチームには設定の手間が増える。
- 社内プロジェクト以外の商用利用には有償ライセンスが必要なので、販売する製品に組み込む前に確認が要る。
よくある質問
実行中のウェブアプリでUI要素に注釈を付け、そのメモをAIコーディングエージェント向けの構造化markdownに変える。出力には要素のセレクター、ソースファイルのパス、あなたのフィードバックが含まれ、エージェントはコード内の正確な場所を見つけられる。
関連コンテンツ
Agentationに関連するツール、スキル、記事を探す。
Agentationの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。