react-mcp integrates with Claude Desktop, enabling the creation and modification of React apps based on user prompts
A powerful server implementation that enables Claude AI to interact with React applications through the Model Context Protocol.
React MCP provides a bridge between Claude AI and the React ecosystem, allowing Claude to:
This server implements the Model Context Protocol, providing Claude with the ability to perform real-world actions in the development environment.
React Project Management
Create new React applications with optional templates
Manage dependencies
File Operations
Read and write files
Edit React components and configuration
Process Management
Start and monitor long-running processes
Terminate processes when needed
Command Execution
Run arbitrary terminal commands
Execute development tasks
Comprehensive Logging
npm installAdd 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.
create-react-appCreates 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-appRuns a React application in development mode.
Parameters:
projectPath (required): Path to the React project folderrun-commandRuns a terminal command.
Parameters:
command (required): Command to executedirectory (optional): Directory to run the command in (defaults to current directory)get-process-outputGets the output from a running or completed process.
Parameters:
processId (required): ID of the process to get output fromstop-processStops a running process.
Parameters:
processId (required): ID of the process to stoplist-processesLists all running processes.
edit-fileCreates or edits a file.
Parameters:
filePath (required): Path to the file to editcontent (required): Content to write to the fileread-fileReads the contents of a file.
Parameters:
filePath (required): Path to the file to readinstall-packageInstalls 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 dependencycheck-installation-statusChecks the status of a package installation process.
Parameters:
processId (required): ID of the installation process to checkThe server maintains detailed logs in the logs directory:
react-mcp-logs.json: Structured JSON logsreact-mcp-logs.txt: Human-readable text logsThe server uses the following key components:
MIT
Contributions are welcome! Please feel free to submit a Pull Request.
[
{
"description": "Create a new React application",
"inputSchema": {
"properties": {
"directory": {
"description": "Base directory to create the app in (defaults to home directory)",
"type": "string"
},
"name": {
"description": "Name of the React app",
"type": "string"
},
"template": {
"description": "Template to use (e.g., typescript, cra-template-pwa)",
"type": "string"
}
},
"required": [
"name"
],
"type": "object"
},
"name": "create-react-app"
},
{
"description": "Run a React application in development mode",
"inputSchema": {
"properties": {
"projectPath": {
"description": "Path to the React project folder",
"type": "string"
}
},
"required": [
"projectPath"
],
"type": "object"
},
"name": "run-react-app"
},
{
"description": "Run a terminal command",
"inputSchema": {
"properties": {
"command": {
"description": "Command to execute",
"type": "string"
},
"directory": {
"description": "Directory to run the command in (defaults to current directory)",
"type": "string"
}
},
"required": [
"command"
],
"type": "object"
},
"name": "run-command"
},
{
"description": "Get the output from a running or completed process",
"inputSchema": {
"properties": {
"processId": {
"description": "ID of the process to get output from",
"type": "string"
}
},
"required": [
"processId"
],
"type": "object"
},
"name": "get-process-output"
},
{
"description": "Stop a running process",
"inputSchema": {
"properties": {
"processId": {
"description": "ID of the process to stop",
"type": "string"
}
},
"required": [
"processId"
],
"type": "object"
},
"name": "stop-process"
},
{
"description": "List all running processes",
"inputSchema": {
"properties": {},
"type": "object"
},
"name": "list-processes"
},
{
"description": "Create or edit a file",
"inputSchema": {
"properties": {
"content": {
"description": "Content to write to the file",
"type": "string"
},
"filePath": {
"description": "Path to the file to edit",
"type": "string"
}
},
"required": [
"filePath",
"content"
],
"type": "object"
},
"name": "edit-file"
},
{
"description": "Read the contents of a file",
"inputSchema": {
"properties": {
"filePath": {
"description": "Path to the file to read",
"type": "string"
}
},
"required": [
"filePath"
],
"type": "object"
},
"name": "read-file"
},
{
"description": "Install a npm package in a project",
"inputSchema": {
"properties": {
"dev": {
"description": "Whether to install as a dev dependency",
"type": "boolean"
},
"directory": {
"description": "Directory of the project (defaults to current directory)",
"type": "string"
},
"packageName": {
"description": "Name of the package to install (can include version)",
"type": "string"
}
},
"required": [
"packageName"
],
"type": "object"
},
"name": "install-package"
}
]