benjitaylor/agentation

解決する課題

Agentationは、AIコーディングエージェントに対して特定のUI要素を説明する際の困難を解決します。「サイドバーにある青いボタン」のような曖昧な説明を使う代わりに、ユーザーがページ上の要素を視覚的に注釈付けし、エージェントに正確な技術的識別子（CSSセレクターなど）を提供することで、その要素を担当する正確なコードをエージェントが見つけられるようにします。

仕組み

これはReactコンポーネントであり、アプリケーションに視覚的フィードバックツールバーを追加します。ユーザーがページ上の領域をクリックまたは選択すると、ツールは要素のクラス名、セレクター、位置をキャプチャします。このデータは構造化されたmarkdown出力に変換され、AIツールにコピー＆ペーストしたり、MCP (Model Context Protocol) サーバーを介してエージェントに直接同期したりできます。

対象ユーザー

AIコーディングエージェント（Claude Code、Codex、Gemini、Grokなど）を使用しており、開発プロセス中にAIアシスタントに対して正確な視覚的フィードバックとコンテキストを提供したい開発者。

ハイライト

• 正確な選択: 個々の要素のクリック、テキスト選択、複数選択、ドラッグによる特定領域の定義をサポート。
• エージェント統合: コピー＆ペースト、またはMCPサーバーを介した直接的なリアルタイム同期により、あらゆるAIツールと連携可能。
• 状態キャプチャ: CSSアニメーション、Web Animations、動画を一時停止して、特定の視覚状態をキャプチャ可能。
• 深いアクセス: shadow rootsや同一オリジンのiframes内の要素を選択可能。
• 軽量: React 18+ 以外のランタイム依存関係はゼロ。