React Development Assistant

🚀 React MCP (Model Context Protocol)

A powerful server implementation that enables Claude AI to interact with React applications via the Model Context Protocol.

🚀 Quick Start

React MCP bridges the gap between Claude AI and the React ecosystem, empowering Claude to:

• Create new React applications
• Run React development servers
• Manage files and directories
• Install npm packages
• Execute terminal commands
• Track and manage long-running processes

This server implements the Model Context Protocol, enabling Claude to perform real-world operations in the development environment.

✨ Features

• React Project Management

  • Create new React applications with optional templates
  • Run development servers
  • Manage dependencies

• File and Directory Management

  • Easily add, delete, and modify files in the project
  • Create and delete directories
  • Copy files or directories

• Package Management

  • Install, uninstall, or upgrade packages using npm or yarn
  • Manage development dependencies

📦 Installation

Via Smithery

# Install the Smithery CLI
npm install -g smithery-cli

# Initialize the server in the project directory
smithery init @streen9/react-mcp

Manual Installation

1. Clone the repository:

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

2. Install dependencies:

   npm install
   

3. Start the server:

   npm start
   

💻 Usage Examples

Example Usage

• Markdown Editor/Viewer created by Claude

• API Tester created by Claude

Using React MCP in Claude

To use React MCP in Claude, add the following configuration file to the project root directory:

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

Tools

Create a React Application

# Initialize a new project
npx create-react-app my-app

# Start the development server
cd my-app
npm start

Install Packages

npm install <package-name>

Manage Processes

# View running processes
ps aux | grep react-mcp

# Kill a specific process
pkill -f "node ./.server-process"

📚 Documentation

Logs

The server maintains detailed log files in the logs directory:

• react-mcp-logs.json: Structured JSON logs
• react-mcp-logs.txt: Human-readable text logs

Architecture

The server uses the following key components:

• Model Context Protocol SDK: For communication with Claude AI
• StdioServerTransport: For I/O via standard input/output
• Zod: For schema validation and type safety
• Child Processes: For spawning and managing external processes

📄 License

MIT

👨‍💻 Author

@streen9

🤝 Contribution

Contributions are welcome! Please feel free to submit a Pull Request.