Ignite UI CLI MCP

Ignite UI CLI

Cree rápidamente proyectos, incluyendo Ignite UI for Angular e Ignite UI for Web Components, para una variedad de frameworks.

Resumen

Características:

• Crear estructura de proyecto
• Agregar vistas con componentes de Ignite UI (por ejemplo, Combo, Grid o Chart)
• Agregar plantillas basadas en escenarios con múltiples componentes (por ejemplo, un panel de control)
• Compilar e instalar paquetes npm
• Seleccionar un tema, soporte para temas personalizados próximamente
• Guía paso a paso

Frameworks compatibles

• Angular
• React
• Web Components
• Blazor
• jQuery

Requisitos previos

El repositorio alberga múltiples paquetes y orquesta su compilación y publicación con lerna y yarn workspaces.

Para compilar el repositorio localmente, necesita tener yarn instalado en su máquina. Para instrucciones de instalación, visite su página oficial

Paquetes

Este monorepo contiene varios paquetes que se combinan en el igniteui-cli:

Paquete	Descripción	Ubicación
@igniteui/cli-core	Contiene la funcionalidad principal de la herramienta CLI	packages/core
@igniteui/angular-templates	Contiene las definiciones de plantillas para componentes de Angular	packages/igx-templates
@igniteui/angular-schematics	Implementación de IgniteUI CLI para usarse con el motor de esquemas de Angular CLI	packages/ng-schematics
igniteui-cli	Herramienta CLI independiente de IgniteUI para React, Blazor, Angular, jQuery y Web Components	packages/cli
@igniteui/mcp-server	Servidor MCP que proporciona a los asistentes de IA documentación de Ignite UI y referencia de API	packages/igniteui-mcp/igniteui-doc-mcp

Tabla de Contenidos

• Instalación
• Uso
  • Paso a paso
  • Listar comandos disponibles
  • Generar proyectos y agregar componentes
    • Generar proyecto de Ignite UI for Angular
    • Generar proyecto de Ignite UI for React
    • Agregar componentes
  • Compilar y ejecutar
• Configurar herramientas de IA
• Servidor MCP
  • Uso con asistentes de IA
  • Pruebas con MCP Inspector
• Esquemas
  • Definiciones de esquemas
• Contribución

Instalación

Instale el paquete npm como módulo global:

npm install -g igniteui-cli

Uso

El punto de entrada principal es igniteui y también está aliasado como ig. Ambos pueden usarse indistintamente para llamar a los comandos disponibles. Consulte nuestra documentación Wiki para más detalles.

Paso a paso

Para obtener una experiencia guiada a través de las opciones disponibles, simplemente ejecute:

ig

Al crearse, el proyecto se cargará automáticamente en el navegador predeterminado. NOTA: Si eso no sucede, el puerto puede estar en uso. Los puertos varían según el tipo de proyecto; consulte la descripción del comando ig start para detalles sobre los puertos predeterminados.

Listar los comandos disponibles.

ig help

Generar proyectos y agregar componentes

Cree un nuevo proyecto pasando nombre, framework y tema de estilo.

ig new <project name> --framework=<framework> --type=<proj-type> --theme=<theme>

Esto creará el proyecto e instalará las dependencias necesarias.

Los parámetros además del nombre son opcionales. El framework predeterminado es "angular", el tipo de proyecto predeterminado es el primero disponible en el framework y el tema es el primero disponible para el proyecto. Para más información visite la página Wiki de ig new.

Generar proyecto de Ignite UI for Angular

Para crear un nuevo proyecto con Ignite UI for Angular use ig new especificando angular como framework, y opcionalmente igx-ts como tipo de proyecto y seleccionando una de las plantillas de proyecto:

ig new "IG Project" --framework=angular --type=igx-ts --template=side-nav

Generar proyecto de Ignite UI for React

Para crear un nuevo proyecto con Ignite UI for React use ig new especificando react como framework y igr-ts como tipo de proyecto:

ig new "IG Project" --framework=react --type=igr-ts

Generar proyecto de Ignite UI for Web Components

Para crear un nuevo proyecto con Ignite UI for Web Components use ig new especificando webcomponents como framework:

ig new "IG Project" --framework=webcomponents

Agregar componentes

Una vez que haya creado un proyecto, en cualquier momento puede agregar plantillas de componentes adicionales usando ig add. Ejecutar el comando sin parámetros lo guiará a través de las plantillas disponibles:

ig add

Agregue un nuevo componente o plantilla al proyecto pasando el ID del componente y eligiendo un nombre.

ig add <component/template> <component_name>

El ID coincide con un componente ("grid", "combo", "text-editor", etc.) o con una plantilla predefinida. Las plantillas predefinidas son específicas del framework/proyecto y pueden proporcionar vistas predefinidas con múltiples componentes o cumplir un caso de uso específico como "form-validation", "master-detail", etc.

Para la lista completa de plantillas compatibles en el proyecto actual, simplemente ejecute el comando ig list:

ig list

Compilar y ejecutar

ig build
ig start

Configurar herramientas de IA

Ignite UI proporciona un conjunto de herramientas de desarrollo asistido por IA. Para configurar las herramientas de IA de Ignite UI — servidores MCP y habilidades de codificación de IA — ejecute:

ig ai-config

Se le presentarán dos selecciones:

• Agentes de IA — para qué herramientas generar archivos de habilidades e instrucciones (Generic y Claude están seleccionados por defecto)
• Asistentes de codificación — para qué asistentes configurar servidores MCP (el .mcp.json general está seleccionado por defecto, compatible con Claude Code, VS Code y otros)

También puede pasar opciones directamente:

ig ai-config --agents claude copilot generic --assistants vscode cursor

Esto crea o actualiza el archivo de configuración MCP específico del asistente (por ejemplo, .mcp.json, .vscode/mcp.json, .cursor/mcp.json) con entradas para el Ignite UI MCP y los servidores MCP de igniteui-theming (los servidores existentes se conservan), copia los archivos de habilidades de codificación de IA de los paquetes de Ignite UI instalados y genera archivos de instrucciones específicos del agente (por ejemplo, CLAUDE.md, AGENTS.md).

El comando ig new también solicita la configuración de herramientas de IA como parte de la creación del proyecto.

Servidor MCP

El CLI incluye un servidor MCP (Model Context Protocol) integrado que proporciona a los asistentes de IA búsqueda de documentación de Ignite UI, consulta de referencia de API y guía de scaffolding para Angular, React, Blazor y Web Components.

Inicie el servidor MCP:

ig mcp

El servidor se ejecuta sobre stdio y admite las siguientes opciones:

ig mcp --remote <url>   # Use a remote backend instead of the local SQLite database
ig mcp --debug          # Enable debug logging to mcp-server.log

Uso con asistentes de IA

Para VS Code, el comando ig ai-config maneja la configuración automáticamente (ver arriba). Para otros clientes MCP (por ejemplo, Claude Desktop, Cursor), configúrelos manualmente:

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

El servidor MCP expone las siguientes herramientas a los asistentes de IA:

Herramienta	Descripción
list_components	Lista la documentación de componentes de Ignite UI disponible. Filtra por framework y coincidencia opcional de palabras clave contra nombre de archivo, nombre de componente, palabras clave o resumen.
get_doc	Devuelve el contenido completo en markdown de un documento de componente específico por nombre (por ejemplo, grid-editing, accordion).
search_docs	Búsqueda de texto completo en la documentación de Ignite UI para un framework específico. Admite coincidencia de prefijos (por ejemplo, grid*).
search_api	Busca entradas de API de Ignite UI por palabra clave, característica o nombre parcial de componente.
get_api_reference	Devuelve la referencia completa de API para un componente o clase específico de Ignite UI por nombre exacto.
get_project_setup_guide	Devuelve guías de configuración para crear un nuevo proyecto de Ignite UI. Para Angular/React/Web Components: instrucciones de scaffolding del CLI. Para Blazor: guía de configuración de dotnet new + NuGet.

Pruebas con MCP Inspector

Para probar y depurar interactivamente las herramientas del servidor MCP:

npx @modelcontextprotocol/inspector ig mcp

Esquemas

También puede agregar componentes de Ignite UI for Angular a sus proyectos usando el paquete igniteui/angular-schematics. Incluye definiciones de esquemas para la mayor parte de la lógica presente en el igniteui-cli. Estos pueden llamarse en cualquier proyecto Angular existente o incluso al crear uno. Puede aprender más sobre el paquete de esquemas en su readme.

Contribución

Consulte la guía de contribución para comenzar.

Ejecutar localmente

1. Clone el repositorio

2. Instale las dependencias con yarn install

3. Compile el servidor MCP y empaquételo en el CLI:

   cd packages/igniteui-mcp/igniteui-doc-mcp
   npm install
   npm run build
   cd ../../..
   npm run build:mcp
   

4. Compile los paquetes del monorepo: npm run build

5. Abra en Visual Studio Code

   Hay un archivo launch.config predefinido para VS Code en la carpeta raíz, por lo que puede usar la ventana View/Debug de VS Code y elegir una de las acciones predefinidas. Estas incluyen iniciar la guía paso a paso, crear un nuevo proyecto para un framework particular o agregar componentes.

6. Presione Start Debugging/F5

Prueba de humo de plantillas

scripts/smoke-test.sh impulsa el CLI compilado localmente de extremo a extremo: crea un proyecto, agrega cada plantilla de componente, instala y compila. Las especificaciones de Jasmine en spec/ simulan PackageManager.installPackages, por lo que verifican que los archivos se coloquen en disco pero nunca que el resultado se instale o compile — este script cubre esa brecha.

npm run build                 # required: the script runs your local build, not the published CLI
scripts/smoke-test.sh         # angular, react and webcomponents (~20-30 min)

Opciones:

Opción	Significado
-f, --frameworks LIST	separados por comas; predeterminado angular,react,webcomponents
-p, --project ID	plantilla de proyecto para crear (predeterminado: la propia del framework)
--all-projects	crear y compilar cada plantilla de proyecto, omitir adiciones de componentes
--templates LIST	solo estos IDs de plantilla de componente — la ruta rápida al iterar
--isolate	un proyecto por plantilla de componente; lento, úselo para dividir un fallo
--skip-build	crear y agregar solo
--keep	conservar los proyectos generados incluso cuando todo pasa
-o, --out DIR	directorio de trabajo (predeterminado output/smoke, que está en gitignore) — borrado en cada ejecución, ver abajo
-j, --jobs N	frameworks para ejecutar en paralelo (predeterminado 1)

scripts/smoke-test.sh -f angular --templates grid,combo    # quick check, ~2 min
scripts/smoke-test.sh -f angular --all-projects            # every Angular project template
scripts/smoke-test.sh -f webcomponents --isolate           # bisect which template broke

Los registros por paso se guardan en <out>/logs/, y <out>/results.tsv es una tabla framework / step / template / status / seconds legible por máquina. El script sale con código distinto de cero si algún paso falla e imprime un resumen de los fallos.

El directorio de trabajo se elimina y recrea en cada ejecución, por lo que el script se niega a tocar cualquier cosa que no pueda demostrar que es suya: la raíz del sistema de archivos, su directorio personal, el repositorio o cualquier directorio que lo contenga, y cualquier directorio no vacío que carezca del centinela .smoke-test-workdir que deja o del results.tsv de una ejecución anterior. Apunte --out a otro lugar, o elimine el directorio usted mismo, si se encuentra con eso.

Dos cosas a saber si lo modifica:

• Todas las llamadas a ig deben ocurrir antes de npm install. packages/cli/bin/execute.js delega en node_modules/igniteui-cli siempre que uno se resuelva dentro del directorio actual, y cada plantilla de proyecto lista igniteui-cli como devDependency — así que una vez que un proyecto generado se ha instalado, ig add cambia silenciosamente al CLI publicado y sus plantillas empaquetadas. Crear con --skip-install evita que PackageManager.queuePackage genere instalaciones, por lo que las dependencias se escriben en package.json y se instalan una vez al final.
• Los códigos de salida no son suficientes. Util.error registra y retorna sin establecer uno, por lo que ig add does-not-exist x sale con 0. Cada paso se juzga por su código de salida y un escaneo de errores de su registro y una verificación de artefactos. jQuery y Blazor son opcionales mediante -f. jQuery no tiene script de compilación y 13 de sus plantillas obtienen ignite-ui-full desde el feed de Infragistics ProGet, que requiere credenciales; Blazor necesita el SDK de .NET y no tiene plantillas de componentes, por lo que solo se ejecuta dotnet build.

Desarrollo del servidor MCP

El servidor MCP en packages/igniteui-mcp/igniteui-doc-mcp tiene su propio pipeline de compilación, separado del monorepo. Utiliza ESM (ES2022, módulos Node16) mientras que el resto del monorepo usa CommonJS. Consulta DEVELOPMENT.md para la guía completa de desarrollo del servidor MCP.

Compilar el servidor MCP:

cd packages/igniteui-mcp/igniteui-doc-mcp
npm install          # Install MCP-specific dependencies (separate from yarn workspaces)
npm run build        # Compile TypeScript + copy SQLite DB to dist/

Compilar la documentación de referencia de la API:

El servidor MCP incluye documentación de referencia de la API para Angular, React y Web Components. La documentación de Angular y Web Components se genera a partir de submódulos del framework mediante TypeDoc (los submódulos se inicializan automáticamente con los scripts de compilación). React utiliza un modelo JSON de TypeDoc precompilado incluido en git.

cd packages/igniteui-mcp/igniteui-doc-mcp
npm run build:docs:angular         # Angular: init submodule → TypeDoc → markdown + index.json
npm run build:docs:webcomponents   # Web Components: init submodule → build lib → TypeDoc → markdown + index.json
npm run build:docs:all             # Build both

Nota: Web Components requiere una compilación de biblioteca única (npm run build:publish en el submódulo) antes de que TypeDoc pueda ejecutarse. El script de compilación maneja esto automáticamente.

Compilar el servidor MCP (desde la raíz del repositorio):

npm run build:mcp    # Compiles MCP server TypeScript and copies SQLite DB into dist/

Probar el servidor MCP localmente:

npm run build:mcp
npm run build
node packages/cli/lib/cli.js mcp          # Start via CLI
# or directly:
node packages/cli/mcp/dist/index.js       # Start the bundled server

Compilación del paquete CLI con el servidor MCP incluido

El paquete CLI incluye el servidor MCP como un artefacto de compilación empaquetado (no como una dependencia npm). Para producir un paquete CLI completo con funcionalidad MCP total, sigue estos pasos:

# 1. Install monorepo dependencies
yarn install

# 2. Build the MCP server
cd packages/igniteui-mcp/igniteui-doc-mcp
npm install
npm run build                              # Compile TypeScript + copy SQLite DB

# 3. Build API reference docs (optional but recommended for full functionality)
npm run build:docs:all                     # Init submodules + generate Angular + WC API docs via TypeDoc

# 4. Bundle MCP into CLI (from repo root)
cd ../../..
npm run build:mcp                      # Build MCP server

# 5. Build all packages for publishing
npm run build-pack

Después del paso 5, npm pack desde la raíz del repositorio o packages/cli/ producirá un tarball con el servidor MCP, la base de datos de documentación y la documentación de referencia de la API incluidos.

Omitir documentación de API: Si omites el paso 3, el servidor MCP seguirá funcionando para las herramientas list_components, get_doc, search_docs y get_project_setup_guide usando la base de datos SQLite incluida. Solo las herramientas get_api_reference y search_api requieren documentación de API.

Recopilación de datos

La herramienta Ignite UI CLI utiliza Google Analytics para reportar de forma anónima estadísticas de uso de funciones e informes básicos de fallos. Estos datos se utilizan para ayudar a mejorar las herramientas de Ignite UI CLI con el tiempo. Puedes optar por no participar en la analítica antes de que se envíe cualquier dato usando

ig config set disableAnalytics true -g

al usar la CLI. Puedes leer la política de privacidad de Infragistics en https://www.infragistics.com/legal/privacy.