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

  • 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

1. Clone this repository

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