Ignite UI Theming MCP

    El Ignite UI Theming MCP es un servidor Model Context Protocol (MCP) que permite a los asistentes de IA generar código de temación listo para producción para aplicaciones Ignite UI. MCP es un estándar abierto que permite a los asistentes de IA llamar a herramientas especializadas proporcionadas por servidores externos. Conecta el MCP de Ignite UI Theming a tu editor o cliente de IA de escritorio y describe lo que quieres — el asistente hace el resto.

    Descripción general

    Instead of writing Sass theming code by hand, you can describe your theming intent in plain language and let an AI assistant generate the correct code for you. The MCP server gives the AI the knowledge and tools it needs to produce accurate theming code — including palettes with proper shade generation, typography, elevations, component design token overrides, and more.

    The server supports all four Ignite UI design systems — Material, Bootstrap, Fluent, and Indigo — in both light and dark variants. While this guide focuses on Angular, the MCP server also works with Ignite UI for Web Components, React, and Blazor. The detect_platform tool reads your package.json and selects the correct import paths and selectors automatically.

    La mayoría de las herramientas pueden producir salida Sass o CSS. La salida Sass es la predeterminada e integra con eligniteui-theming módulo Sass. La salida de CSS genera propiedades personalizadas CSS listas para usar y puede usarse sin una cadena de herramientas Sass local: el servidor la compila por ti.

    Ejemplos de indicaciones para probar una vez conectado:

    "Crear un tema oscuro completo de Diseño de Materiales para mi aplicación Angular con #2563eb primaria y #f97316 secundaria coral."

    "¿Qué fichas de diseño están disponibles para el componente de botones? Personalízalo con mi marca morada #8b5cf6."

    "Mis directrices de marca especifican valores hexadecimales exactos para cada tono primario — crea una paleta personalizada con esos valores explícitos."

    "Haz que el componente del calendario use un espaciado más pequeño."

    Prerequisites

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

    • Node.js (v18 o posterior) instalado — esto proporciona elnpx comando utilizado para iniciar el servidor.
    • A project with an Ignite UI package listed as a dependency in package.json. For Angular, this is igniteui-angular (v15.0 or later). The server also supports igniteui-webcomponents, igniteui-react, and igniteui-blazor.
    • Un cliente de IA con soporte MCP—por ejemplo, VS Code con GitHub Copilot, Cursor, Claude Desktop, Claude Code, o un IDE JetBrains con el plugin AI Assistant.

    If you do not have igniteui-angular installed yet, run:

    ng add igniteui-angular

    Setup

    El servidor MCP viene incluido con eligniteui-theming paquete y se lanza a través denpx. No es necesaria una instalación separada más allá de tener ya un paquete de Ignite UI en tu proyecto.

    El comando canónico de lanzamiento es:

    npx -y igniteui-theming igniteui-theming-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.

    How version resolution works

    Porqueigniteui-theming es una dependencia,igniteui-angular ya está presente en tunode_modules posteriornpm install. Cuando ejecutas el comando de lanzamiento arriba,npx detecta la copia instalada localmente y la ejecuta directamente, no se realiza ninguna solicitud de red. Esto significa que la versión del servidor MCP siempre se mantiene sincronizada con el resto de tus paquetes de Ignite UI.

    Si ejecutas el comando fuera de un proyecto (o antes de ejecutarlonpm install),npx -y descarga la última versión de npm a una caché temporal en su lugar. El servidor sigue arrancando, perodetect_platform vuelvegeneric porque nopackage.json hay nada que inspeccionar.

    Elige tu cliente de IA a continuación para los pasos específicos de configuración.

    VS Code

    GitHub Copilot en VS Code soporta servidores MCP mediante un archivo de configuración a nivel de espacio de trabajo. Crea o edita.vscode/mcp.json en la raíz de tu proyecto:

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

    Una vez guardado, abre el panel de chat de GitHub Copilot, cambia al modo Agente y las herramientas de Ignite UI Theming 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-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

    El servidor se recogerá 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 el servidor a tu archivo de configuración de Claude Desktop:

    • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
    • Windows: %APPDATA%\Claude\claude_desktop_config.json
    {
  "mcpServers": {
    "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-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

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

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

    Usa el/mcp comando dentro de Claude Code para verificar que el servidor está conectado.

    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-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

    For any other MCP-compatible client, use the STDIO transport with the following command and arguments:

    • Command: npx
    • Arguments: -y, igniteui-theming, igniteui-theming-mcp

    Customizing AI Behavior with Project Rules

    Esta sección es opcional. Está dirigido a equipos que quieren afinar cómo la IA genera el código temático para que se ajuste a sus convenciones existentes de base de código.

    Editores como VS Code y Cursor te permiten proporcionar archivos de instrucciones a nivel de proyecto que moldean el comportamiento de la IA. El servidor MCP ya enseña a la IA qué herramientas llamar y en qué orden; no hace falta repetirlo. En su lugar, utiliza estos archivos de instrucciones para codificar las decisiones de diseño de tu proyecto, las convenciones de código y la organización de archivos para que la IA produzca código que encaje en tu base de código en el primer intento.

    VS Code (.github/copilot-instructions.md)

    ## Theming Conventions

### Sass Code Style
- Use `@use` / `@forward` — never `@import`.
- Extract repeated color values into Sass variables (e.g., `$brand-hover: #a78bfa`).
- Prefer setting primary design tokens over overriding many dependent tokens.
  For example, setting `$foreground` on a flat button automatically derives
  `$hover-background`, `$focus-background`, and `$active-background`.
- Keep component overrides scoped — use the component's default selector
  (e.g., `.igx-button--flat`) unless a narrower scope is needed.

    Cursor (.cursor/rules/theming.mdc)

    ---
description: Ignite UI for Angular theming conventions
globs: ["**/*.scss", "**/styles/**"]
---

## Project Theming Rules

### Code conventions
- `@use` / `@forward` only — no `@import`.
- Extract shared colors into variables; do not repeat hex literals.
- Prefer primary tokens — let dependent tokens derive automatically.
- One component override per file. Name the file after the component.
- Comment every override with the design rationale.
- Never hard-code gray shades for text — use palette grays so dark mode works.
- For dark mode, only the palette changes. Component overrides stay the same.
    Note

    Ambos archivos están comprometidos con control de versiones, así que todos los miembros del equipo reciben el mismo comportamiento de IA sin necesidad de configuración manual. Adapta los colores de la marca, el sistema de diseño y las rutas de los archivos para que coincidan con tu proyecto.

    Available Tools

    El servidor MCP expone un conjunto de herramientas que la IA utiliza automáticamente en función de tus indicaciones. Nunca necesitas llamarles directamente, solo describe lo que quieres.

    Para ver la lista completa actual de herramientas y sus parámetros en cualquier momento, pregunta a tu asistente de IA:

    "¿Qué herramientas proporciona el MCP de Ignite UI Temático?"

    Aquí tienes un breve resumen de cada herramienta:

    Tool Descripción
    detect_platform Leepackage.json e identifica si el proyecto utiliza Ignite UI for Angular, Web Components, React o Blazor. Selecciona las rutas de importación correctas y los selectores de componentes para todas las herramientas posteriores.
    create_palette Genera una paleta de colores con variantes automáticas de tonos (50–900, A100–A700) a partir de los colores base de tu marca. Acepta unoutput parámetro (sassocss) y undesignSystem para seleccionar el esquema.
    create_custom_palette Creación de paleta de grano fino — especifica valores hexadecimales exactos para cada tono cuando la generación automática no sea adecuada.
    create_typography Establece una familia de fuentes y una escala de tipos para un sistema de diseño dado.
    create_elevations Configura los niveles de elevación en sombra de caja (0–24) para sistemas de diseño Material o Indigo.
    create_theme Tema completo de un one-shot: paleta + tipografía + elevaciones, listo para incluir en tustyles.scss. Acepta a(,,, odesignSystem) ymaterial (bootstrapofluent).indigo​variant​light​dark​
    set_size Conjuntos--ig-size globales o para un componente específico (small,medium, olarge).
    set_spacing Establece--ig-spacing (y opcionalmente anulaciones en línea/bloques) globalmente o por componente.
    set_roundness Conjuntos--ig-radius-factor (0 = cuadrado, 1 = completamente redondo) globalmente o por componente.
    get_component_design_tokens Devuelve todos los tokens de diseño disponibles para un componente — siempre llama esto antescreate_component_theme.
    create_component_theme Genera Sass o CSS para personalizar los tokens de un componente (colores, bordes, etc.). Acepta avariant (lightodark) para seleccionar el esquema correcto.
    get_color Devuelve una referencia de variable CSS para un color de paleta, por ejemplovar(--ig-primary-500), Soporta parámetros opcionales de contraste y opacidad.
    read_resource Lee recursos de referencia integrados organizados en cuatro categorías: configuraciones de plataforma (6), preajustes de paleta/tipografía/elevación (5), guía de color (7) y documentación de diseño/espaciado (8).
    Note

    Para componentes compuestos (por ejemplo,combo,select,),grid​get_component_design_tokens devuelve una lista de temas hijos relacionados en lugar de una lista plana de tokens. Por ejemplo, lagrid consulta puede devolver temas hijos comogrid,grid-toolbar,grid-filtering, ypaginator. La IA generará una llamada separadacreate_component_theme para cada tema hijo usando el selector con alcance correspondiente.

    Note

    Si tu proyecto usa el paquete con licencia@infragistics/igniteui-angular, avisa a la IA para que pueda establecer ellicensed parámetro en paleta, tema y herramientas de componentes. Esto ajusta las rutas de importación generadas en consecuencia.

    Example Scenarios

    Los siguientes escenarios muestran lo que puedes pedirle a la IA que haga una vez que el servidor MCP está conectado.

    New Project Theme

    "Estoy empezando un nuevo proyecto de Angular con Ignite UI. Crea un tema de luz completo de Material Design con #2563eb primaria, #f97316 secundaria y fuente Roboto."

    La IA llamarácreate_theme y devolverá un archivo listo para usarstyles.scss. La salida generada se verá similar a esto:

    /* styles.scss */
@use 'igniteui-angular/theming' as *;

$my-palette: palette(
  $primary: #2563eb,
  $secondary: #f97316,
  $surface: #fff,
  $gray: #9e9e9e,
);

$my-typography: typography(
  $font-family: 'Roboto, sans-serif',
);

@include core();
@include typography($my-typography);
@include theme($my-palette, $schema: $light-material-schema);

    Dark Mode Variant

    "Necesito una versión en modo oscuro de mi tema actual. Mantén el mismo azul primario pero usa una superficie oscura #121212."

    Brand-Exact Color Shades

    "Nuestro sistema de diseño especifica valores hexagonales exactos para los 14 tonos de nuestro verde primario. Yo pegaré los valores — crearé una paleta personalizada."

    La IA pedirácreate_custom_palette​mode: "explicit" el color primario y generará automáticamente el resto. Consulta Paletas para más detalles sobre la generación de tonos.

    Component-Level Customization

    "Decora el botón plano con un fondo morado #8b5cf6 y texto blanco, con un #a78bfa morado más claro al flotar."

    La IA llamaráget_component_design_tokens primero para descubrir nombres válidos de tokens y luego llamarácreate_component_theme con los valores correctos.

    Layout Adjustments

    "El calendario se siente hinchado — reduce su espacio y haz que todos los componentes sean un poco más pequeños."

    La IA llamaráset_spacing a scope al componente del calendario yset_size al:root nivel.

    Troubleshooting

    Platform not detected

    If detect_platform returns null or generic, make sure your package.json lists an Ignite UI package (e.g., igniteui-angular, igniteui-webcomponents) as a dependency. You can also tell the AI explicitly: "Use the Angular platform."

    Luminance warning on colors

    Si la IA advierte sobre la luminancia del color, significa que el color elegido es demasiado claro o demasiado oscuro para que la generación automática de tonos funcione bien. Elige un color de gama media o pide a la IA que usecreate_custom_palette valores de tonos explícitos en su lugar.

    Surface color mismatch

    Para temas de luz utiliza una superficie clara (por ejemplo, ).#fafafa Para temas oscuros usa una superficie oscura (por ejemplo,#121212). Los colores de superficie desparejados hacen que la IA emita una advertencia.

    Sass generado no compila

    Ensure igniteui-angular and igniteui-theming are installed:

    ng add igniteui-angular

    También confirma que secore() llama antes de cualquier otra mezcla de temas en tustyles.scss caso. Consulta Theming con Sass para la configuración correcta de archivos.

    Additional Resources

    Related topics:

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