Skip to main content

agentation

AIコーディングエージェントに対して、UI修正箇所を視覚的かつ正確に伝えるためのツールである。

ブラウザ上で要素をクリックするだけで、CSSセレクタやDOM情報を自動取得し、「あのボタン」という曖昧な指示を正確な構造化データに変換する。

主な機能​

agentationは、ブラウザ上での「ポインティング（指差し）」を構造化データに変換することで、AIとのコミュニケーションを改善する。

セレクタの自動キャプチャ​

修正したい要素をクリックするだけで、クラス名、CSSセレクタ、DOM内の位置を自動的にキャプチャする。

「サイドバーの青いボタン」という曖昧な表現が、.sidebar > button.primaryといった正確なセレクタに置き換えられる。

4つのキャプチャモード​

指示の内容に応じて、出力モードを選択できる。

  • Compact: セレクタとメモのみ（単純な修正向け）
  • Standard: セレクタ + 要素の位置情報 + 選択テキスト
  • Detailed: バウンディングボックス + 周囲のコンテキスト（レイアウト調整向け）
  • Forensic: 計算されたスタイル（Computed Styles）を含むすべての情報（CSS競合のデバッグ向け）

特殊なフィードバック機能​

  • テキスト選択: タイポ修正時に、該当テキストを選択するだけでAIに正確な文字列を共有
  • エリア選択: 要素が存在しない空きスペースを指定して、レイアウトのフィードバックが可能
  • アニメーションの一時停止: CSSアニメーションを任意のタイミングでフリーズさせ、特定の瞬間に対するフィードバックを実現

導入による効果​

  • フィードバックループの高速化:「指示→場所の間違い→再指示」という無駄な往復を削減
  • 説明コストの削減: クリックと一言メモだけで、十分な情報をAIに伝達
  • 作業精度の向上: 正確なコンテキストにより、AIがより適切なコード変更を実施

技術要件​

  • React 18以降に対応
  • React環境への導入が必要

関連ガイド​

agentationで取得したセレクタに対してAIに指示する際は、以下のガイドラインを参照することで、より高品質な実装が期待できる。

参考リンク​

Last updated on