React MCP (Model Context Protocol)

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

Sample Usage

Overview

React MCP provides a bridge between Claude AI and the React ecosystem, allowing 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, providing Claude with the ability to perform real-world actions in the development environment.

Features

React Project Management
- Create new React applications with optional templates
- Run development servers
- Manage dependencies
File Operations
- Read and write files
- Edit React components and configuration
Process Management
- Start and monitor long-running processes
- Track process output in real-time
- Terminate processes when needed
Command Execution
- Run arbitrary terminal commands
- Install npm packages
- Execute development tasks
Comprehensive Logging
- Detailed JSON and text logs
- Process tracking with timestamps
- Execution history

Installation

Clone this repository
Install dependencies:

npm install

Usage

Add this in claude_desktop_config:

{
  "mcpServers": {
    "react-mcp": {
      "command": "node",
      "args": [
        "C:/Users/kalip/OneDrive/Desktop/react-mcp/index.js"
      ]
    },
  }
}

The server runs on the stdio transport, allowing it to be used with Desktop Claude APP as a Model Context Protocol tool.

Available Tools

`create-react-app`

Creates a new React application.

Parameters:

name (required): Name of the React app
template (optional): Template to use (e.g., typescript, cra-template-pwa)
directory (optional): Base directory to create the app in (defaults to home directory)

`run-react-app`

Runs a React application in development mode.

Parameters:

projectPath (required): Path to the React project folder

`run-command`

Runs a terminal command.

Parameters:

command (required): Command to execute
directory (optional): Directory to run the command in (defaults to current directory)

`get-process-output`

Gets the output from a running or completed process.

Parameters:

processId (required): ID of the process to get output from

`stop-process`

Stops a running process.

Parameters:

processId (required): ID of the process to stop

`list-processes`

Lists all running processes.

`edit-file`

Creates or edits a file.

Parameters:

filePath (required): Path to the file to edit
content (required): Content to write to the file

`read-file`

Reads the contents of a file.

Parameters:

filePath (required): Path to the file to read

`install-package`

Installs a npm package in a project.

Parameters:

packageName (required): Name of the package to install (can include version)
directory (optional): Directory of the project (defaults to current directory)
dev (optional): Whether to install as a dev dependency

`check-installation-status`

Checks the status of a package installation process.

Parameters:

processId (required): ID of the installation process to check

Logging

The server maintains detailed logs 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 through standard input/output
Zod: For schema validation and type safety
Child Process: For spawning and managing external processes

License

MIT

Author

@streen9

Contributing

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