Agentation - AIを活用した共同プログラミングツール。フィードバックを視覚化し、質問をコードに変換します。 - AiBoss

エージェント業務とは何ですか？

Agentationは、開発者とAIプログラミングアシスタント間の非効率的なコミュニケーションという問題を解決するオープンソースのAIプログラミングコラボレーションツールです。このツールを使用すると、ユーザーはWebページ上の問題を直接注釈付けでき、視覚的なフィードバックをコードで読み取れる情報に変換し、AIが使用できる構造化されたMarkdownテキストを生成します。Agentationは問題記述プロセスを簡素化し、開発者のテキストによる説明の曖昧さを回避し、AIがコード修正タスクをより効率的に完了できるようにします。

エージェントの主な機能

視覚的注釈ユーザーはウェブページ上の要素を直接クリックしてメモを追加し、問題点を明確に指摘することができます。
情報取得要素のCSSセレクタ、クラス名、位置座標、コンテキスト情報を自動的に取得することで、正確な位置決めを保証します。
構造化されたフィードバックを生成する注釈情報はMarkdown形式で整理されているため、開発者は簡単にコピーしてAIプログラミングアシスタントに渡すことができます。
効率的なコード修正AIはMarkdown内の要素情報を解析することで、コード内の対応する位置を迅速に特定し、変更することができる。
開発環境の統合これはReactプラグインとしてローカル開発環境に組み込むことができ、開発モードでのみ実行され、本番環境には影響を与えません。

Agentationの使い方

インストールツールReactプロジェクトでは、 npm、yarn、pnpm または bun Agentationの依存パッケージをインストールしてください。
統合コンポーネントAgentationコンポーネントをReactアプリケーションのルートコンポーネントに埋め込み、開発モードでのみ有効になるように設定してください。
プロジェクトを開始するローカル開発サーバーを起動し、開発環境にアクセスします（例：...） localhost:3000）。
活性化ラベル注釈モードに入るには、ページ右下にあるエージェントアイコンをクリックしてください。
注釈要素フィードバックが必要なウェブページ要素にマウスカーソルを合わせ、クリックして、問題の詳細な説明を入力してください。
フィードバックを生成するAgentationは、構造化されたMarkdown形式のフィードバックコンテンツを自動的に生成します。
コピー＆ペースト生成されたMarkdownテキストをコピーし、AIプログラミングアシスタント（Claude CodeやCursorなど）に貼り付けてください。
AI修復AIはMarkdown内の要素情報に基づいて、コードを正確に特定し、修正します。

Agentationのプロジェクトアドレス

GitHubリポジトリ：https://github.com/benjitaylor/agentation
オンライン体験：https://agentation.dev/

エージェントの応用シナリオ

フロントエンド開発とデバッグ開発者は開発プロセス中にウェブページ上で直接疑問点をマークできます。エージェントはそれらの疑問点を構造化されたフィードバックに変換し、コードの迅速な特定と修正を支援します。
設計と開発の統合デザイナーはWebプロトタイプ上で要素をマークし、要件を調整する。エージェントはフィードバックを開発チームまたはAIに送信し、設計意図が正確に実現されるようにする。
テストと最適化テスターはエージェント機能を使用して、機能上のエラーやユーザーエクスペリエンスの問題を報告し、開発チームが迅速に修正できる詳細なフィードバック情報を生成することができます。
レスポンシブデザイン調整開発者がさまざまなデバイスでウェブページをテストし、レイアウトや表示の問題を特定した場合、Agentationはレスポンシブデザインを最適化するための詳細な情報を提供します。
チーム間の連携さまざまな役割の人がエージェント機能を使って課題にタグ付けし、統一された形式でフィードバックを生成することで、効率的なチームコミュニケーションを促進し、誤解や手戻りを減らすことができます。