mcpField
A
agentation

agentation

github.com/23jmo開発16953 回インストール3 週間前に更新
リポジトリ

agentation について

Agentation の React ツールバーを追加し、必要に応じてコーディングエージェントへ接続するセットアップ用 Skill です。サーバーの稼働確認だけでなく、ブラウザーの注釈が実際にエージェントへ届くか検証します。

主な機能

  1. 01プロジェクトとパッケージマネージャーの確認
  2. 02ツールバーの導入とマウント設定
  3. 03MCP 接続モードの設定
  4. 04エージェント設定の案内
  5. 05注釈のエンドツーエンド検証

活用シーン

  1. 01Next.js プロジェクトへの Agentation 導入
  2. 02MCP 同期と手動コピーの選択
  3. 03注釈がエージェントに届かない問題の調査

MCP 対応

MCP によるフィードバックを求める場合、Agentation コンポーネントと MCP クライアントが同じ HTTP サーバー URL を使うよう設定します。診断と注釈の確認で接続を検証する手順も示します。

インストール

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

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

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

同梱ファイルLICENSE

詳細

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 対応