mcpField
A
agentation

agentation

github.com/benjitaylorエージェントワークフロー5.1k13.7k 回インストール5 週間前に更新
リポジトリ

agentation について

ReactプロジェクトにAgentationツールバーを導入・設定し、必要に応じてMCP経由でコーディングエージェントに接続するスキルです。サーバーの稼働状態だけでなく、注釈が実際にエージェントへ届くか確認します。

主な機能

  1. 01プロジェクト設定とパッケージマネージャーの確認
  2. 02Agentationコンポーネントの導入または再利用
  3. 03必要に応じたMCP接続の設定
  4. 04注釈がエージェントに届くかの検証

活用シーン

  1. 01ReactプロジェクトへのAgentation導入
  2. 02ブラウザーのフィードバックをコーディングエージェントに接続
  3. 03注釈が届かない問題の診断

MCP 対応

必要に応じてagentation-mcpサーバー接続を設定し、テスト注釈をエージェントが読み取れるか確認します。サーバー接続なしで使う手動コピー方式にも対応します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/benjitaylor/agentation --skill agentation

インストール後、Claude Code で/agentationを入力して読み込まれたか確認します。

詳細

Agentation のセットアップ

ツールバーをセットアップし、求められた場合はユーザーのコーディングエージェントに接続します。 ツールバーが表示され、MCP サーバーが正常に動作していても、ブラウザーからのフィードバックがエージェントに届いているとは限りません。セットアップを完了とする前に、この最終段階を確認してください。

手順

  1. プロジェクトを調べる

    • プロジェクトの指示を読み、パッケージマネージャーを特定します。
    • インストール前に、agentation と既存の <Agentation> のマウントを探します。
    • すでにマウントされている場合は、その endpoint と現在の MCP セットアップを確認します。コンポーネントが存在するという理由だけで終了せず、重複してマウントしないでください。
    • agentation が見つからない場合は、既存のロックファイルに対応するパッケージマネージャーを使ってインストールします。

  2. リクエストに応じて接続モードを選ぶ

    • MCP またはエージェントへのリアルタイムなフィードバックを求められた場合は、エージェントと同じ HTTP サーバー URL を使います。デフォルトのローカルサーバーは http://localhost:4747 です。既存のカスタムポートまたはプロキシ URL はそのまま使います。プロジェクトがリモートの場合、ブラウザーとエージェントが同じマシンにあると決めつけないでください。
    • 手動でのコピー＆ペーストのみを求められた場合は、endpoint を省略し、フィードバックがこのブラウザー内にとどまることを説明します。サーバー接続を黙って有効にしないでください。
    • 意図するモードが不明な場合は、既存のプロジェクトを調べながら、簡潔な質問を1つします。独立して進められるセットアップ確認は続けてください。

  3. コンポーネントを追加または更新する

    Next.js App Router プロジェクトでは、ルートレイアウトの body 内で children の後にレンダリングします。Pages Router では、pages/_app の Component の後にレンダリングします。 既存のコールバックやオプションは保持してください。

    import { Agentation } from "agentation";

// Use the actual server URL selected above for MCP sync:
{process.env.NODE_ENV === "development" && (
  <Agentation endpoint="http://localhost:4747" />
)}

    このパッケージには独自のクライアント境界が含まれています。プロジェクトに別の変更理由がない限り、アプリケーションのルートレイアウトはサーバーレンダリングのままにしてください。

  4. MCP が求められた場合はエージェントを設定する

    • プロジェクトで既存の MCP クライアントと設定方法を使います。
    • 起動コマンドには server サブコマンドを含める必要があります。 npx -y agentation-mcp server
    • 対応しているエージェントでは、npx add-mcp "npx -y agentation-mcp server" がセットアップ方法の1つです。Claude Code では、claude mcp add agentation -- npx -y agentation-mcp server または初期設定ウィザードを使います。
    • サーバーコマンドとコンポーネントの endpoint の両方に、同じカスタムポートを設定します。
    • エージェントの設定で必要な場合は、エージェントを再起動するか再接続します。稼働中のサーバーがすでに使用しているポートに、2つ目の HTTP サーバーを作成しないでください。

  5. 接続全体を確認する

    • サービスの診断には npx agentation-mcp doctor を実行します。カスタム URL の場合は、インストール済みバージョンが対応していれば doctor --http-url <url> を使います。
    • アプリを開き、ツールバーから内容が明確に識別できるテスト注釈を1つ作成します。agentation_get_all_pending またはセッションスコープのツールを使って読み取ります。
    • ゼロ以外の件数やヘルスチェック応答だけではなく、テストコメントとページが正確に一致することを確認します。無関係な注釈には触れないでください。
    • 注釈が空の場合は、コンポーネントの endpoint、ブラウザーのネットワークエラー／CORS、エージェントとブラウザーが同じサーバーを参照しているかを確認します。
    • ブラウザーまたは MCP のツールが利用できない場合は、未確認のまま残っている項目を正確に伝え、ユーザーに最終確認を依頼します。リアルタイム同期が機能すると断言しないでください。

注意事項

  • 開発環境用ガードにより、本番環境ではツールバーが表示されません。
  • Agentation には React 18 以降が必要です。
  • ツールバーをインストールしても、MCP サーバーはインストール、設定、接続されません。
  • 手動コピーのモードに対応しており、サーバーを起動する必要はありません。

コメント

Markdown 対応