React MCP (Protocolo de contexto de modelo)

Una poderosa implementación de servidor que permite a Claude AI interactuar con aplicaciones React a través del Protocolo de Contexto de Modelo.

Ejemplo de uso

• Editor/visor de Markdown por Claude
• Probador de API por Claude

Descripción general

React MCP proporciona un puente entre Claude AI y el ecosistema React, lo que le permite a Claude:

• Crear nuevas aplicaciones React
• Ejecutar servidores de desarrollo de React
• Administrar archivos y directorios
• Instalar paquetes npm
• Ejecutar comandos de terminal
• Seguimiento y gestión de procesos de larga duración

Este servidor implementa el Protocolo de Contexto de Modelo, proporcionando a Claude la capacidad de realizar acciones del mundo real en el entorno de desarrollo.

Características

• Gestión de proyectos React
  • Cree nuevas aplicaciones React con plantillas opcionales
  • Ejecutar servidores de desarrollo
  • Administrar dependencias
• Operaciones con archivos
  • Leer y escribir archivos
  • Editar componentes y configuración de React
• Gestión de procesos
  • Iniciar y supervisar procesos de larga duración
  • Seguimiento del resultado del proceso 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 completo
  • Registros detallados de JSON y texto
  • Seguimiento de procesos con marcas de tiempo
  • Historial de ejecuciones

Instalación

1. Clonar este repositorio
2. Instalar dependencias:

Uso

Agregue esto en claude_desktop_config :

El servidor se ejecuta en el transporte stdio, lo que permite su uso con la aplicación Desktop Claude como herramienta de protocolo de contexto de modelo.

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 utilizar (por ejemplo, typescript, cra-template-pwa)
• directory (opcional): directorio base para crear la aplicación (predeterminado: 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 donde ejecutar el comando (predeterminado: 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 se obtendrá la salida

stop-process

Detiene un proceso en ejecución.

Parámetros:

• processId (obligatorio): ID del proceso a detener

list-processes

Enumera 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 que se 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 la versión)
• directory (opcional): Directorio del proyecto (predeterminado: directorio actual)
• dev (opcional): si se instalará como una dependencia de desarrollo

check-installation-status

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

Parámetros:

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

Explotación florestal

El servidor mantiene registros detallados en el directorio logs :

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

Arquitectura

El servidor utiliza los siguientes componentes clave:

• SDK de protocolo de contexto de modelo : 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
• Proceso hijo : para generar y gestionar procesos externos

Licencia

Instituto Tecnológico de Massachusetts (MIT)

Autor

@streen9

Contribuyendo

¡Agradecemos sus contribuciones! No dude en enviar una solicitud de incorporación de cambios.