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

# React MCP (Model Context Protocol) [](https://smithery.ai/server/@Streen9/react-mcp) 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](https://claude.ai/share/f68940f1-97cd-41df-9c14-f63dc6fb9faf)  - [API Tester By Claude](https://claude.ai/share/b0b3943c-5c90-4b8d-8613-e76eaa243407)  ## 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: ```bash 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](https://github.com/Streen9) ## Contributing Contributions are welcome! Please feel free to submit a Pull Request.