Skip to content
Live Demo from Reveal: How AI is changing embedded analytics workflows
Save my Seat
Infragistics
Start Free Trial

AI-Assisted Development

Theming MCP for AI-Assisted Development

AI coding assistants can write style code, but the result doesn’t always match your brand, your design system, or your accessibility standards. Developers end up guessing at token names, fixing shade ladders, and re-checking contrast by hand. Ignite UI Theming MCP solves this by connecting AI assistants to the real Ignite UI Theming Engine, so generated themes are grounded in the real engine from the first prompt.

Your brand#7B2D8B
  1. 50--ig-primary-50#ca6add3.2:1 · UI
  2. 100--ig-primary-100#b46fc33.5:1 · UI
  3. 200--ig-primary-200#9e5bac4.6:1 · AA
  4. 300--ig-primary-300#8845966.3:1 · AA
  5. 400--ig-primary-400#8137907.3:1 · AAA
  6. 500--ig-primary-500#7b2d8b8.1:1 · AAA
  7. 600--ig-primary-600#751d879.2:1 · AAA
  8. 700--ig-primary-700#6a1b7a10.2:1 · AAA
  9. 800--ig-primary-800#60186e11.3:1 · AAA
  10. 900--ig-primary-900#54156112.7:1 · AAA
Contrast on the palette’s surface #ffffff. AAA ≥ 7, AA ≥ 4.5, UI ≥ 3.
Primary
A100A200A400A700
Secondary
A100A200A400A700
Surface
A100A200A400A700
Gray
Info
A100A200A400A700
Success
A100A200A400A700
Warn
A100A200A400A700
Error
A100A200A400A700

Bootstrap’s default palette from igniteui-theming@29.0.0. Numbers: each shade’s contrast on the surface #f8f9fa. Click a shade to see which shades can sit on it, like text on a button.

    The Problem

    AI Without Design-System Context Produces Drift

    Most AI assistants generate styling code from patterns, not from your design system. Without access to the theming engine they fill the gaps with guesses — plausible code that quietly leaves the system, and a cost that shows up later, at audit, when the design system has fractured across the application.

    Flip the switch beside this: the same seeds as a typical hand-rolled guess, and as the Ignite UI Theming Engine actually generates them for Bootstrap’s default palette. The checks underneath compare both sides.

    Pick a prompt to see the theming tools the assistant calls and the code it gets back.

    Create light and dark palettes from our brand purple #7B2D8B and orange #F97316

    create_palette(primary: "#7B2D8B", secondary: "#F97316", surface: "#FFFFFF", variant: "light", name: "brand-light", platform: "webcomponents", output: "sass")$brand-light-palette

    create_palette(primary: "#7B2D8B", secondary: "#F97316", surface: "#121212", variant: "dark", name: "brand-dark", platform: "webcomponents", output: "sass")$brand-dark-palette

    styles.scss — light on :root, dark under [data-theme="dark"]

    Our buttons use primary-600 — what text colour goes on them?

    get_color(color: "primary", variant: "600")var(--ig-primary-600)

    get_color(color: "primary", variant: "600", contrast: true)var(--ig-primary-600-contrast)

    Background and text as a pair of tokens, not a guessed hex

    Every shade ships a -contrast colour that meets WCAG AA, generated with the palette

    Switch us to Fluent and keep our brand colours

    create_theme(designSystem: "fluent", variant: "light", primaryColor: "#7B2D8B", secondaryColor: "#F97316", surfaceColor: "#FAFAFA", platform: "webcomponents")

    Fluent palette, typography and elevations generated for this Web Components app

    Make every component compact and a little less rounded

    set_size(size: "small", platform: "webcomponents")--ig-size: 1

    set_roundness(radiusFactor: 0.5, platform: "webcomponents")--ig-radius-factor: 0.5

    Set once on :root — every component follows

    Make our contained buttons brand purple

    get_component_design_tokens(component: "contained-button")primary tokens: background, foreground

    create_component_theme(component: "contained-button", designSystem: "bootstrap", platform: "webcomponents", output: "sass", tokens: {"background": "#7B2D8B"})$custom-contained-button-theme

    One token set — hover, focus, active and text colours derive from it

    The Solution

    What Is Ignite UI Theming MCP?

    Ignite UI Theming MCP is a Model Context Protocol (MCP) server that connects AI coding assistants to the Ignite UI Theming Engine, giving them everything needed to generate palettes, typography, elevations, and complete component themes on demand — instead of approximating them from general styling knowledge.

    What You Can Build With Ignite UI Theming MCP

    Ignite UI Theming MCP supports the full lifecycle of theming work, from first brand application through long-term design system maintenance.

    Apply your brand

    Hand the assistant a brand colour, a logo palette or an existing set of tokens, and it generates the palette, typography and elevations for every Ignite UI component — light or dark, from the same seeds.

    • A 50–900 ramp generated from the engine’s own shade logic
    • Material, Bootstrap, Fluent or Indigo as the starting schema
    • Sass, or CSS custom properties with no Sass toolchain
    create_theme(designSystem: "material", primaryColor: "#7B2D8B", secondaryColor: "#F97316", surfaceColor: "#FAFAFA", platform: "webcomponents")

    Build and evolve

    As new screens arrive, the assistant themes the components they use against the tokens already in your project, rather than inventing a second set of values beside them.

    • Per-component overrides that still resolve to your palette
    • Roundness, size and spacing changed as scales, not as one-off pixels
    • Chart series colours from the engine’s shared brush set, including a colour-blind set
    get_component_design_tokens(component: "grid") → create_component_theme(component: "grid", platform: "webcomponents", tokens: …)

    Stay accessible

    Every shade the engine generates comes with a matching -contrast colour that meets WCAG AA, so an assistant pairs text with a background by token instead of guessing a hex value.

    • A -contrast token for every shade, AA by default
    • Dark variants generated against their own surface
    • Warnings when a seed colour is too light or too dark for a good shade ramp

    Maintain consistency

    Design systems rarely fail on day one. They fail on day 400, when three teams have each extended the palette a different way. With the theming generated from one source, a rebrand, a new design language or a version upgrade is a regeneration rather than a manual pass over every project.

    • The same tokens in every framework
    • Palette changes re-applied from a single source
    • No hand-edited hex values left to drift
    Read the theming documentation
    .vscode/mcp.json
    {
  "servers": {
    "igniteui-theming": {
      "command": "npx",
      "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
    }
  }
}

    Setup

    Get Started in a Minute

    The Theming MCP ships inside the igniteui-theming package, so there is nothing separate to install. It needs Node.js 18 or later and an Ignite UI package in your project.

    Add the server to your AI client — in VS Code, create .vscode/mcp.json as shown. Cursor, Claude Desktop, Claude Code and JetBrains AI Assistant take the same server under mcpServers. Then open your assistant in agent mode and ask it to theme your app.

    Read the Setup Guide

    Why Ignite UI

    Ignite UI combines a complete component system with the structured context AI agents need to generate accurate UI — in three layers, each independently configurable, and all three set up by ig ai-config.

    AI Agent Skills

    Pre-built skills teach an assistant how Ignite UI components are actually used — the props, the patterns and the pitfalls — so the code it writes matches the library rather than a generic approximation of it.

    • Ship inside igniteui-angular, igniteui-react and igniteui-webcomponents; Blazor skills install from GitHub
    • Component, grid and theming patterns, plus design-to-code from an image
    • One command, ig ai-config, copies them to where your assistant looks
    About AI Agent Skills

    CLI MCP Server

    The CLI MCP gives an assistant the current docs, API reference and project-setup steps for every framework, so it scaffolds and extends apps with the Ignite UI CLI rather than from a remembered API.

    • Setup guides that drive the Ignite UI CLI
    • Current docs and API reference for Angular, React, Web Components and Blazor
    • Works over STDIO with any MCP client that supports it
    About the CLI MCP Server

    Theming MCP Server

    You are here: the layer that themes through the Ignite UI Theming Engine instead of from memory.

    • Ships inside the igniteui-theming package — nothing else to install
    • Listed in the MCP Registry as io.github.IgniteUI/igniteui-theming
    npx -y igniteui-theming igniteui-theming-mcp

    Frequently Asked Questions

    What is Ignite UI Theming MCP?

    It is an MCP server, shipped inside the igniteui-theming npm package, that lets an AI assistant theme Ignite UI by calling the theming engine instead of guessing. It covers Ignite UI for Angular, React, Web Components, and Blazor, and the Material, Bootstrap, Fluent, and Indigo design systems, in light and dark.

    How do I add Ignite UI Theming MCP to my AI client?

    The server ships inside the igniteui-theming package, so there is nothing separate to install. Register npx -y igniteui-theming igniteui-theming-mcp as an MCP server in your client — in VS Code, for example, in .vscode/mcp.json (see Get Started above) — or, where your client installs from the MCP Registry, add io.github.IgniteUI/igniteui-theming by name.

    Which tools does the Ignite UI Theming MCP server expose?

    Palettes and colour: create_palette, create_custom_palette, get_color, and get_chart_series_colors. Themes: create_theme, create_component_theme, and get_component_design_tokens. Typography, elevation, and layout: create_typography, create_elevations, set_size, set_spacing, and set_roundness. Plus detect_platform, which reads your project to pick the right output, and read_resource.

    Which AI assistants and frameworks work with Ignite UI Theming MCP?

    Ignite UI Theming MCP works with AI clients that support the Model Context Protocol over STDIO transport - including VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant. Any other MCP-compatible client that supports STDIO is also supported. The server covers Ignite UI for Angular, React, Web Components, and Blazor.

    Do I need a Sass toolchain to use Ignite UI Theming MCP?

    No. The MCP server can generate ready-to-use CSS custom properties without a local Sass toolchain - the server compiles them for you. CSS is the default for React, Web Components and Blazor, Sass for Angular; teams with a Sass build can ask for Sass output, which uses the igniteui-theming Sass module.

    Is Ignite UI Theming MCP free?

    Yes. The igniteui-theming package, and the MCP server inside it, is MIT-licensed. The Ignite UI component libraries it themes are licensed separately.

    Included with Ignite UI

    AI Capabilities Included No New Pricing

    Extend the AI tools you and your team already use. The toolchain is part of the library, because AI agents are already part of your team.

    • No usage-based AI tier
    • No separate billing model
    • No new IDE to learn
    Choose Free Trial

    Select a framework to get started for free: