← Back to directory
R

React MCP

Community
Enables Claude to create and modify React apps based on prompts.
Category
Dev Tools #426 of 438
Stars
★ 76 Popular
Transport
stdio (local process)
Runtime
Node.js
Credentials
No credential needed
License
MIT
Last commit
⚠
Tools
10
26FMRS · D

React MCP provides a practical bridge for Claude to directly operate on React projects. It is feature-rich, covering core development tasks like creation, running, file editing, and package management. However, it requires direct command execution and file access, which introduces security risks, so users should handle with caution.

Strongest · Maintenance 7/20 Weakest · Security and permissions 3/20

Reliability
5/20
Security and permissions
3/20
Maintenance
7/20
Documentation
6/20
Setup experience
5/20
Why each score
Reliability 5/20
Source shows no tests or CI configuration, so declared tools' actual behavior cannot be verified. README lists many tools but lacks reproducible evidence; execution paths may have unhandled errors.
Security and permissions 3/20
The presence of a run-command tool for arbitrary terminal commands without confirmation and no network restrictions or least-privilege measures raises risk. No malicious intent or credential theft detected, but lack of confirmation is a red-line risk.
Maintenance 7/20
Repository has MIT license and appears active with 73 stars and 2 open issues. README doesn't mention update channels or security response, so maintenance evidence is incomplete.
Documentation 6/20
README provides installation and usage examples but lacks troubleshooting, parameter details, and limitations. Sample usage links could be stale, and no verifiable evidence is provided.
Setup experience 5/20
Setup requires manual clone and configuration; npm install and claude_desktop_config example are given, but cross-platform steps and verification are missing, making setup potentially fragile.

Static review · not runListed 2026-08-07

Read the FMRS scoring method →

Fit and risk

What it can accessReads local filesWrites / deletes local filesRuns commands or code

Best for

  • Developers wanting to accelerate React development with Claude
  • Those needing integration with Claude Desktop for hands-on coding tasks
  • Teams needing automated project scaffolding and dependency management

Not for

  • Users expecting a graphical interface
  • Those needing remote/cloud deployment
  • Scenarios requiring built-in authentication or security controls

Required permissions

  • File system read/write
  • Execute terminal commands
  • Install packages
  • Process management

Risks and side effects

  • Arbitrary command execution poses security risks
  • File operations may overwrite existing files
  • Created apps may contain malicious templates
  • Processes can consume system resources

Setup

Before you start

Runtime:Node.js

  1. Clone the repository: git clone https://github.com/kalivaraprasad-gonapa/react-mcp
  2. Install dependencies: npm install
  3. Add the server configuration to Claude Desktop's config file.
claude_desktop_config.json
{"mcpServers":{"react-mcp":{"command":"node","args":["C:/Users/kalip/OneDrive/Desktop/react-mcp/index.js"]}}}

Shown for Claude Desktop. Other clients may use a different file or key (VS Code uses "servers") — the configurator below converts it.

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

Goes in your project's .vscode/mcp.json (VS Code uses a "servers" key).

Terminal
claude mcp add react-mcp -- node C:/Users/kalip/OneDrive/Desktop/react-mcp/index.js

Run it in a terminal; replace any <…> placeholders with your own values first.

Check that it works

After adding the config to claude_desktop_config and restarting Claude Desktop, tools like create-react-app, run-command, and read-file should appear in the client's tool list; alternatively, ask Claude to run `node -v` via run-command to confirm the connection.

Troubleshooting

  1. Ensure Node.js is installed and compatible
  2. Verify the index.js path is correct
  3. Check logs in logs/react-mcp-logs.txt for errors
  4. Confirm project path exists and contains a valid React project

Things to try

Once connected, you can ask your AI assistant things like:

  • Create a new React app named my-app using the typescript template in D:/projects
  • Run the development server for the React project at D:/projects/my-app
  • Install axios as a dependency in this project
  • Read src/App.js and change the heading to Hello World

Tools 10

create-react-app writes
Creates a new React application with optional templates.
run-react-app writes
Runs a React application in development mode.
run-command writes
Executes a terminal command in a specified directory.
get-process-output read-only
Gets the output from a running or completed process.
stop-process writes
Stops a running process.
list-processes read-only
Lists all running processes.
edit-file writes
Creates or edits a file.
read-file read-only
Reads the contents of a file.
Show 2 more tools
install-package writes
Installs an npm package in a project, optionally as a dev dependency.
check-installation-status read-only
Checks the status of a package installation process.

Use cases

Create React apps via natural language
Run and manage dev servers
Edit React components and configuration files
Install and manage npm packages
Execute arbitrary terminal commands

Supported clients

Claude Desktop

Listed from the project's documentation, not tested by this site.

Overview

React MCP is a powerful server implementation that enables Claude AI to interact with React applications through the Model Context Protocol. It allows Claude to create new React applications, run development servers, manage files and directories, install npm packages, execute terminal commands, and track and manage long-running processes.

Similar servers

Context7 80 · B

Upstash's official server providing up-to-date third-party library docs for AI coding assistants

★ 63.3k · Tools 2 Compare with this →

Source revision 984adb923aa6 Data synced 2026-10-19 Read the FMRS scoring method