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.