react-docs-mcp

Pesquisa semântica alimentada por IA na documentação do React para Claude, Cursor e outros clientes MCP.

GitHub
8
Experimente este MCPPatrocinado

Documentação

React Docs MCP

Servidor MCP de Documentação React

Busca semântica com IA sobre a documentação do React para Claude, Cursor e outros clientes MCP.

Também disponível — mesma engine, outras documentações: 📱 react-native-docs-mcp (repositório) — documentação oficial do React Native (reactnative.dev), com fixação de versão por release 📋 react-hook-form-docs-mcp (repositório) — documentação oficial do React Hook Form (react-hook-form.com)

Todos os pacotes compartilham uma única engine de busca (desenvolvida neste monorepo em packages/), então melhorias chegam a todos eles.

React Docs MCP Demo

🚀 Instalação (Um Comando)

Claude Code

claude mcp add --transport stdio react-docs -- npx react-docs-mcp

Claude Desktop

Edite: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) ou %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "react-docs": {
      "command": "npx",
      "args": ["-y", "react-docs-mcp"]
    }
  }
}

Cursor

Configurações → Configurações do Cursor → Ferramentas e MCP → Adicionar servidor:

{
  "mcpServers": {
    "react-docs": {
      "command": "npx",
      "args": ["-y", "react-docs-mcp"]
    }
  }
}

É isso! Reinicie seu editor e pergunte sobre React.

Recursos

  • 🔑 Sem Chave de API: Diferente de serviços de documentação hospedados (Context7, GitMCP), tudo roda na sua máquina — sem conta, sem chave, sem limites de requisição
  • 🔌 Funciona Offline: Clona o repositório oficial da documentação react.dev uma vez e depois busca localmente — sem chamadas de rede no momento da consulta
  • 🔍 Busca Semântica: Busca com IA usando embeddings para correspondências conceituais
  • ⚡ Resultados Rápidos: Busca vetorial em memória com ranqueamento híbrido por palavras-chave + semântica
  • 📦 Zero Configuração: Funciona com npx — sem necessidade de instalação
  • 🤖 IA Local: Executa embeddings localmente (sem custos de API)
  • 📝 Respostas Concisas: Retorna resumos em vez de documentação completa
  • 🔄 Sincronização Automática: Puxa as últimas documentações do react.dev automaticamente

Configuração

Para Claude Desktop

Adicione ao seu arquivo de configuração do Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "react-docs": {
      "command": "node",
      "args": ["/absolute/path/to/reactDocsMcp/dist/index.js"]
    }
  }
}

Para Claude Code

Adicione à sua configuração de configurações MCP:

{
  "mcpServers": {
    "react-docs": {
      "command": "node",
      "args": ["/absolute/path/to/reactDocsMcp/dist/index.js"]
    }
  }
}

Uso

Uma vez configurado, o servidor fornece as seguintes capacidades aos agentes de IA:

Ferramentas

search_react_docs

Busca na documentação do React.

Parâmetros:

  • query (obrigatório): String de consulta de busca
  • section (opcional): Filtrar por seção (learn, reference, blog, community)
  • limit (opcional): Número máximo de resultados (padrão: 10, máximo: 50)

Exemplo:

Search for "useState hook" in the learn section

get_doc

Obtém uma página específica da documentação.

Parâmetros:

  • path (obrigatório): Caminho do documento (ex.: "learn/hooks/useState")
  • full (opcional): Retorna a página bruta completa em vez do resumo de ~1500 caracteres (padrão: false)

Exemplo:

Get the useState documentation

Por que full? O resumo padrão de ~1500 caracteres é suficiente para a maioria das referências de API, mas pode cortar no meio de páginas mais longas — guias de migração, tutoriais de atualização ou qualquer coisa com muitos passos sequenciais. Se o resumo parecer terminar no meio de um pensamento ou você precisar de cada passo de um guia, peça a página completa:

Get the full content of the React 19 upgrade guide, not just the summary

que chama get_doc com { "path": "learn/upgrading-to-react-19", "full": true } e retorna a página bruta completa em vez do resumo truncado.

list_sections

Lista todas as seções de documentação disponíveis.

Exemplo:

What sections are available?

update_docs

Puxa a documentação mais recente do repositório Git.

CLI

npx react-docs-mcp --version   # print the installed package version and exit

(Fixação de versão via --docs-version é um recurso do react-native-docs-mcp — react.dev não tem documentação versionada.)

Exemplo:

Update the React documentation

Recursos

O servidor expõe a documentação como recursos com o padrão de URI:

react-docs://{section}/{path}

Exemplos:

  • react-docs://learn - Lista todos os documentos da seção learn
  • react-docs://learn/hooks/useState - Obtém a documentação do useState
  • react-docs://reference/react/Component - Obtém a referência da API de Componentes

Desenvolvimento

Executar em Modo de Desenvolvimento

npm run dev

Build

npm run build

Estrutura do Projeto

reactDocsMcp/
├── src/
│   ├── index.ts              # MCP server entry point
│   ├── docsManager.ts        # Git & file operations
│   ├── markdownParser.ts     # Markdown parsing
│   ├── searchEngine.ts       # Search implementation
│   ├── types.ts              # TypeScript types
│   └── config.ts             # Configuration
├── dist/                     # Compiled output
└── TECHNICAL_SPEC.md         # Technical documentation

Como Funciona

  1. Inicialização: Na primeira execução, clona o repositório oficial da documentação do React
  2. Indexação: Analisa todos os arquivos markdown e constrói um índice de busca em memória
  3. Busca: Fornece busca baseada em palavras-chave com pontuação de relevância
  4. Atualizações: Pode puxar as últimas alterações do repositório e reindexar

Solução de Problemas

O servidor não inicia

  • Certifique-se de que o Node.js 18+ está instalado
  • Verifique se o build foi concluído com sucesso (npm run build)
  • Verifique se o caminho na sua configuração MCP é absoluto e correto

Sem resultados de busca

  • O repositório pode ainda estar clonando (verifique a saída do console)
  • Tente executar a ferramenta update_docs para atualizar o índice

Falha no clone do Git

  • Verifique a conexão com a internet
  • Verifique se o Git está instalado e acessível
  • Verifique as configurações de firewall/proxy

Detalhes Técnicos

Para informações técnicas detalhadas, veja TECHNICAL_SPEC.md.

Licença

MIT

Contribuição

Este é um projeto pessoal para conectar a documentação do React a agentes de codificação com IA. Sinta-se à vontade para fazer fork e modificar para seu próprio uso.