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
Installing via Smithery
To install React MCP for Claude Desktop automatically via Smithery:
npx -y @smithery/cli install @Streen9/react-mcp --client claude
Manual 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 apptemplate(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 executedirectory(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 editcontent(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 logsreact-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
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.