React Development Assistant

🚀 React MCP（模型上下文協議）

React MCP是一個強大的服務器實現，它搭建了Claude AI與React應用程序之間的橋樑，通過Model Context Protocol讓二者實現交互，極大地拓展了Claude AI在React生態系統中的應用能力。

🚀 快速開始

要在Claude中使用React MCP，需要在項目根目錄添加以下配置文件：

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

✨ 主要特性

React MCP為Claude AI與React生態系統之間架起了橋樑，使Claude能夠：

• 創建新的React應用程序
• 運行React開發服務器
• 管理文件和目錄
• 安裝npm包
• 執行終端命令
• 跟蹤並管理長-running進程

此服務器實現了Model Context Protocol，賦予Claude在開發環境中執行現實世界操作的能力。具體特性如下：

• 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

💻 使用示例

基礎用法

創建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創建的Markdown編輯器/查看器
• Claude創建的API測試器

日誌

服務器在logs目錄下維護詳細的日誌文件：

• react-mcp-logs.json：結構化的JSON日誌
• react-mcp-logs.txt：人類可讀的文本日誌

🔧 技術細節

服務器使用以下關鍵組件：

• 模型上下文協議SDK：用於與Claude AI通信
• StdioServerTransport：用於通過標準輸入/輸出進行I/O
• Zod：用於模式驗證和類型安全
• 子進程：用於 spawning 和管理外部進程

📄 許可證

MIT

👨‍💻 作者

@streen9

🤝 貢獻

歡迎貢獻！請隨時提交Pull Request。