MCP Rewatch

🚀 MCP Rewatch

Model Context Protocol (MCP)サーバーであるMCP Rewatchは、Claude CodeのようなAIコーディングアシスタントが長時間実行される開発プロセスを管理できるようにします。このツールがなければ、Claude Codeはnpm run devのようなコマンドを実行できません。なぜなら、プロセスの完了を待機してブロックされ、最終的に出力を見ることなくタイムアウトしてしまうからです。

🚀 クイックスタート

MCP Rewatchを使用することで、Claude Codeが長時間実行される開発プロセスを効果的に管理できるようになります。以下に、基本的な使い方を説明します。

✨ 主な機能

• バックグラウンドでのプロセス実行：Claude Codeがブロックされることなく、プロセスをバックグラウンドで実行します。
• 全出力のキャプチャ：標準出力（stdout）と標準エラー出力（stderr）をメモリバッファに保存します。
• 非同期アクセスの提供：Claude Codeがいつでもログを確認できるようにします。
• 再起動の可能化：Claude Codeが変更を加えた後にサーバーを再起動できるようにします。
• 複数プロセスの管理：フロントエンド、バックエンド、データベースサーバーを同時に実行できます。

📦 インストール

npmを使用してグローバルにインストールすることができます。

npm install -g mcp-rewatch

または、npxを使用して直接実行することもできます（インストール不要）。

npx mcp-rewatch

💻 使用例

基本的な使用法

Claude CodeでMCP Rewatchを使用するには、以下の手順を実行します。

1. Claude CodeにMCP Rewatchを追加します。

# npxを使用する場合（インストール不要）
claude mcp add rewatch npx -- mcp-rewatch

# グローバルにインストールした場合
claude mcp add rewatch mcp-rewatch

# ローカル開発の場合
claude mcp add rewatch node -- /path/to/mcp-rewatch/dist/index.js

2. プロジェクトのルートディレクトリにrewatch.config.jsonを作成します。
3. プロジェクトディレクトリからClaude Codeを起動します。MCP Rewatchは現在の作業ディレクトリにある設定ファイルを探します。

高度な使用法

ユーザースコープの設定（グローバルアクセス）

すべてのClaude CodeセッションでMCP Rewatchを使用できるようにするには、以下のコマンドを実行します。

claude mcp add -s user rewatch npx -- mcp-rewatch

重要: サーバーはClaude Codeが実行されている現在の作業ディレクトリにあるrewatch.config.jsonを探します。各プロジェクトには独自の設定ファイルが必要です。

複数プロジェクトの管理

MCP RewatchはClaude Codeが実行されている現在の作業ディレクトリにあるrewatch.config.jsonを探します。以下は、複数プロジェクトを管理する際のベストプラクティスです。

1. 設定ファイルをプロジェクト固有にする：各プロジェクトに独自のrewatch.config.jsonを作成します。
2. 相対パスを使用する：設定ファイルでは、"./backend"や"./frontend"のような相対パスを使用します。
3. プロジェクトのルートからClaude Codeを起動する：常にプロジェクトディレクトリからClaude Codeを起動します。

複数サービスの設定例：

{
  "processes": {
    "frontend": {
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./frontend"
    },
    "backend": {
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./backend"
    },
    "database": {
      "command": "docker",
      "args": ["compose", "up", "postgres"],
      "cwd": "./"
    }
  }
}

📚 ドキュメント

問題の説明

Claude Codeを開発に使用する際には、根本的な制限に直面します。

# Claude Codeが開発サーバーを実行しようとしたときの状況：
$ npm run dev

> my-app@1.0.0 dev
> next dev

▲ Next.js 14.0.0
- Local: http://localhost:3000

[Claude Codeはここでブロックされ、プロセスが終了するのを待機します]
[約2分後、出力を見ることなくタイムアウトします]
[Claude Codeはコンパイルエラー、成功メッセージ、またはログを見ることができません]

Claude Codeは以下のことができません：

• ❌ 長時間実行されるプロセスからの出力を見る
• ❌ 開発サーバーが正常に起動したかどうかを知る
• ❌ コンパイルエラーをチェックする
• ❌ 変更を加えた後にサーバーを再起動する
• ❌ 複数の開発プロセスを同時に実行する

このため、Claude Codeを使用して効果的に開発することはほぼ不可能です。すべての開発サーバーを手動で実行し、変更後に再起動する必要があります。

解決策

MCP Rewatchは、Claude Codeと開発プロセスの間の橋渡し役として機能します。

• バックグラウンドでプロセスを実行する：Claude Codeがブロックされることがありません。
• 全出力をキャプチャする：標準出力（stdout）と標準エラー出力（stderr）をメモリバッファに保存します。
• 非同期アクセスを提供する：Claude Codeがいつでもログを確認できるようにします。
• 再起動を可能にする：Claude Codeが変更を加えた後にサーバーを再起動できるようにします。
• 複数プロセスを管理する：フロントエンド、バックエンド、データベースサーバーを同時に実行できます。

動作原理

MCP Rewatchは、Claude Codeと開発プロセスの間の仲介役として機能します。

1. 別のサービスとして実行される：Claude CodeはMCPを介してこのサービスと通信できます。
2. プロセスを独立して管理する：開発サーバーを子プロセスとして起動します。
3. 非ブロッキング操作：Claude Codeはプロセスを起動/再起動し、すぐに続行できます。
4. 非同期ログ取得：Claude Codeは後でブロックすることなくログを確認できます。
5. 適切なライフサイクル管理：グレースフルシャットダウンを行い、孤立したプロセスを残しません。

このアーキテクチャにより、Claude Codeは直接実行できないという固有の制限にもかかわらず、長時間実行されるプロセスを効果的に管理できます。

設定

プロジェクトのルートディレクトリ（Claude Codeを実行する場所）にrewatch.config.jsonファイルを作成します。 startupDelayは、特定のプロセスに合わせて調整する必要があります。

• 高速ツール（スクリプト、小規模サーバー）：1000 - 2000ms
• Next.js/React開発サーバー：3000 - 5000ms
• 重いビルドプロセス：5000 - 10000ms
• 依存関係のあるサービス：8000 - 15000ms

{
  "processes": {
    "convex": {
      "command": "pnpm",
      "args": ["dlx", "convex", "dev"],
      "cwd": "./",
      "startupDelay": 5000
    },
    "nextjs": {
      "command": "pnpm",
      "args": ["dev"],
      "cwd": "./",
      "env": {
        "PORT": "3000"
      },
      "startupDelay": 4000 
    },
    "backend": {
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./backend",
      "env": {
        "NODE_ENV": "development",
        "PORT": "8080"
      },
      "startupDelay": 2000
    }
  }
}

設定オプション

• command：実行する実行可能ファイル（例：npm、pnpm、node）
• args：コマンド引数の配列
• cwd：プロセスの作業ディレクトリ（MCPサーバーが実行される場所、つまりプロジェクトのルートに対する相対パス）
• env：追加の環境変数（オプション）
• startupDelay：起動後にステータスをチェックする前に待機する時間（ミリ秒）（デフォルト：3000）
• readyPattern：（まだ実装されていません - ロードマップを参照）

利用可能なツール

設定後、Claude Codeは以下のツールを使用できます。

restart_process

名前で開発プロセスを停止し、再起動します。設定されたstartupDelay（またはデフォルトで3秒）待機した後、初期ログを返します。

await restart_process({ name: "nextjs" })
// 出力:
// Process 'nextjs' started successfully
//
// Initial logs:
// [2024-01-07T10:00:01.123Z] [stdout] > my-app@1.0.0 dev
// [2024-01-07T10:00:01.456Z] [stdout] > next dev
// [2024-01-07T10:00:02.789Z] [stdout] ▲ Next.js 14.0.0
// [2024-01-07T10:00:03.012Z] [stdout] - Local: http://localhost:3000

get_process_logs

プロセスからログを取得し、必要に応じて行数を制限できます。

await get_process_logs({ name: "nextjs", lines: 50 })
// Next.jsプロセスから最後の50行のログを返します

await get_process_logs({ name: "convex" })
// Convexプロセスから利用可能なすべてのログを返します

list_processes

すべての設定されたプロセスとその現在のステータスをリストします。

await list_processes()
// 出力:
// nextjs: running (PID: 12345)
// convex: stopped

stop_all

すべての実行中のプロセスをグレースフルに停止します。

await stop_all()
// 出力: "All processes stopped"

典型的なワークフロー

Claude Codeが開発中にMCP Rewatchを使用する方法は以下の通りです。

1. 初期設定（一度だけ行う）：
   • プロジェクトにrewatch.config.jsonを作成します。
   • Claude Codeを起動します - サーバーは必要に応じて起動できます。
2. 開発中Claude Codeは以下のことを行います。
   • ファイルにコードを変更します。
   • restart_process({ name: "nextjs" })を呼び出してサーバーを再起動します。
   • 3秒の起動遅延後に自動的に初期ログを受け取ります。
   • ログをチェックして成功インジケーターまたはエラーを確認します。
   • 結果に基づいてさらに変更を加えます。
   • 必要に応じて、後でget_process_logs({ name: "nextjs" })を呼び出します。
3. 主な利点：
   • Claude Codeは長時間実行されるプロセスによってブロックされることがありません。
   • 変更を加えるたびにサーバーを手動で再起動する必要がありません。
   • Claude Codeはログをチェックすることで変更が機能したことを確認できます。
   • 複数のサーバーを並行して管理できます。

動作原理

restart_processが呼び出されると、以下のことが行われます。

1. 同じ名前の既存のプロセスを停止します。
2. 新しいプロセスを起動します。
3. 設定されたstartupDelay（デフォルト：3秒）を待機します。
4. 起動ステータスと初期ログを返します。

これにより、Claude Codeは以下のことがすぐにわかります。

• プロセスが正常に起動したかどうか
• 即時エラー（ポート競合、欠落している依存関係）があったかどうか
• サーバーがコンパイル/ビルドを開始しているかどうか

継続的な監視には、Claude Codeはget_process_logsを使用して後で進捗状況を確認できます。

重要性

MCP Rewatchがなければ、Claude Codeを使用した開発フローは非常にイライラするものになります。

• ❌ Claude Codeがnpm run devを試みる → ブロックされ、タイムアウトする
• ❌ 変更を加える → サーバーが停止する → 手動で再起動する必要がある
• ❌ 変更が正常にコンパイルされたかどうかを確認する方法がない

MCP Rewatchを使用すると、以下のようになります。

• ✅ Claude Codeがrestart_processを使用する → すぐに返される
• ✅ 変更を加えた後にサーバーが自動的に再起動する
• ✅ Claude Codeがログをチェックして成功を確認できる

トラブルシューティング

• プロセスが起動しない：プロジェクトのルートディレクトリにrewatch.config.jsonが存在することを確認してください。
• 権限エラー：設定ファイル内のコマンドが適切な実行権限を持っていることを確認してください。
• ツールが見つからない：Claude CodeのMCPメニューにMCP Rewatchが表示されていることを確認してください。
• ログが表示されない：プロセスが出力をバッファリングしている可能性があります。一部のサーバーでは、バッファリングを無効にするための特定のフラグが必要です。

開発

MCP Rewatchに貢献するには、以下の手順を実行します。

git clone https://github.com/brennancheung/mcp-rewatch.git
cd mcp-rewatch
pnpm install
pnpm build

開発用には、Claude Codeをビルドされた出力に直接向けることができます。

# プロジェクトをビルドする
pnpm build

# Claude Codeに追加する
claude mcp add rewatch-dev node -- /path/to/mcp-rewatch/dist/index.js

その後、テストするディレクトリにrewatch.config.jsonを作成します。