React Development Assistant

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

Claude AIがModel Context Protocolを介してReactアプリケーションとやり取りできるようにする強力なサーバー実装です。

🚀 クイックスタート

React MCPはClaude AIとReactエコシステムの架け橋となり、Claudeが新しいReactアプリケーションの作成や開発サーバーの実行、ファイルやディレクトリの管理など、開発環境での実世界の操作を実行できるようにします。

✨ 主な機能

• Reactプロジェクト管理
  • オプションのテンプレートを使用して新しいReactアプリケーションを作成します。
  • 開発サーバーを起動し、依存関係を管理します。
• ファイルとディレクトリ管理
  • プロジェクト内でファイルの追加、削除、修正を簡単に行います。
  • ディレクトリの作成と削除、ファイルやディレクトリのコピーができます。
• パッケージ管理
  • npmまたはyarnを使用してパッケージのインストール、アンインストール、アップグレードを行い、開発依存関係を管理します。

📦 インストール

smitheryを通じたインストール

# smithery CLIをインストール
npm install -g smithery-cli

# プロジェクトディレクトリでサーバーを初期化
smithery init @streen9/react-mcp

手動インストール

1. リポジトリをクローンします：

   git clone https://github.com/Streen9/react-mcp.git
   cd react-mcp
   

2. 依存関係をインストールします：

   npm install
   

3. サーバーを起動します：

   npm start
   

💻 使用例

基礎的な使用法

Claudeでの使用

ClaudeでReact MCPを使用するには、プロジェクトのルートディレクトリに以下の設定ファイルを追加する必要があります。

// mcp-config.js
module.exports = {
  servers: [
    {
      name: 'react-mcp',
      type: 'stdio',
      path: './node_modules/.bin/react-mcp'
    }
  ]
}

ツールの使用

Reactアプリの作成

# 新しいプロジェクトを初期化
npx create-react-app my-app

# 開発サーバーを起動
cd my-app
npm start

パッケージのインストール

npm install <package-name>

プロセスの管理

# 実行中のプロセスを表示
ps aux | grep react-mcp

# 特定のプロセスを終了
pkill -f "node ./.server-process"

高度な使用法

Claudeを使用して、以下のようなアプリケーションを作成できます。

• ClaudeによるMarkdownエディター/ビューワー
• ClaudeによるAPIテスター

📚 ドキュメント

ログ

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

• react-mcp-logs.json：構造化されたJSONログ
• react-mcp-logs.txt：人間が読みやすいテキストログ

アーキテクチャ

サーバーは以下の主要なコンポーネントを使用しています。

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

🔧 技術詳細

サーバーはModel Context Protocolを実装し、Claudeが開発環境で現実世界の操作を実行できる能力を与えます。主要なコンポーネントとして、モデルコンテキストプロトコルSDKを使用してClaude AIと通信し、StdioServerTransportを通じて標準入出力でI/Oを行います。また、Zodを用いてスキーマ検証と型安全を確保し、子プロセスを使って外部プロセスの起動と管理を行います。

📄 ライセンス

MIT

作者

@streen9

貢献

貢献を歓迎します！Pull Requestをいつでも送信してください。