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.