The React MCP server enables Claude AI to manage React projects and development tasks:
- Create new React apps: Using
create-react-app
with customizable templates - Run React apps: Start development servers with
run-react-app
- Execute terminal commands: Run any command with
run-command
- Manage processes: Track, stop, and retrieve outputs from running processes
- File operations: Read, write, and edit files
- Install npm packages: Add dependencies with options for dev dependencies
Enables installing and managing npm packages for React projects
Supports creating React applications with PWA templates
Allows for creating, running, and managing React applications, including editing components, installing dependencies, and executing development tasks
Supports creating React applications with TypeScript templates
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:
Usage
Add this in claude_desktop_config
:
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.
You must be authenticated.
local-only server
The server can only run on the client's local machine because it depends on local resources.
Tools
react-mcp integrates with Claude Desktop, enabling the creation and modification of React apps based on user prompts
- Sample Usage
- Overview
- Features
- Installation
- Usage
- Available Tools
- Logging
- Architecture
- License
- Author
- Contributing
Related Resources
Related MCP Servers
- -securityAlicense-qualityLets you use Claude Desktop, or any MCP Client, to use natural language to accomplish things with Neon.Last updated -646265TypeScriptMIT License
- AsecurityAlicenseAqualityMCP server that integrates with Shopify API, allowing Claude Desktop users to retrieve and manipulate product information from Shopify stores.Last updated -5PythonMIT License
- AsecurityAlicenseAqualityAllows Claude desktop app to execute terminal commands and edit files on your computer through MCP, with features including command execution, process management, and diff-based file editing.Last updated -1931,6053,039TypeScriptMIT License
- AsecurityAlicenseAqualityAn MCP server that connects to your React Native application debuggerLast updated -21TypeScriptMIT License