React MCP（モデルコンテキストプロトコル）

Claude AI がモデル コンテキスト プロトコルを通じて React アプリケーションと対話できるようにする強力なサーバー実装。

使用例

• Markdownエディター/ビューア By Claude
• APIテスター By Claude

概要

React MCP は、Claude AI と React エコシステムの間に橋渡しをし、Claude に次のことを可能にします。

• 新しいReactアプリケーションを作成する
• React開発サーバーを実行する
• ファイルとディレクトリを管理する
• npmパッケージをインストールする
• 端末コマンドを実行する
• 長時間実行されるプロセスを追跡および管理する

このサーバーはモデルコンテキストプロトコルを実装し、開発環境で実際のアクションを実行する機能を Claude に提供します。

特徴

• Reactプロジェクト管理
  • オプションのテンプレートを使用して新しい React アプリケーションを作成する
  • 開発サーバーを実行する
  • 依存関係を管理する
• ファイル操作
  • ファイルの読み取りと書き込み
  • Reactコンポーネントと設定を編集する
• プロセス管理
  • 長時間実行プロセスを開始および監視する
  • プロセス出力をリアルタイムで追跡
  • 必要に応じてプロセスを終了する
• コマンド実行
  • 任意のターミナルコマンドを実行する
  • npmパッケージをインストールする
  • 開発タスクを実行する
• 包括的なログ記録
  • 詳細なJSONおよびテキストログ
  • タイムスタンプによるプロセス追跡
  • 実行履歴

インストール

1. このリポジトリをクローンする
2. 依存関係をインストールします:

使用法

claude_desktop_configに以下を追加します:

サーバーは stdio トランスポート上で実行されるため、Desktop Claude APP でモデル コンテキスト プロトコル ツールとして使用できます。

利用可能なツール

create-react-app

新しい React アプリケーションを作成します。

パラメータ:

• name (必須): Reactアプリの名前
• template （オプション）：使用するテンプレート（例：typescript、cra-template-pwa）
• directory （オプション）：アプリを作成するベースディレクトリ（デフォルトはホームディレクトリ）

run-react-app

React アプリケーションを開発モードで実行します。

パラメータ:

• projectPath (必須): React プロジェクト フォルダへのパス

run-command

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

パラメータ:

• command （必須）: 実行するコマンド
• directory （オプション）：コマンドを実行するディレクトリ（デフォルトは現在のディレクトリ）

get-process-output

実行中または完了したプロセスから出力を取得します。

パラメータ:

• processId (必須): 出力を取得するプロセスのID

stop-process

実行中のプロセスを停止します。

パラメータ:

• processId (必須): 停止するプロセスのID

list-processes

実行中のすべてのプロセスを一覧表示します。

edit-file

ファイルを作成または編集します。

パラメータ:

• filePath (必須): 編集するファイルへのパス
• content (必須): ファイルに書き込むコンテンツ

read-file

ファイルの内容を読み取ります。

パラメータ:

• filePath (必須): 読み取るファイルへのパス

install-package

プロジェクトに npm パッケージをインストールします。

パラメータ:

• packageName (必須): インストールするパッケージの名前 (バージョンを含めることができます)
• directory （オプション）：プロジェクトのディレクトリ（デフォルトは現在のディレクトリ）
• dev (オプション): 開発依存関係としてインストールするかどうか

check-installation-status

パッケージのインストール プロセスのステータスを確認します。

パラメータ:

• processId (必須): 確認するインストールプロセスのID

ログ記録

サーバーはlogsディレクトリに詳細なログを保持します。

• react-mcp-logs.json : 構造化されたJSONログ
• react-mcp-logs.txt : 人間が読めるテキストログ

建築

サーバーは次の主要コンポーネントを使用します。

• モデルコンテキストプロトコルSDK ：Claude AIとの通信用
• StdioServerTransport : 標準入出力を介したI/O用
• Zod : スキーマ検証と型安全性
• 子プロセス: 外部プロセスの生成と管理

ライセンス

マサチューセッツ工科大学

著者

@streen9さん

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。