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さん

貢献

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