react-docs-mcp

Búsqueda semántica impulsada por IA en la documentación de React para Claude, Cursor y otros clientes MCP.

GitHub
8
Prueba este MCPPatrocinado

Documentación

React Docs MCP

Servidor MCP de Documentación de React

Búsqueda semántica impulsada por IA sobre la documentación de React para Claude, Cursor y otros clientes MCP.

También disponible — mismo motor, otros documentos: 📱 react-native-docs-mcp (repositorio) — documentación oficial de React Native (reactnative.dev), con fijación de versión por lanzamiento 📋 react-hook-form-docs-mcp (repositorio) — documentación oficial de React Hook Form (react-hook-form.com)

Todos los paquetes comparten un motor de búsqueda (desarrollado en este monorepo bajo packages/), por lo que las mejoras llegan a todos ellos.

React Docs MCP Demo

🚀 Instalación (Un Comando)

Claude Code

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

Claude Desktop

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

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

Cursor

Configuración → Configuración de Cursor → Herramientas y MCP → Añadir servidor:

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

¡Eso es todo! Reinicia tu editor y pregunta sobre React.

Características

  • 🔑 Sin Clave de API: A diferencia de los servicios de documentación alojados (Context7, GitMCP), todo se ejecuta en tu máquina — sin cuenta, sin clave, sin límites de velocidad
  • 🔌 Funciona Sin Conexión: Clona el repositorio oficial de documentación de react.dev una vez, luego busca localmente — sin llamadas de red en el momento de la consulta
  • 🔍 Búsqueda Semántica: Búsqueda impulsada por IA usando incrustaciones para coincidencias conceptuales
  • ⚡ Resultados Rápidos: Búsqueda vectorial en memoria con clasificación híbrida de palabras clave + semántica
  • 📦 Cero Configuración: Funciona con npx - sin necesidad de instalación
  • 🤖 IA Local: Ejecuta incrustaciones localmente (sin costos de API)
  • 📝 Respuestas Concisas: Devuelve resúmenes en lugar de documentación completa
  • 🔄 Sincronización Automática: Extrae los últimos documentos de react.dev automáticamente

Configuración

Para Claude Desktop

Añade a tu archivo de configuración de 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

Añade a tu configuración de ajustes MCP:

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

Uso

Una vez configurado, el servidor proporciona las siguientes capacidades a los agentes de IA:

Herramientas

search_react_docs

Busca en la documentación de React.

Parámetros:

  • query (obligatorio): Cadena de consulta de búsqueda
  • section (opcional): Filtrar por sección (learn, reference, blog, community)
  • limit (opcional): Número máximo de resultados (predeterminado: 10, máximo: 50)

Ejemplo:

Search for "useState hook" in the learn section

get_doc

Obtiene una página de documentación específica.

Parámetros:

  • path (obligatorio): Ruta del documento (por ejemplo, "learn/hooks/useState")
  • full (opcional): Devuelve la página cruda completa en lugar del resumen de ~1500 caracteres (predeterminado: false)

Ejemplo:

Get the useState documentation

¿Por qué full? El resumen predeterminado de ~1500 caracteres es suficiente para la mayoría de las referencias de API, pero puede cortarse a mitad de páginas más largas — guías de migración, tutoriales de actualización o cualquier cosa con muchos pasos secuenciales. Si el resumen parece terminar a mitad de un pensamiento o necesitas cada paso de una guía, solicita la página completa:

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

que llama a get_doc con { "path": "learn/upgrading-to-react-19", "full": true } y devuelve la página cruda completa en lugar del resumen truncado.

list_sections

Lista todas las secciones de documentación disponibles.

Ejemplo:

What sections are available?

update_docs

Extrae la documentación más reciente del repositorio Git.

CLI

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

(La fijación de versión mediante --docs-version es una característica de react-native-docs-mcp — react.dev no tiene documentación versionada.)

Ejemplo:

Update the React documentation

Recursos

El servidor expone la documentación como recursos con el patrón de URI:

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

Ejemplos:

  • react-docs://learn - Lista todos los documentos de la sección learn
  • react-docs://learn/hooks/useState - Obtiene la documentación de useState
  • react-docs://reference/react/Component - Obtiene la referencia de API de Component

Desarrollo

Ejecutar en Modo de Desarrollo

npm run dev

Compilar

npm run build

Estructura del Proyecto

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

Cómo Funciona

  1. Inicialización: En la primera ejecución, clona el repositorio oficial de documentación de React
  2. Indexación: Analiza todos los archivos markdown y construye un índice de búsqueda en memoria
  3. Búsqueda: Proporciona búsqueda basada en palabras clave con puntuación de relevancia
  4. Actualizaciones: Puede extraer los últimos cambios del repositorio y reindexar

Solución de Problemas

El servidor no se inicia

  • Asegúrate de que Node.js 18+ esté instalado
  • Comprueba que la compilación se completó correctamente (npm run build)
  • Verifica que la ruta en tu configuración MCP sea absoluta y correcta

Sin resultados de búsqueda

  • El repositorio puede estar aún clonándose (revisa la salida de la consola)
  • Intenta ejecutar la herramienta update_docs para actualizar el índice

La clonación de Git falla

  • Comprueba la conexión a internet
  • Verifica que Git esté instalado y sea accesible
  • Revisa la configuración de firewall/proxy

Detalles Técnicos

Para información técnica detallada, consulta TECHNICAL_SPEC.md.

Licencia

MIT

Contribuciones

Este es un proyecto personal para conectar la documentación de React a agentes de codificación de IA. Siéntete libre de hacer un fork y modificarlo para tu propio uso.