Agentationは、フロントエンド開発者向けに設計された軽量な支援ツールで、以下のようなAIプログラミング・アシスタントと人間の対話の問題を解決する。 Claude コード、カーソル、ウィンドサーフ、AIの間でUIの問題を伝達する際の「コンテキストの欠落」という問題は、従来の開発プロセスにおける大きな問題です。従来の開発プロセスでは、開発者がウェブページのスタイリングエラーやインタラクションのバグを発見したとき、コードベース内の要素の正確な位置を自然言語でAIに正確に説明することは困難なことがよくあります。Agentationは、“what you see is what you get ”の原則に従い、ユーザーがウェブページ上の要素をクリックして注釈を付けることを可能にし、コンポーネントのクラス名、セレクタ、階層的な位置を自動的にキャプチャし、これらの技術的な詳細とユーザーの修正を構造化されたMarkdownフォーマットにまとめます。ユーザーはこの情報をAIにコピーするだけで、AIは正確な位置情報を使ってコードベース内のソースファイルに素早くインデックスを付け、修正する。このツールは現在 React 特定のAIモデルとは完全に独立しており、テキストを読むことができるAIエージェントであれば、どのようなAIエージェントでも使用することができます。
機能一覧
- 視覚的要素のラベリングDOM要素（ボタン、カード、テキスト段落など）を直接選択できます。
- 技術パラメータの自動抽出要素が選択されると、ツールは自動的に要素のCSSクラス名、ID、階層パス（セレクタ）、およびその他の主要な位置情報を取得します。
- 構造化されたフィードバックの生成選択された要素にカスタムテキストの説明（例：“色を変更”、“間隔を修正”）を追加し、ワンクリックで技術的なコンテキストを含むMarkdownテキストを生成できるようになりました。
- アニメーションの一時停止デバッグ: ダイナミックなエフェクトやフレーム固有のUI問題をキャプチャしてラベリングするための「アニメーションの一時停止」機能を提供します。
- テキストの正確な配置エラー訂正のためにウェブページ内の特定のテキスト段落を直接選択することをサポートし、AIはテキストが配置されているコンポーネントの位置を素早く特定することができます。
- クロスプラットフォームの互換性生成された出力は標準的なMarkdownフォーマットで、Claude Code、Cursor、Windsurf、または文脈入力をサポートするLLMプログラミングツールをシームレスにサポートします。
ヘルプの使用
Agentationの中核となる設計コンセプトは、「軽量」と「シームレスな統合」であり、主に開発環境に統合されたReactコンポーネントの形で、複雑なバックグラウンド設定を必要としません。以下は、Agentationの使用方法に関する詳細なガイドです：
1.アクティベーションと活性化
Agentationは、現在デスクトップのブラウザ環境を対象としています。Agentationを統合するプロジェクト（通常は開発環境）では、Webページの右下にツールアイコンが表示されます。
- アクティベーションツール: 画面右下のAgentationアイコンをクリックするか、ショートカットキー（設定されている場合）を使用して注釈モードを起動します。この時点で、マウスを動かすと、ページ上の各HTML要素（例えば
<div>、<button>、<p>)が強調表示され、選択可能な状態であることを示す。
2.ターゲット・エレメントのラベリング
ページプレビューで変更が必要な箇所を見つけた場合（ボタンの色が間違っている、テキストの段落が正しく入力されていないなど）：
- エレメントの選択対象の要素にカーソルを合わせ、左ボタンをクリックすると「ロック」されます。
- フィードバックを追加クリックすると、入力ボックスがポップアップします。このボタンの角丸は8pxにする」「このカードをクリックしても反応しない」など、要素への変更を入力してください。
- マルチポイント注釈ページ上のさまざまな場所を連続してクリックすることで、複数の修正要求を一度に集めることができます。例えば、ナビゲーションバーの高さの問題とフッターのリンクエラーを同時に指摘することができます。
3.ダイナミックコンテンツの取り扱い
複雑なアニメーションやトランジションを含むページでは、特定のステートをキャプチャするのは難しいことが多い。
- アニメーションを一時停止するAgentationのツールバーにある “一時停止 ”アイコン（通常はフリーズシンボル）をクリックします。これにより、ページ上のCSSアニメーションとJSレンダリングループが強制的に停止され、ページは現在のフレームのままになります。
- 正確なマーキング静的なページでありながら、通常は点滅する動的な要素を注釈のために選択することができます。
4.コンテキストの生成とエクスポート
すべての質問のラベル付けが終わったら、この情報をAIに渡す必要がある：
- レポートの作成ツールバーの “コピー ”または “エクスポート ”ボタンをクリックします。
.sidebar > .nav-actions > button.primary)と入力したメモを、明確な書式のMarkdownテキストに変換します。 - コンテンツプレビュー生成されたテキストには、自然言語による記述だけでなく、機械可読のコードロケータも含まれています。これが、AIが正確にファイルを見つける能力の鍵です。
5.AI修正コードの運転
最後のステップは、AIプログラミング・アシスタントを接続することだ：
- 貼り付けコマンド使用しているAIツールを開く（例 Cursor チャット・ウィンドウ Claude Code (ターミナル・インターフェース）を開き、コピーしたテキストを貼り付ける。
- 修正の実行AIが情報を受け取ると、「あの青いボタン」がどのファイルかを推測する必要がなくなり、クラス名とセレクタでコードベースを直接グローバル検索（Grep）し、対応するReactコンポーネントやCSSファイルを素早く見つけ、あなたのフィードバックに基づいて修正コードを生成します。
アプリケーションシナリオ
- UIスタイルの微調整
フロントエンド開発者は、しばしばコンポーネントのパディング、マージン、または色を調整する必要があります。Agentationを使用すると、開発者はコンポーネントの対応するCSSファイル名を手動で検索する必要がありません。ブラウザでコンポーネントをクリックし、「パディングを20pxに増加」とメモするだけで、AIは修正のためにスタイルファイルを直接見つけることができます。 - 複雑なコンポーネントのバグ修正
非常に深いReactコンポーネントツリー（サイドバーにネストされたモーダル内のボタンなど）では、手作業でソースファイルを検索するのは時間がかかることがあります。 - コピーライティングコンテンツの一括校正
ウェブページに複数のスペルミスがある場合、開発環境でこのツールを使用する非技術者（例えば、プロダクトマネージャーやデザイナー）は、間違ったテキストを直接選択し、正しいコピーを入力することができ、生成されたフィードバックは置き換えのために直接AIに渡されるため、口頭でのコミュニケーションにおける曖昧さを避けることができる。
QA
- Q: Agentationは、バックエンドサービスのサポートを必要としますか？
A: 必要ありません。これは純粋なフロントエンドツールであり、通常、バックエンドの依存関係がなく、すべてのデータ処理がブラウザのローカルで行われるReactコンポーネントとしてプロジェクトに導入されます。 - Q: Reactプロジェクトにしか対応していないのですか？
A: 公式ドキュメントでは主にReact環境の利用が示されているが、コアとなるロジック（DOM選択やパス生成）は共通している。ただし、npmパッケージとして導入される場合は、主にReactエコシステムに適応されます。 - Q: 生成されたフィードバックがなぜAIの仕事をより良くするのですか？
A: 大型モデル（LLM）は賢いですが、あなたの画面を見ることはできません。従来の「右上のボタンを修正せよ」というプロンプトは非常に曖昧です。.header-right .login-btnこのようなコードの正確な特徴づけによって、AIは次のような使い方ができるようになる。grepコマンドでコードベースを直接検索できるため、「錯覚」や当て推量を排除できる。 - Q：このツールに料金はかかりますか？
A: このツールは現在、AI支援プログラミングのワークフロー体験を最適化することを主な目的として、オープンソースまたは無償の開発ツールとして存在しています。
