Servidor MCP

¿ Qué es el MCP?

MCP (Model Context Protocol) es un protocolo estandarizado que permite a los asistentes de IA acceder a fuentes de datos y herramientas externas. Nuxt UI proporciona un servidor MCP que permite a los asistentes de IA como Claude Code, Cursor y Windsurf acceder directamente a la información de componentes, código fuente y ejemplos de uso.

El servidor MCP proporciona acceso estructurado a nuestra biblioteca de componentes, lo que facilita a las herramientas de IA comprender y ayudar con el desarrollo de la interfaz de usuario de Nuxt.

Recursos disponibles

El servidor MCP de Nuxt UI proporciona los siguientes recursos para la detección:

• resource://nuxt-ui/components: Examinar todos los componentes disponibles con categorías
• resource://nuxt-ui/composables: Examinar todos los composables disponibles con categorías
• resource://nuxt-ui/examples: Examinar todos los ejemplos de código disponibles
• resource://nuxt-ui/templates: Examinar todas las plantillas de proyecto disponibles
• resource://nuxt-ui/documentation-pages: Examinar todas las páginas de documentación disponibles

Puede acceder a estos recursos con herramientas como Claude Code utilizando @.

Herramientas disponibles

El servidor MCP de Nuxt UI proporciona las siguientes herramientas organizadas por categoría:

Herramientas de búsqueda

• search-components: Buscar componentes por nombre, categoría o intención. Nombres alternativos como "segmented control" o "combobox" se comparan y los resultados se clasifican por relevancia. Sin parámetros, enumera todos los componentes.
• search-composables: Búsqueda de composables por nombre o descripción.
• search-icons: Busca iconos en las colecciones de Iconify (por defecto lucide). Devuelve nombres de iconos en el formato i-{prefix}-{name} utilizado por Nuxt UI

Herramientas de componentes

• get-component: Recupera la documentación y los detalles de los componentes. Soporta un parámetro sections (usage, examples, api, theme, changelog) para obtener solo partes específicas y reducir el tamaño de la respuesta.
• get-component-metadata: Recupera metadatos para un componente incluyendo props, slots y eventos (ligero, sin contenido de documentación). Props son compactos por defecto, pase full: true para los esquemas de prop recursivos sin procesar

Herramientas de Documentación

• search-documentation: Busca páginas de documentación por título, descripción o sección. Sin parámetros, enumera todas las páginas. Use section para filtrar (por ejemplo, "getting-started", "components")
• get-documentation-page: recupera el contenido de la página de documentación por ruta URL. admite un parámetro headings para obtener solo secciones h2 específicas (por ejemplo, ["Usage", "API"]) y reducir el tamaño de la respuesta.

Herramientas de plantilla

• list-templates: enumera todas las plantillas de interfaz de usuario de Nuxt disponibles con filtrado de framework opcional
• get-template: recupera la descripción, características y enlaces de una plantilla

Herramientas de ejemplo

• list-examples: muestra los nombres de todos los ejemplos de interfaz de usuario disponibles
• get-example: Recupera el código fuente de un ejemplo de interfaz de usuario

Herramientas de migración

• get-migration-guide: recupera la guía de migración y las instrucciones de actualización para esta versión de Nuxt UI

Limit herramientas disponibles

Configure el encabezado HTTP opcional X-MCP-Tools en una lista de nombres de herramientas separados por comas para exponer solo las herramientas que necesita su asistente.

Utilice los nombres exactos de las herramientas MCP de kebab-case, por ejemplo:

{
  "X-MCP-Tools": "search-components,get-component"
}

Ningún encabezado expone todas las herramientas, un encabezado vacío no expone ninguna herramienta y un nombre de herramienta desconocido devuelve un error de configuración.

Prompts disponibles

El servidor MCP de Nuxt UI proporciona indicaciones guiadas para flujos de trabajo comunes:

• find-component-for-usecase: Encuentre el mejor componente para su caso de uso específico
• implement-component-with-props: Generar una implementación completa de componentes con los accesorios adecuados
• setup-project-with-template: Obtenga instrucciones de configuración guiadas para las plantillas de proyecto

Puede acceder a estos recursos con herramientas como Claude Code utilizando /.

Configuración

El servidor MCP de Nuxt UI utiliza transporte HTTP y se puede configurar en diferentes asistentes de IA.

ChatGPT (Edición española)

Siga estos pasos para configurar la interfaz de usuario de Nuxt como un conector dentro de ChatGPT:

1. x**Habilitar el modo de desarrollador: **
   • Go a "Configuración">"Conectores">"Configuración avanzada">"Modo desarrollador"
2. x**Abrir configuración de ChatGPT **
3. ** En la pestaña Conectores, cree un nuevo conector: ** Xph129xDale un nombre: Xph130x
   • MCP server URL: https://ui.nuxt.com/mcp XPH133x Autenticación: XPH134x
4. xClic en Create

El conector de interfaz de usuario de Nuxt aparecerá en la herramienta "Modo de desarrollador" del compositor más adelante durante las conversaciones.

claude código

Añadir el servidor utilizando el comando CLI:

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

claude escritorio

Instrucciones de instalación:

1. Abra Claude Desktop y vaya a "Configuración">"Desarrollador".
2. Haga clic en "Editar configuración". Esto abrirá el directorio local de Claude. Modifica el archivo claude_desktop_config.json con la configuración personalizada del servidor MCP.

{
  "mcpServers": {
    "nuxt-ui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://ui.nuxt.com/mcp"
      ]
    }
  }
}

4. Restart Claude Desktop app. El servidor MCP de la interfaz de usuario de Nuxt debería estar registrado.

Cursor en línea

Instalación rápida:

Haga clic en el botón de abajo para instalar el servidor MCP de Nuxt UI directamente en Cursor:

Manual Instrucciones de instalación:

1. Abra el cursor y vaya a "Configuración">"Herramientas y MCP"
2. Add the Nuxt UI MCP Server Configuration (Configuración del servidor MCP de Nuxt UI)

O crear/actualizar manualmente .cursor/mcp.json en la raíz del proyecto:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Gemini CLI (Edición española)

Instrucciones de instalación:

1. Localice el archivo de configuración de la CLI de Gemini (normalmente, el archivo.gemini/settings.json o el especificado en su entorno).
2. Agregue la siguiente configuración a su objeto mcpServers:

{
  "mcpServers": {
    "nuxt-ui": {
      "httpUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

3. Reinicie la sesión de su terminal o vuelva a cargar la CLI. Las herramientas del servidor MCP de la interfaz de usuario de Nuxt estarán disponibles para su uso.

GitHub Agente de copiloto

Si ya ha configurado servidores MCP en Visual Studio Code, reemplace la clave servers por mcpServers y agregue una clave tools que especifique qué herramientas están disponibles para Copilot.

Instrucciones de configuración:

1. Navegar a su repositorio de GitHub
2. Ir a Settings> Código y automatización> Copilot> **Agente de codificación **
3. En la sección configuración**MCP, agregue la siguiente configuración:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

4. Click para guardar

Validación de la configuración:

Para verificar que el servidor MCP está configurado correctamente:

1. Crear un problema en su repositorio y asignarlo a Copilot
2. Espera a que el copiloto cree una solicitud de extracción
3. En la solicitud de extracción, haga clic en Ver sesión en el evento de línea de tiempo "Copiloto comenzó a trabajar"
4. Haga clic en el botón de puntos suspensivos (...) en la parte superior derecha, luego haga clic en Copiloto en la barra lateral
5. Expanda el paso Iniciar servidores MCP para ver las herramientas Nuxt configuradas

Para obtener más información sobre el uso de MCP con el agente de codificación GitHub Copilot, consulte el agente de codificación Extend con MCP.

GitHub Copilot CLI

Instrucciones de instalación:

1. Start GitHub Copilot CLI en modo interactivo.
2. Ejecutar /mcp add.
3. Rellena el formulario de configuración con:
   • Servidor Name: nuxt-ui
   • **Servidor Tipo de servidor: HTTP
   • xURL: https://ui.nuxt.com/mcp
   • Headers: dejar vacío
   • **Herramientas **: *
4. Pulse Ctrl + S para guardar. El servidor MCP está disponible inmediatamente sin reiniciar la CLI.

O agregue el servidor directamente a ~/.copilot/mcp-config.json:

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}

Utilice /mcp show para confirmar que el servidor está configurado y disponible.

Para obtener más detalles, consulte Adding MCP servers for GitHub Copilot CLI.

Google Antigravedad

Instrucciones de configuración:

1. Abra la tienda MCP a través del menú desplegable "..." en la parte superior del panel de agentes del editor.
2. Haga clic en "Administrar servidores MCP"
3. Haga clic en "Ver configuración en bruto" Modificar el mcp_config.json con su configuración de servidor MCP personalizado:

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

5. Regresa a la pestaña "Administrar servidores MCP" y haz clic en "Actualizar". Ahora debería aparecer el servidor MCP de Nuxt UI.

XPH314XLe Chat Mistral

Instrucciones de instalación:

1. Navegue a "Inteligencia">"Conectores"
2. Haga clic en el botón "Agregar conector", luego seleccione "Conector MCP personalizado"
3. Create tu conector MCP personalizado: Nombre del conector: NuxtUI URL del servidor - xxhttps://ui.nuxt.com/mcp

Código abierto

Instrucciones de instalación:

1. En la raíz del proyecto, crear opencode.json
2. Añadir la siguiente configuración:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt-ui": {
      "type": "remote",
      "url": "https://ui.nuxt.com/mcp",
      "enabled": true
    }
  }
}

Visual Studio en línea

Instrucciones de instalación:

1. Abra el código VS y acceda a la paleta de comandos (Ctrl/Cmd + Shift + P)
2. Type "Preferencias: Configuración de espacio de trabajo abierto (JSON)" y selecciónelo
3. Navegue a la carpeta .vscode de su proyecto o cree una si no existe
4. Crear o editar el archivo mcp.json con la siguiente configuración:

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "headers": {
        "X-MCP-Tools": "search-components,get-component"
      }
    }
  }
}

Quite la entrada headers para que todas las herramientas MCP de Nuxt UI estén disponibles.

Xph372xWindsurf en línea

Instrucciones de instalación:

1. Abra Windsurf y vaya a "Configuración">"Configuración de Windsurf">"Cascade"
2. Haga clic en el botón "Administrar MCPs", luego seleccione la opción "Ver configuración en bruto"
3. Agregue la siguiente configuración a la configuración de su MCP:

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

xZed (Edición española)

Instrucciones de instalación:

1. Abra Zed y vaya a "Configuración">"Abrir configuración"
2. Navegar hasta el archivo de configuración JSON
3. Añadir la siguiente configuración del servidor de contexto a su configuración:

{
  "context_servers": {
    "nuxt-ui": {
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

Ejemplos de uso

Una vez configurado, puede hacer preguntas a su asistente de IA como:

• "Lista de todos los componentes de interfaz de usuario Nuxt disponibles"
• "Obtener documentación de componentes del botón"
• "Mostrar sólo los ejemplos de uso del botón"
• "¿ Qué accesorios acepta Input?"
• "Buscar componentes relacionados con la forma"
• "Buscar iconos de flecha en lucide"
• "Lista de plantillas de tablero"
• "Obtener instrucciones de configuración de plantillas"
• "Mostrar guía de instalación"
• "Obtener la guía de migración"
• "Lista de ejemplos"
• "Obtener código de ejemplo de ContactForm"

El asistente de inteligencia artificial utilizará el servidor MCP para obtener datos JSON estructurados y proporcionar asistencia guiada para la interfaz de usuario de Nuxt durante el desarrollo.