React MCP

React MCP (Model Context Protocol)

Una potente implementación de servidor que permite a Claude AI interactuar con aplicaciones React a través del Model Context Protocol.

Uso de ejemplo

• Markdown Editor/Viewer By Claude

• API Tester By Claude

Resumen

React MCP proporciona un puente entre Claude AI y el ecosistema React, permitiendo a Claude:

• Crear nuevas aplicaciones React
• Ejecutar servidores de desarrollo React
• Gestionar archivos y directorios
• Instalar paquetes npm
• Ejecutar comandos de terminal
• Rastrear y gestionar procesos de larga duración

Este servidor implementa el Model Context Protocol, proporcionando a Claude la capacidad de realizar acciones reales en el entorno de desarrollo.

Características

• Gestión de proyectos React

  • Crear nuevas aplicaciones React con plantillas opcionales
  • Ejecutar servidores de desarrollo
  • Gestionar dependencias

• Operaciones de archivos

  • Leer y escribir archivos
  • Editar componentes y configuración de React

• Gestión de procesos

  • Iniciar y monitorear procesos de larga duración
  • Rastrear la salida de procesos en tiempo real
  • Terminar procesos cuando sea necesario

• Ejecución de comandos

  • Ejecutar comandos de terminal arbitrarios
  • Instalar paquetes npm
  • Ejecutar tareas de desarrollo

• Registro integral

  • Registros detallados en JSON y texto
  • Seguimiento de procesos con marcas de tiempo
  • Historial de ejecución

Instalación

Instalación mediante Smithery

Para instalar React MCP para Claude Desktop automáticamente a través de Smithery:

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

Instalación manual

1. Clona este repositorio
2. Instala las dependencias:

npm install

Uso

Añade esto en claude_desktop_config:

{
  "mcpServers": {
    "react-mcp": {
      "command": "node",
      "args": [
        "C:/Users/kalip/OneDrive/Desktop/react-mcp/index.js"
      ]
    },
  }
}

El servidor se ejecuta en el transporte stdio, lo que permite usarlo con la aplicación de escritorio Claude como una herramienta del Model Context Protocol.

Herramientas disponibles

create-react-app

Crea una nueva aplicación React.

Parámetros:

• name (obligatorio): Nombre de la aplicación React
• template (opcional): Plantilla a usar (por ejemplo, typescript, cra-template-pwa)
• directory (opcional): Directorio base para crear la aplicación (por defecto, el directorio de inicio)

run-react-app

Ejecuta una aplicación React en modo de desarrollo.

Parámetros:

• projectPath (obligatorio): Ruta a la carpeta del proyecto React

run-command

Ejecuta un comando de terminal.

Parámetros:

• command (obligatorio): Comando a ejecutar
• directory (opcional): Directorio en el que ejecutar el comando (por defecto, el directorio actual)

get-process-output

Obtiene la salida de un proceso en ejecución o completado.

Parámetros:

• processId (obligatorio): ID del proceso del que obtener la salida

stop-process

Detiene un proceso en ejecución.

Parámetros:

• processId (obligatorio): ID del proceso a detener

list-processes

Lista todos los procesos en ejecución.

edit-file

Crea o edita un archivo.

Parámetros:

• filePath (obligatorio): Ruta al archivo a editar
• content (obligatorio): Contenido a escribir en el archivo

read-file

Lee el contenido de un archivo.

Parámetros:

• filePath (obligatorio): Ruta al archivo a leer

install-package

Instala un paquete npm en un proyecto.

Parámetros:

• packageName (obligatorio): Nombre del paquete a instalar (puede incluir versión)
• directory (opcional): Directorio del proyecto (por defecto, el directorio actual)
• dev (opcional): Si se instala como dependencia de desarrollo

check-installation-status

Comprueba el estado de un proceso de instalación de paquetes.

Parámetros:

• processId (obligatorio): ID del proceso de instalación a comprobar

Registro

El servidor mantiene registros detallados en el directorio logs:

• react-mcp-logs.json: Registros JSON estructurados
• react-mcp-logs.txt: Registros de texto legibles por humanos

Arquitectura

El servidor utiliza los siguientes componentes clave:

• Model Context Protocol SDK: Para la comunicación con Claude AI
• StdioServerTransport: Para E/S a través de entrada/salida estándar
• Zod: Para validación de esquemas y seguridad de tipos
• Child Process: Para generar y gestionar procesos externos

Licencia

MIT

Autor

@streen9

Contribuciones

¡Las contribuciones son bienvenidas! No dudes en enviar una solicitud de extracción (Pull Request).