• Markdown Editor/Viewer By Claude

• API Tester By Claude

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.

• 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

To install React MCP for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @Streen9/react-mcp --client claude

1. Clone this repository
2. Install dependencies:

npm install

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.

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)

Runs a React application in development mode.

Parameters:

• projectPath (required): Path to the React project folder

Runs a terminal command.

Parameters:

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

Gets the output from a running or completed process.

Parameters:

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

Stops a running process.

Parameters:

• processId (required): ID of the process to stop

Lists all running processes.

Creates or edits a file.

Parameters:

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

Reads the contents of a file.

Parameters:

• filePath (required): Path to the file to read

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

Checks the status of a package installation process.

Parameters:

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

The server maintains detailed logs in the logs directory:

• react-mcp-logs.json: Structured JSON logs
• react-mcp-logs.txt: Human-readable text logs

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

MIT

@streen9

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