K
KoreUI

MCP Server

AI

Conecta KoreUI a tu asistente de IA favorito. El MCP Server expone toda la documentación y API de componentes para que Claude, Cursor y otros modelos puedan ayudarte a escribir código más rápido.

¿Qué es el MCP?

El Model Context Protocol (MCP) es un estándar abierto que permite a los asistentes de IA acceder a herramientas y contexto externo en tiempo real. El MCP de KoreUI expone la documentación completa de todos los componentes — props, variantes, ejemplos y tokens de diseño — directamente en tu editor de código o chat con el modelo.

En lugar de copiar y pegar fragmentos de docs, el modelo consulta la API del MCP y obtiene exactamente lo que necesita para generar código correcto con KoreUI.

Contexto instantáneo

El modelo conoce cada prop, variante y ejemplo sin que tengas que explicar nada.

Código correcto

Genera Blade components con la sintaxis exacta de KoreUI, no con alucinaciones.

Siempre actualizado

La documentación se sirve en tiempo real desde el servidor, siempre a la última versión.

Herramientas disponibles

El MCP expone 5 herramientas que el modelo puede invocar automáticamente según lo que necesite:

Herramienta Descripción
list-components Lista todos los componentes disponibles con su categoría y descripción breve.
get-component-docs Obtiene la documentación completa de un componente: props, variantes, ejemplos y notas de uso.
search-docs Busca en toda la documentación por palabras clave. Útil cuando no sabes el nombre exacto del componente.
get-config-options Devuelve todas las opciones de configuración disponibles en kore-ui.php con sus valores por defecto.
get-theme-tokens Lista todos los design tokens semánticos del sistema de theming (colores, radios, sombras).

Configuración

El MCP de KoreUI está disponible como servidor HTTP remoto. No necesitas instalar nada localmente. Solo agrega la siguiente URL a tu cliente MCP:

URL del servidor MCP

https://kore-ui-mcp.ovilla.dev/mcp

C Claude Code

Agrega el MCP al proyecto con un solo comando:

claude mcp add --transport http kore-ui https://kore-ui-mcp.ovilla.dev/mcp
claude mcp add --transport http kore-ui https://kore-ui-mcp.ovilla.dev/mcp

O agrégalo manualmente en .mcp.json en la raíz de tu proyecto:

.mcp.json 
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}

O de forma global en ~/.claude/settings.json:

~/.claude/settings.json 
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}

C Claude Desktop

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

claude_desktop_config.json 
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}

↗ Cursor

En Settings → MCP, agrega un nuevo servidor con estos valores:

Cursor MCP Settings 
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}
{
    "mcpServers": {
        "kore-ui": {
            "type": "http",
            "url": "https://kore-ui-mcp.ovilla.dev/mcp"
        }
    }
}

¿Cómo usarlo?

Una vez configurado, el modelo consulta el MCP automáticamente cuando detecta que estás trabajando con KoreUI. También puedes mencionarlo explícitamente:

"Crea un formulario de registro con x-kore::input, x-kore::select y x-kore::button"

"Muéstrame todas las variantes del componente Alert con ejemplos de código"

"¿Cómo uso el overlay con wire:model en Livewire 4?"

"Genera un DataTable para el modelo Product con columnas de precio, stock y estado"

"¿Qué design tokens tiene KoreUI para personalizar los colores?"

Tip: Si usas Claude Code, puedes agregar usa el MCP de kore-ui en tu CLAUDE.md para que el modelo lo consulte proactivamente en cada sesión.