React MCP

A powerful server implementation that enables Claude AI to interact with React applications through the Model Context Protocol.

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.

- Create new React applications with optional templates
- Run development servers
- Manage dependencies

- Read and write files
- Edit React components and configuration

- Start and monitor long-running processes
- Track process output in real-time
- Terminate processes when needed

- Run arbitrary terminal commands
- Install npm packages
- Execute development tasks

- Detailed JSON and text logs
- Process tracking with timestamps
- Execution history

To install React MCP for Claude Desktop automatically viaSmithery:

npx -y @smithery/cli install @Streen9/react-mcp --client claude

{ "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.

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

Runs a React application in development mode.

- projectPath(required): Path to the React project folder

- command(required): Command to execute
- directory(optional): Directory to run the command in (defaults to current directory)

Gets the output from a running or completed process.

- processId(required): ID of the process to get output from

- processId(required): ID of the process to stop

- filePath(required): Path to the file to edit
- content(required): Content to write to the file

- filePath(required): Path to the file to read

- 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

Checks the status of a package installation process.

- processId(required): ID of the installation process to check

The server maintains detailed logs in thelogsdirectory:

- react-mcp-logs.json: Structured JSON logs
- react-mcp-logs.txt: Human-readable text logs

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

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

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB