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

• Markdown Editor/Viewer By Claude

• API Tester By Claude

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

• File Operations

• Process Management

• Command Execution

• 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

1. Clone this repository

2. 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 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)

`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 execute
• `directory` (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 edit
• `content` (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 logs
• `react-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

@streen9

Contributing

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