Skip to main content
Glama

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

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.

Install Server
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
                        F
                        license
                        -
                        quality
                        A Model Context Protocol server built with mcp-framework that allows users to create and manage custom tools for processing data, integrating with the Claude Desktop via CLI.
                        Last updated -
                        23
                        5
                        TypeScript
                        • 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
                        29,418
                        4,054
                        JavaScript
                        MIT License
                        • Apple
                      • A
                        security
                        F
                        license
                        A
                        quality
                        A server built on mcp-framework that enables integration with Claude Desktop through the Model Context Protocol.
                        Last updated -
                        1
                        1
                        • Apple
                      • A
                        security
                        A
                        license
                        A
                        quality
                        Browser Agent MCP
                        Last updated -
                        13
                        18
                        TypeScript
                        Mozilla Public License 2.0
                        • Apple
                        • Linux

                      View all related MCP servers

                      MCP directory API

                      We provide all the information about MCP servers via our MCP API.

                      curl -X GET 'https://glama.ai/api/mcp/v1/servers/kalivaraprasad-gonapa/react-mcp'

                      If you have feedback or need assistance with the MCP directory API, please join our Discord server