Ignite UI CLI MCP

    El Ignite UI CLI MCP es un servidor Model Context Protocol (MCP) que permite a los asistentes de IA andamiar proyectos, modificar aplicaciones existentes, crear y actualizar componentes y responder preguntas de documentación para Ignite UI for Angular aplicaciones. Conecta el MCP de Ignite UI CLI a tu editor, repositorio de GitHub o cliente de IA de escritorio y describe lo que quieres: el asistente usa las herramientas CLI por ti.

    Descripción general

    Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP. CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.

    La ruta recomendada para configurarlo es empezar primero con Ignite UI CLI. Esa ruta crea el proyecto, instala los paquetes requeridos y escribe la configuración inicial de MCP para VS Code. También puedes empezar desde una carpeta vacía y dejar que el asistente cree el proyecto a través de MCP, o conectar MCP a un proyecto que ya existe.

    Ejemplos de indicaciones para probar una vez conectado:

    "Crea un nuevo proyecto Ignite UI for Angular en esta carpeta, usa los valores predeterminados recomendados y añade una página de panel inicial con datos de muestra."

    "Añade una nueva página de cuadrícula a este proyecto, conéctala a datos de muestreo y mantén la estructura de navegación actual."

    "¿Qué propiedades y eventos expone el componente de combo, y cuáles son los más útiles para un desplegable buscable?"

    "Actualizar el proyecto existente para añadir un diseño de navegación lateral y preservar las páginas y rutas actuales."

    Prerequisites

    Antes de configurar el servidor MCP, asegúrate de tener:

    • Node.js (v18 o posterior) instalado - proporciona elnpx comando utilizado para iniciar el servidor.
    • Un cliente de IA con soporte MCP, por ejemplo, VS Code con GitHub Copilot, GitHub Copilot Cloud Agent, Cursor, Claude Desktop, Claude Code o un IDE de JetBrains con el plugin AI Assistant.
    • Acceso a Internet para lanpx resolución de paquetes la primera vez que el servidor arranca.
    • Uno de los siguientes puntos de partida:
      • una carpeta vacía para un nuevo proyecto
      • un proyecto que creaste con Ignite UI CLI
      • un proyecto de Ignite UI for Angular existente en el que quieres seguir trabajando

    Si quieres herramientas de tematización en la misma sesión del cliente yigniteui-theming no están ya disponibles en tu proyecto, ejecuta:

    npm install igniteui-theming

    Configure Ignite UI CLI MCP for Your AI Client

    El servidor MCP se lanza a través denpx. No se requiere instalación separada más allá de Node.js y acceso aligniteui-cli paquete.

    El comando canónico de lanzamiento es:

    npx -y igniteui-cli mcp
    Note

    La-y bandera indicanpx que se confirme automáticamente la solicitud de descarga del paquete para que el servidor pueda arrancar sin intervención manual.

    Choose a setup path

    Puedes empezar con Ignite UI CLI MCP de tres maneras:

    Recomendado - CLI primero Crea el proyecto primero con Ignite UI CLI usandoig new o el comando de emparejamientonpx --package igniteui-cli igniteui new. Esta es la configuración más sencilla porque Ignite UI CLI estructura el proyecto, instala los paquetes requeridos y escribe.vscode/mcp.json automáticamente para VS Code. Después de eso, solo necesitas revisar la configuración del MCP generada y abrir el proyecto en tu cliente de IA.

    Carpeta vacía Empieza con una carpeta completamente vacía, añade manualmente la configuración del MCP y luego pide al asistente que cree el proyecto por chat. Este camino es útil cuando quieres que MCP impulse el flujo de creación del proyecto desde el principio en lugar de ejecutar primero la CLI tú mismo.

    Proyecto existente Añade la configuración MCP a un proyecto que ya tengas y sigue trabajando en la base de código actual. Ejecutaig ai-config (ong generate @igniteui/angular-schematics:ai-config para Angular proyectos) para escribir.vscode/mcp.json y copiar automáticamente las Habilidades del Agente en tu proyecto. Para otros clientes de IA, copia las entradas del servidor de las secciones específicas del cliente que aparecen a continuación.

    Los tres caminos usan los mismos servidores MCP. La diferencia está únicamente en cómo se prepara el proyecto antes de empezar a hacer el prompt:

    • en la ruta CLI-first, Ignite UI CLI crea el proyecto y prepara la primera configuración MCP para ti
    • en la ruta de carpeta vacía, primero creas la configuración MCP y dejas que el asistente cree el proyecto después
    • en la ruta del proyecto existente, ejecutaig ai-config para escribir.vscode/mcp.json y copiar automáticamente las habilidades del agente, o añadir la configuración manualmente para otros clientes

    En todos los casos, una vez que los servidores MCP están conectados y visibles en tu cliente de IA, el asistente puede seguir trabajando en la misma sesión.

    Si estás creando un proyecto con Ignite UI CLI primero, puedes ejecutar la CLI de alguna de estas maneras:

    • Instalación global

      npm install -g igniteui-cli

      Esto te da elig comando en cualquier sesión de terminal y es la opción más clara si planeas crear y andamiar proyectos regularmente.

    • Sin una instalación global

      npx --package igniteui-cli igniteui new

      Esto ejecuta la CLI ennpx lugar de un comando globalig.

    Para la ruta con CLI-first, puedes crear el proyecto en modo guiado o con un comando directo.

    Usa el modo guiado cuando quieras que la CLI te guíe por las opciones disponibles:

    ig new

    Matching npx form:

    npx --package igniteui-cli igniteui new

    Usa un comando directo cuando ya conozcas la configuración del proyecto:

    ig new my-app --framework=angular --type=igx-ts --template=empty

    Matching npx form:

    npx ig new my-app --framework=angular --type=igx-ts --template=empty

    En modo guiado, Ignite UI preguntas de CLI para el nombre del proyecto, framework, plantilla, tema y si añadir un componente o completar la configuración. En modo directo, proporcionas el framework y cualquier opción compatible en el propio comando.

    VS Code

    GitHub Copilot en VS Code soporta servidores MCP mediante un archivo de configuración a nivel de espacio de trabajo. Ejecutaig ai-config (ong generate @igniteui/angular-schematics:ai-config qué) desde la raíz de tu proyecto para generar este archivo automáticamente. Para configurarlo manualmente, crea o edita.vscode/mcp.json en la raíz de tu proyecto:

    {
  "servers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

    Si creaste el proyecto con Ignite UI CLI primero, revisa lo generado.vscode/mcp.json y confirma que ambas entradas están presentes.

    Una vez guardado, abre el panel de chat de GitHub Copilot, cambia al modo Agente y las herramientas Ignite UI CLI MCP estarán disponibles.

    Note

    El soporte para MCP en VS Code requiere GitHub Copilot y VS Code 1.99 o posterior.

    Cursor

    Cursor soporta configuración MCP con alcance de proyecto. Crea o edita.cursor/mcp.json en la raíz de tu proyecto:

    {
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

    Los servidores se recogerán automáticamente cuando abras una nueva sesión de chat de Cursor.

    Note

    You can also configure MCP servers globally via Settings → MCP in Cursor.

    Claude Desktop

    Añade los servidores a tu archivo de configuración de escritorio Claude:

    • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
    • Windows: %APPDATA%\Claude\claude_desktop_config.json
    {
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

    Reinicia Claude Desktop después de guardar. Verás un indicador del servidor MCP (icono deslizante) en el área de entrada del chat, confirmando que las herramientas MCP están activas.

    Claude Code

    Claude Code soporta servidores MCP a través de su CLI y un archivo con.mcp.json alcance de proyecto. Para compartir la configuración con tu equipo, crea o edita.mcp.json en la raíz de tu proyecto:

    {
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

    Alternativamente, puedes añadir los servidores solo a través de la línea de comandos para tu entorno local:

    claude mcp add igniteui-cli -- npx -y igniteui-cli mcp
claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp

    Usa el/mcp comando dentro de Claude Code para verificar que los servidores están conectados.

    JetBrains IDEs

    JetBrains AI Assistant soporta servidores MCP a través de la configuración del IDE:

    1. Abre Configuración (o Preferencias en macOS).

    2. Navigate to Tools → AI Assistant → Model Context Protocol (MCP).

    3. Haz clic en + Añadir y elige Como JSON o utiliza los campos del formulario.

    4. Aquí entra la siguiente configuración:

      {
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

    5. Click OK and restart the AI Assistant.

    Note

    El soporte para MCP requiere que el plugin AI Assistant esté instalado y habilitado en tu IDE de JetBrains.

    Other MCP Clients

    Para cualquier otro cliente compatible con MCP, utiliza el transporte STDIO con estos comandos de lanzamiento:

    npx -y igniteui-cli mcp
npx -y igniteui-theming igniteui-theming-mcp

    GitHub

    El agente en la nube de GitHub Copilot soporta la configuración MCP a nivel de repositorio. En tu repositorio:

    1. Abre la página principal del repositorio.
    2. Click Settings.
    3. En la barra lateral, ve a Copilot y luego a Cloud agent.
    4. Pega tu JSON en la sección de configuración MCP.
    5. Click Save.

    Utiliza una configuración de repositorio así:

    {
  "mcpServers": {
    "igniteui-cli": {
      "type": "local",
      "command": "npx",
      "args": ["-y", "igniteui-cli", "mcp"],
      "tools": ["*"]
    },
    "igniteui-theming": {
      "type": "local",
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"],
      "tools": ["*"]
    }
  }
}

    Esta configuración es útil cuando quieres que el agente en la nube de GitHub use las mismas herramientas CLI MCP y Theming MCP directamente desde el contexto del repositorio.

    Available Tools

    El servidor MCP expone un conjunto de herramientas que la IA utiliza automáticamente en función de tus indicaciones. Nunca llamas directamente a estas herramientas. Describe lo que quieres en el chat y el asistente elige el adecuado. Esta tabla está aquí para que sepas qué hay disponible antes de empezar.

    Para obtener la lista en directo con los parámetros actuales, pregunta:

    "¿Qué herramientas proporciona el Ignite UI CLI MCP?"

    Aquí tienes un breve resumen de cada herramienta:

    Tool Descripción
    list_components Listas disponibles Ignite UI documentos de componentes para un framework. Acepta un filtro opcional de palabras clave (coincidencia de subcadenas insensibles a mayúsculas y minúsculas con nombre, palabras clave y resumen).
    get_doc Obtiene el contenido completo de descuento de un documento específico de un componente por nombre del caso del kebab (por ejemplo, ,grid-editing,combo-overview). Incluye ejemplos de código, tablas y enlaces.
    search_docs Búsqueda en texto completo en Ignite UI documentación para un framework. Devuelve hasta 20 resultados clasificados con extractos.
    get_project_setup_guide Devuelve la guía de configuración del proyecto para crear un nuevo proyecto en un framework específico, incluyendo pasos de la CLI e instrucciones de instalación.
    search_api Searches API entries by keyword or component name across Angular, React, Blazor and Web Components.
    get_api_reference Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, Blazor and Web Components.

    A un nivel general, las herramientas CLI MCP ayudan con:

    • Creando nuevos proyectos
    • Trabajando en proyectos existentes
    • Añadir y modificar componentes
    • Actualización de la estructura y configuración del proyecto
    • responder a preguntas sobre documentación y API
    Note

    La detección de marcos utiliza prefijos de componentes:for Angular,for React,for Web Components,.for Blazor El asistente detecta automáticamente el framework adecuado desde tus archivos abiertos o el contexto de prompts.

    El servidor de temas añade estilo, tema, paleta y flujos de trabajo de token a la misma sesión del cliente.

    Common Workflows

    Los siguientes escenarios de configuración muestran cuándo usar cada punto de partida.

    CLI-first setup

    Crea el proyecto con Ignite UI CLI primero cuando quieras la configuración guiada más rápida y lo que quieras.vscode/mcp.json generar automáticamente para ti.

    Example scenarios:

    • "Quiero crear un nuevo proyecto con Ignite UI CLI primero, abrir el proyecto generado en VS Code y continuar desde ahí con MCP."
    • "Ya sé que quiero un proyecto React, así que quiero crearlo con la CLI y luego usar MCP para añadir páginas y componentes."

    Empty folder setup

    Empieza desde una carpeta vacía cuando quieras que el asistente cree el proyecto desde chat después de añadir tú mismo la configuración MCP.

    Example scenarios:

    • "Tengo una carpeta completamente vacía y quiero que el asistente cree todo el proyecto desde el chat después de que MCP esté conectado."
    • "No quiero ejecutar Ignite UI CLI manualmente primero. Quiero que MCP impulse el primer paso de creación del proyecto."

    Existing project setup

    Conecta MCP a un proyecto existente cuando quieras mantener la base de código actual y usa el asistente para cambios de proyecto, trabajo de componentes y preguntas de documentación.

    Example scenarios:

    • "Ya tengo un proyecto y solo quiero añadir MCP para que el asistente me ayude a actualizar páginas y componentes."
    • "El proyecto ya existe, y principalmente quiero hacer preguntas sobre documentación y API mientras trabajo en la base de código actual."

    Troubleshooting

    npxno se reconoce

    Node.js no está instalado ni disponible en el entorno terminal actual. Instala Node.js desde nodejs.org y verifica con.node --version​

    igno se reconoce

    Si quieres usar el comando globalig, instala primero Ignite UI CLI connpm install -g igniteui-cli. Si no quieres una instalación global, usa elnpx --package igniteui-cli igniteui ... formulario en su lugar.

    Las herramientas MCP no aparecen tras guardar la configuración

    Recarga el espacio de trabajo, vuelve a abrir el editor o reinicia el cliente de IA. Algunos clientes requieren un reinicio completo para detectar nuevos archivos de configuración MCP.

    Un servidor no arranca

    Verifica que el contenido de configuración coincida exactamente con los ejemplos, incluyendo nombres clave y orden de argumentos.

    El proyecto fue creado, pero la configuración MCP solo está disponible para VS Code

    Ignite UI CLI escribe.vscode/mcp.json para la ruta CLI-first. Si usas Cursor, Claude Desktop, Claude Code, JetBrains, GitHub u otro cliente MCP, copia las mismas entradas del servidor en el formato y ubicación de configuración de ese cliente.

    El asistente está trabajando en la carpeta equivocada o no encuentra los archivos del proyecto

    Asegúrate de que el cliente de IA esté apuntando a la raíz del proyecto. Si usas un cliente basado en editor, abre la carpeta raíz del proyecto. Si usas un cliente de escritorio o chat primero, pon la carpeta correcta del proyecto disponible como contexto de sesión.

    La configuración de carpetas vacías no se comporta como se espera

    Comprueba que la carpeta esté realmente vacía antes de empezar. Si la carpeta ya contiene archivos de proyecto, usa la ruta del proyecto existente en lugar de tratarla como un nuevo espacio de trabajo vacío.

    La configuración MCP de GitHub es rechazada

    Valida que el JSON utiliza lamcpServers estructura y que cada entrada del servidor local incluyetype,command, yargs. Si incluyes eltools campo, usa nombres válidos de herramientas o["*"].

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.