React MCP

React MCP (Model Context Protocol)

Uma implementação de servidor poderosa que permite que a IA Claude interaja com aplicações React através do Model Context Protocol.

Exemplo de Uso

• Markdown Editor/Viewer By Claude

• API Tester By Claude

Visão Geral

React MCP fornece uma ponte entre a IA Claude e o ecossistema React, permitindo que Claude:

• Crie novas aplicações React
• Execute servidores de desenvolvimento React
• Gerencie arquivos e diretórios
• Instale pacotes npm
• Execute comandos de terminal
• Rastreie e gerencie processos de longa duração

Este servidor implementa o Model Context Protocol, fornecendo a Claude a capacidade de realizar ações reais no ambiente de desenvolvimento.

Recursos

• Gerenciamento de Projetos React

  • Criar novas aplicações React com modelos opcionais
  • Executar servidores de desenvolvimento
  • Gerenciar dependências

• Operações de Arquivo

  • Ler e escrever arquivos
  • Editar componentes e configuração React

• Gerenciamento de Processos

  • Iniciar e monitorar processos de longa duração
  • Acompanhar a saída do processo em tempo real
  • Encerrar processos quando necessário

• Execução de Comandos

  • Executar comandos de terminal arbitrários
  • Instalar pacotes npm
  • Executar tarefas de desenvolvimento

• Registro Abrangente

  • Logs detalhados em JSON e texto
  • Rastreamento de processos com carimbos de data/hora
  • Histórico de execução

Instalação

Instalando via Smithery

Para instalar o React MCP para o Claude Desktop automaticamente via Smithery:

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

Instalação Manual

1. Clone este repositório
2. Instale as dependências:

npm install

Uso

Adicione isso em claude_desktop_config:

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

O servidor roda no transporte stdio, permitindo que seja usado com o Desktop Claude APP como uma ferramenta do Model Context Protocol.

Ferramentas Disponíveis

create-react-app

Cria uma nova aplicação React.

Parâmetros:

• name (obrigatório): Nome do aplicativo React
• template (opcional): Modelo a ser usado (ex.: typescript, cra-template-pwa)
• directory (opcional): Diretório base para criar o aplicativo (padrão: diretório pessoal)

run-react-app

Executa uma aplicação React em modo de desenvolvimento.

Parâmetros:

• projectPath (obrigatório): Caminho para a pasta do projeto React

run-command

Executa um comando de terminal.

Parâmetros:

• command (obrigatório): Comando a ser executado
• directory (opcional): Diretório para executar o comando (padrão: diretório atual)

get-process-output

Obtém a saída de um processo em execução ou concluído.

Parâmetros:

• processId (obrigatório): ID do processo para obter a saída

stop-process

Interrompe um processo em execução.

Parâmetros:

• processId (obrigatório): ID do processo a ser interrompido

list-processes

Lista todos os processos em execução.

edit-file

Cria ou edita um arquivo.

Parâmetros:

• filePath (obrigatório): Caminho para o arquivo a ser editado
• content (obrigatório): Conteúdo a ser escrito no arquivo

read-file

Lê o conteúdo de um arquivo.

Parâmetros:

• filePath (obrigatório): Caminho para o arquivo a ser lido

install-package

Instala um pacote npm em um projeto.

Parâmetros:

• packageName (obrigatório): Nome do pacote a ser instalado (pode incluir versão)
• directory (opcional): Diretório do projeto (padrão: diretório atual)
• dev (opcional): Se deve instalar como dependência de desenvolvimento

check-installation-status

Verifica o status de um processo de instalação de pacote.

Parâmetros:

• processId (obrigatório): ID do processo de instalação a ser verificado

Registro

O servidor mantém logs detalhados no diretório logs:

• react-mcp-logs.json: Logs JSON estruturados
• react-mcp-logs.txt: Logs de texto legíveis por humanos

Arquitetura

O servidor usa os seguintes componentes principais:

• Model Context Protocol SDK: Para comunicação com a IA Claude
• StdioServerTransport: Para E/S através de entrada/saída padrão
• Zod: Para validação de esquema e segurança de tipos
• Child Process: Para criar e gerenciar processos externos

Licença

MIT

Autor

@streen9

Contribuição

Contribuições são bem-vindas! Sinta-se à vontade para enviar um Pull Request.