React.Components.Mcp.Server

yrrodriguezb/React.Components.Mcp.Server

3.1

If you are the rightful owner of React.Components.Mcp.Server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

The MCP React Components Server is a Node.js and TypeScript-based server designed to provide intelligent access to React component documentation and examples for LLMs like VS Code Copilot and Claude.

Tools
3
Resources
0
Prompts
0

MCP React Components Server

Servidor MCP (Model Context Protocol) para librerías de componentes React construido con Node.js, TypeScript y Clean Architecture.

🎯 Objetivo

Proporcionar un servidor MCP que permite a los LLMs (VS Code Copilot, Claude, etc.) acceder de forma inteligente a la documentación y ejemplos de componentes React de una librería.

🚀 Inicio Rápido

Instalación

npm install
npm run build

Ejecutar Servidor

# Desarrollo por defecto
npm run dev

# Desarrollo local con logs detallados
npm run dev:local

# Testing
npm run dev:test

Probar Servidor

# Cliente de pruebas TypeScript
npm run test:mcp:local

# Con entorno específico
npm run test:mcp:test

📁 Estructura del Proyecto

React.Components.Mcp.Server/
├── src/                   # Código fuente
│   ├── domain/            # Lógica de negocio
│   ├── application/       # Casos de uso
│   ├── infrastructure/    # Adaptadores externos
│   ├── presentation/      # Controladores
│   └── shared/            # Código compartido
├── tests/                 # Pruebas
├── docs/                  # Documentación del proyecto
├── dist/                  # Build output
└── README.md              # Este archivo

🔧 Configuración

Variables de Entorno

NODE_ENV=development
MCP_SERVER_DOCS_PATH=./docs
MCP_SERVER_EXAMPLES_PATH=./examples
MCP_SERVER_LOG_LEVEL=info

🛠️ Scripts Disponibles

Desarrollo

  • npm run dev - Desarrollo por defecto (usa .env)

Producción

  • npm run build - Compilar TypeScript
  • npm run lint - Linter
  • npm run start - Producción por defecto

Testing MCP

  • npm run test:mcp - Cliente con entorno por defecto

Otros

  • npm run lint - ESLint
  • npm run typecheck - Verificación de tipos
  • npm run test - Jest tests

🏗️ Arquitectura

Este proyecto implementa Clean Architecture con principios SOLID, separando las responsabilidades en capas bien definidas.

🔧 Herramientas MCP

search_documents

Busca documentos por contenido, tipo o tags.

{
  "name": "search_documents",
  "arguments": {
    "query": "button",
    "limit": 5,
    "tags": ["ui", "interactive"]
  }
}

get_document

Obtiene contenido completo de un documento.

{
  "name": "get_document",
  "arguments": {
    "id": "document_id_here"
  }
}

refresh_documents

Actualiza la caché de documentos.

{
  "name": "refresh_documents",
  "arguments": {}
}

🤖 Integración con Claude Desktop

Configuración para Desarrollo

{
  "mcpServers": {
    "react-components": {
      "command": "npm",
      "args": ["run", "dev:local"],
      "cwd": "/ruta/completa/al/proyecto",
      "env": {
        "LOG_LEVEL": "debug"
      }
    }
  }
}

Configuración para Producción

{
  "mcpServers": {
    "react-components": {
      "command": "npm",
      "args": ["run", "start:local"],
      "cwd": "/ruta/completa/al/proyecto",
      "env": {
        "LOG_LEVEL": "info"
      }
    }
  }
}

📖 Documentación

Para más detalles sobre la arquitectura, configuración y uso, ver la carpeta /docs:

  • - Documentación completa de las herramientas
  • - Guía de configuración con Claude Desktop
  • - Documentación del cliente TypeScript

🧪 Testing

Cliente de Pruebas MCP

npm run test:mcpl  # Probar servidor con cliente TypeScript

Tests Unitarios

npm test                # Ejecutar todas las pruebas
npm run test:coverage   # Con reporte de cobertura
npm run test:watch      # Modo watch

🔍 Ejemplo de Uso

1. Iniciar servidor

npm run dev

2. Probar con cliente

npm run test:mcp

📄 Licencia

MIT