Desarrollo asistido por IA con Ignite UI

Ignite UI for Angular, React y Web Components proporciona una cadena de herramientas de IA de tres partes: Agent Skills, el servidor MCP de Ignite UI CLI y el servidor MCP Ignite UI Theming— que fundamenta a los asistentes de codificación de IA en APIs de componentes correctas, rutas de importación y tokens de diseño. Las Habilidades de Agente son paquetes de instrucciones propiedad de desarrolladores que definen cómo los agentes de IA utilizan Ignite UI en un proyecto específico. El servidor CLI MCP expone Ignite UI herramientas de andamiaje CLI, gestión de componentes y documentación a la sesión activa del agente de IA mediante el Protocolo de Contexto del Modelo. El servidor MCP de Theming expone el Ignite UI Theming Engine como contexto de agente consultable. Los tres componentes funcionan con GitHub Copilot, Cursor, Claude Desktop, Claude Code y JetBrains AI Assistant.

La cadena de herramientas de IA actualmente no soporta Blazor en las capas CLI MCP y Habilidades de Agente; Blazor cobertura la proporciona solo el MCP de Tematiza. El servidor MCP de CLI requiere transporte STDIO; No se soportan clientes MCP basados en HTTP. Agent Skills y el servidor CLI MCP no modifican los archivos del proyecto de forma autónoma: exponen herramientas e instrucciones al agente de IA activo, que actúa según las indicaciones del desarrollador.

The AI Toolchain at a Glance

La cadena de herramientas de IA de Ignite UI consta de tres capas utilizables de forma independiente. Cada capa puede activarse por sí sola; Están diseñados para trabajar juntos.

Capa	Lo que ofrece	Dueño	Marcos
Habilidades de agente	Paquetes de instrucciones propiedad de los desarrolladores: rutas de importación, patrones de componentes, flujos de decisiones, convenciones de proyectos	Desarrollador	Angular, React, Web Components, Blazor
CLI MCP server (`igniteui-cli`)	Andamiaje de proyectos, gestión de componentes, documentación y consultas API mediante MCP	Infragistics	Angular, React, Web Components
Theming MCP server (`igniteui-theming`)	Tokens de diseño, definiciones de paleta, generación de propiedades personalizadas CSS, validación de contraste en WCAG AA	Infragistics	Angular, React, Web Components, Blazor

El servidor CLI MCP y el servidor MCP Theming se inician ynpx se conectan a cualquier cliente compatible con MCP mediante transporte STDIO. Las Habilidades de Agente son archivos locales colocados en tu proyecto que el cliente de IA lee desde el disco.

Habilidades de agente

Las Habilidades de Agente son paquetes estructurados y propiedad de desarrolladores que indican a los asistentes de programación de IA exactamente cómo usar Ignite UI para un framework específico. Un paquete Skill puede contener unSKILL.md archivo de instrucciones con patrones de componentes, rutas de importación y flujos de decisiones; referencias a documentación Ignite UI autorizada; y recursos como archivos de esquema o diagramas. Cuando una Skill está activa en el cliente de IA, el agente sigue la Skill en lugar de depender de datos generales de entrenamiento, que pueden referenciar firmas de API obsoletas o rutas de importación.

Ignite UI nave paquetes de habilidades dedicados para Angular, React, Web Components y Blazor. El paquete Skill es propiedad del desarrollador: edita paraSKILL.md que coincida con las convenciones de tu equipo, añade patrones específicos de cada proyecto, referencia tu sistema de diseño interno y versiona el paquete junto con tu base de código.

Para instrucciones completas de configuración y cableado IDE, consulta Habilidades del agente.

CLI MCP Server

El servidor MCP CLI Ignite UI (igniteui-cli) es un servidor MCP mantenido por Infragistics que expone Ignite UI herramientas de andamiaje CLI y documentación a la sesión activa del agente de IA. Una vez conectado, el asistente de IA puede crear proyectos Angular, React o Web Components, añadir y modificar componentes Ignite UI, y responder a preguntas sobre documentación y API, todo ello mediante prompts en lenguaje natural durante la sesión de chat.

El servidor CLI MCP comienza sinnpx una instalación global:

npx -y igniteui-cli mcp

El servidor se conecta a VS Code mediante GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant y cualquier otro cliente compatible con MCP que soporte el transporte STDIO. El formato exacto de configuración varía según el cliente; consulta las guías de configuración CLI MCP más abajo.

El servidor CLI MCP no soporta Blazor. No genera código de forma autónoma: expone herramientas al agente de IA, que las invoca en respuesta a las indicaciones de los desarrolladores.

Theming MCP Server

El servidor MCP de Ignite UI Theming (igniteui-theming) es un servidor MCP separado que expone el Ignite UI Theming Engine como contexto de agente consultable. Cubre el acceso a tokens de diseño, definiciones de paletas, generación de propiedades personalizadas CSS y validación de contraste WCAG AA. Arquitectónicamente es independiente del servidor MCP de CLI: puede conectarse de forma independiente para dar al agente de IA acceso a herramientas de temática sin exponer herramientas de andamiaje de proyectos.

The Theming MCP server starts via npx:

npx -y igniteui-theming igniteui-theming-mcp

El servidor MCP de Theming soporta Angular, React, Web Components y Blazor. Se actualiza con cada Ignite UI lanzamiento, así que los agentes siempre trabajan contra la superficie actual del token.

Para detalles de configuración, véase Theming MCP.

Supported AI Clients

El servidor CLI MCP y el servidor MCP de Theming funcionan con cualquier editor o cliente de IA que soporte MCP con transporte STDIO.

Client	Configuration method
VS Code with GitHub Copilot	`.vscode/mcp.json`
Cursor	`.cursor/mcp.json`
Claude Desktop (macOS)	`~/Library/Application Support/Claude/claude_desktop_config.json`
Claude Desktop (Windows)	`%APPDATA%\Claude\claude_desktop_config.json`
Claude Code	`.mcp.json`o el comando Claude Code MCP CLI
JetBrains AI Assistant	*Tools → AI Assistant → Model Context Protocol (MCP)-

Agent Skills es compatible con GitHub Copilot vía.github/copilot-instructions.md, Cursor vía.cursorrules or.cursor/rules/, Windsurf vía.windsurfrules y JetBrains AI Assistant mediante ajustes de prompts a nivel de proyecto.

Set Up the AI Toolchain

Úsaloig ai-config para configurar Agent Skills y ambos servidores MCP en un solo comando. Para el control individual de cada capa, o para configurar solo una parte de la cadena de herramientas en un proyecto existente, sigue los pasos a continuación. Correrig ai-config completa los pasos 1, 2 y 3 en una sola operación.

Quick Setup

Elai-config comando copia las Ignite UI Habilidades de Agente y.claude/skills/ escribe la configuración.vscode/mcp.json Ignite UI del servidor MCP. Si los archivos ya existen y están actualizados, el comando es un no-op.

Uso de esquemas Angular:

ng generate @igniteui/angular-schematics:ai-config

Esto también registra el@angular/cli servidor MCP junto.vscode/mcp.json a los servidores Ignite UI.

Usando la Ignite UI CLI:

npx igniteui-cli ai-config

Si tienes la CLI Ignite UI instalada globalmente, usa el formulario más corto:

ig ai-config

Note

Losnpx igniteui-cli formularios yig no registran el@angular/cli servidor MCP. Usa el comando Angular Esquemas de arriba si quieres configurar los tres servidores en un solo paso.

Note

El comando requiere que se instalen paquetes Ignite UI en tu proyecto (npm install). Si no se encuentran archivos de habilidades, asegúrate de que tus paquetes estén actualizados.

Step 1 - Load Agent Skills

Copia el paquete de habilidades Ignite UI para tu framework en la ruta de descubrimiento de agentes de tu proyecto. El paquete de habilidades viene con la biblioteca.node_modules/igniteui-{framework}/skills/ Conectala a tu IDE usando la configuración persistente para tu cliente.

See Agent Skills for the complete setup.

Step 2 - Connect the CLI MCP Server

Añade laigniteui-cli entrada del servidor MCP al archivo de configuración de tu cliente de IA. Utiliza la estructura JSON que se adapte a tu cliente:

VS Code (.vscode/mcp.json):

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

Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:

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

Para la guía completa de configuración, incluyendo VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains y otros clientes compatibles con MCP, véase CLI MCP.

Step 3 - Connect the Theming MCP Server (optional)

Añade laigniteui-theming entrada al mismo archivo de configuración MCP, juntoigniteui-cli a:

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

Para detalles de configuración y flujos de trabajo de tematización, consulta Theming MCP.

Additional Resources

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

Desarrollo asistido por IA con Ignite UI

The AI Toolchain at a Glance

Habilidades de agente

CLI MCP Server

Theming MCP Server

Supported AI Clients

Set Up the AI Toolchain

Quick Setup

Note

Note

Step 1 - Load Agent Skills

Step 2 - Connect the CLI MCP Server

Step 3 - Connect the Theming MCP Server (optional)

Additional Resources

Tematización