agentation

Name: agentation
Author: petekp

github.com/petekpデザイン・UI4846 回インストール2 日前に更新

agentation について

agentationは、ReactプロジェクトにAgentationの注釈ツールバーを設定するスキルです。開発時のみ有効にする方法に加え、MCP経由で注釈をコーディングエージェントに同期する設定も案内します。

このスキルは、注釈をコーディングエージェントに同期するagentation-mcpサーバーの設定を説明します。保留中の注釈の取得、解決、更新の監視に使うツールも示します。

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

$npx skills add https://github.com/petekp/claude-code-setup --skill agentation

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

このプロジェクトに Agentation 注釈ツールバーをセットアップします。

インストール済みか確認する
- package.json の依存関係に agentation があるか確認します
- 見つからない場合は、npm install agentation を実行します（ロックファイルに応じて pnpm/yarn でも可）
設定済みか確認する
- src/ または app/ で <Agentation または import { Agentation } を検索します
- 見つかった場合は、Agentation のセットアップが完了していることを報告して終了します
フレームワークを検出する
- Next.js App Router：app/layout.tsx または app/layout.js がある
- Next.js Pages Router：pages/_app.tsx または pages/_app.js がある

コンポーネントを追加する

Next.js App Router の場合は、ルートレイアウトに追加します：

import { Agentation } from "agentation";

// Add inside the body, after children:
{process.env.NODE_ENV === "development" && <Agentation />}

Next.js Pages Router の場合は、_app に追加します：

import { Agentation } from "agentation";

// Add after Component:
{process.env.NODE_ENV === "development" && <Agentation />}

コンポーネントの設定を確認する
- Agentation ツールバーコンポーネントの設定が完了したことをユーザーに伝えます
MCP サーバーのセットアップを推奨する
- AI エージェントとのリアルタイムな注釈同期には、MCP サーバーもセットアップする必要があることを説明します
- 次のいずれかの方法を推奨します：
  - 汎用（Claude Code、Cursor、Codex、Windsurf など、9 つ以上のエージェントに対応）： add-mcp を参照してください。npx add-mcp を実行し、プロンプトに従って agentation-mcp を MCP サーバーとして追加します
  - Claude Code 専用（対話型ウィザード）： パッケージをインストールした後、agentation-mcp init を実行します
- MCP のセットアップ後、サーバーを読み込むためにコーディングエージェントを再起動するようユーザーに伝えます
- 設定が完了すると、注釈がエージェントに自動的に同期されることを説明します

NODE_ENV のチェックにより、Agentation は開発環境でのみ読み込まれます
Agentation には React 18 が必要です
MCP サーバーの HTTP サーバーは、デフォルトでポート 4747 で実行されます
MCP サーバーは、agentation_get_all_pending、agentation_resolve、agentation_watch_annotations などのツールを公開します
インストール後、agentation-mcp doctor を実行してセットアップを確認します

Markdown 対応