https://github.com/Streen9/react-mcp

Integrations

  • Enables installing and managing npm packages for React projects

  • Supports creating React applications with PWA templates

  • Allows for creating, running, and managing React applications, including editing components, installing dependencies, and executing development tasks

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

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

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

local-only server

The server can only run on the client's local machine because it depends on local resources.

react-mcp integrates with Claude Desktop, enabling the creation and modification of React apps based on user prompts

  1. Sample Usage
    1. Overview
      1. Features
        1. Installation
          1. Usage
            1. Available Tools
              1. create-react-app
              2. run-react-app
              3. run-command
              4. get-process-output
              5. stop-process
              6. list-processes
              7. edit-file
              8. read-file
              9. install-package
              10. check-installation-status
            2. Logging
              1. Architecture
                1. License
                  1. Author
                    1. Contributing

                      Related MCP Servers

                      • -
                        security
                        A
                        license
                        -
                        quality
                        Lets you use Claude Desktop, or any MCP Client, to use natural language to accomplish things with Neon.
                        Last updated -
                        431
                        205
                        TypeScript
                        MIT License
                        • Linux
                        • Apple
                      • A
                        security
                        A
                        license
                        A
                        quality
                        MCP server that integrates with Shopify API, allowing Claude Desktop users to retrieve and manipulate product information from Shopify stores.
                        Last updated -
                        5
                        Python
                        MIT License
                        • Apple
                      • A
                        security
                        A
                        license
                        A
                        quality
                        Allows Claude desktop app to execute terminal commands and edit files on your computer through MCP, with features including command execution, process management, and diff-based file editing.
                        Last updated -
                        19
                        14,607
                        2,477
                        TypeScript
                        MIT License
                        • Apple

                      View all related MCP servers

                      ID: xsjsdumc7x