Ignite UI CLI MCP Server & Angular 21.2

Two releases just landed across the Ignite UI ecosystem. Ignite UI CLI 15.0 is a major release that rethinks the project-setup experience for an age where AI coding assistants are part of every developer’s day — shipping a brand-new MCP server, generate-from-image design skills, AI-ready project configurations baked into every new scaffold, modernized Angular templates, expanded React template coverage and trimmed legacy project types. On the library side, Ignite UI for Angular 21.2 is a focused, quality-of-life update, polishing combos, snackbars/toasts and overlays in general — setting up for cleaner overlay handling ahead.

What’s new

• CLI MCP server - 3 frameworks, 2 runtime modes, 6 tools - Angular, React, and Web Components docs and API search. Remote (proxied) or Local (bundled SQLite + FTS4) runtime modes.
• AI Agent Configuration in every scaffold - AGENTS.md, CLAUDE.md, pre-wired .vscode/mcp.json, and Claude skills auto-copied on ng add
• Generate from Image skills - 3 frameworks - drop a design image into an MCP-connected AI client; the skill maps it to Ignite UI components, generates a matched theme, and produces a working view
• Angular template modernization - signals, inject(), @if/@for/@switch, standalone-only, Vitest + Playwright, angular-auth-oidc-client v21
• React template coverage - +30 components - now matches Web Components parity; updated to Vite 8
• Breaking - three legacy project types removed (igx-ts-legacy, ig-ts, igr-es6); step-by-step default changed from jQuery to Angular

📦 npm install -g igniteui-cli 📄 Ignite UI CLI on GitHub

CLI MCP server: 3 frameworks, 2 runtime modes, 6 tools

The MCP server exposes Ignite UI documentation, API references, and scaffolding to any MCP-compatible AI client - VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant. Launch it the same way regardless of the active project’s framework:

npx igniteui-cli ai-config

Two runtime modes ship in the same package. Remote proxies queries to a docs backend and stays current at the cost of a network dependency. Local uses a bundled SQLite database via sql.js WASM with FTS4 full-text search - deterministic across machines, runs offline, suitable for corporate networks where outbound traffic to docs backends is restricted.

Six tools are exposed to the AI session. You describe what you want in chat; the assistant picks the tool:

• get_project_setup_guide - framework-specific setup, install commands, CLI steps
• list_components - components available for the active framework, with optional keyword filter
• get_doc - full markdown of a component doc, including code samples
• search_docs - full-text search across the framework’s docs
• search_api - keyword search across the API surface
• get_api_reference - full API for a component or class: properties, methods, events -> Ignite UI CLI MCP - full setup guide

AI Agent Configuration in every new scaffold

Every Angular, React, and Web Components project created with ig new - or ng add igniteui-angular - now includes the configuration an AI coding assistant needs to work with Ignite UI correctly, without the developer hand-wiring anything:

• AGENTS.md - framework-specific coding guidelines and best practices
• CLAUDE.md - Claude Code integration with project-specific instructions
• .vscode/mcp.json - pre-wired with three MCP servers: angular-cli (Angular projects), igniteui-cli, and igniteui-theming
• Claude skills - auto-copied from the installed Ignite UI package into .claude/skills/, covering component usage, theming customization, bundle size optimization, and the new generate-from-image design skill For existing projects, two commands reach the same outcome:

# Any framework (Angular, React, Web Components)
ig ai-config
 
# Angular - also registers the @angular/cli MCP server
ng generate @igniteui/angular-schematics:ai-config

Both are idempotent. On ng add igniteui-angular, the cli-config schematic runs automatically and the skill files are copied from the installed package. For Web Components projects where no framework field is set, ig ai-config now correctly adds the igniteui-webcomponents skills anyway.

Agent Skills define your standards; the CLI MCP server exposes the Ignite UI component API, design tokens, and usage patterns as live context. One gives you control and developer flexibility. The other gives your agents authority. The workflow continues in the same session instead of moving between disconnected tools.

Generate from Image: Image to code for Angular, React, and Web Components

Three new LLM Agent Skills ship with this release - one per framework - that let an AI coding assistant turn a design image (screenshot, mockup, or wireframe) into a working Ignite UI view:

• igniteui-angular-generate-from-image-design
• igniteui-react-generate-from-image-design
• igniteui-wc-generate-from-image-design Drop a design image into an MCP-connected AI client and prompt: “implement this design” or “build this UI”. The skill triggers automatically and runs a structured protocol: analyze the image and decompose it into regions; map each region to the most appropriate Ignite UI component using list_components and get_doc; generate a matched theme with the Theming MCP tools (create_palette, get_component_design_tokens, create_component_theme); implement; then refine visual fidelity with set_size, set_spacing, and set_roundness until the output closely matches the source image.

The skills are auto-copied into .claude/skills/ by both ig new and ig ai-config alongside the existing component and theming skills. The Eye of Mordor demo below shows the generate-from-image workflow in practice for the React theming phase.

Angular template modernization (igx-ts)

igx-ts is rebuilt for Angular 21.2. This is the largest Angular template change since the standalone-components migration - 34 template files touched. Headline changes:

• Signals migration - @ViewChild replaced with viewChild() / viewChild.required(); @Output replaced with output(); constructor DI replaced with the inject() function
• Control flow migration - *ngIf, *ngFor, *ngSwitch replaced with the built-in @if, @for, @switch blocks; [ngClass] replaced with [class] bindings
• Standalone-only - AppModule and AuthenticationModule removed; setup consolidated into provider functions (provideAuthentication() replaces AuthenticationModule)
• Auth upgrade - migrated to angular-auth-oidc-client v21 with configurable Google, Microsoft, and Facebook social login providers
• Service naming - .service suffix removed per Angular style guide (authentication.service.ts -> authentication.ts, data.service.ts -> data.ts)
• Test stack - Karma + Jasmine replaced with Vitest + Playwright across unit and browser tests igniteui-angular is bumped to 21.2.0 in the template. Projects created with the removed igx-ts-legacy (NgModule) template keep working as-is; new projects take igx-ts (standalone).

React template coverage: +30 components, Vite 8

igr-ts now ships 30 additional component templates - accordion, avatar, badge, banner, button, button-group, calendar, card, checkbox, chip, circular-progress, date-picker, divider, dropdown, expansion-panel, form, icon, icon-button, input, linear-progress, list, navbar, radio-group, rating, ripple, slider, switch, tabs, text-area, and tree - bringing React template coverage to parity with Web Components. The base template is updated to Vite 8. Package bumps: igniteui-react-core, -charts, and -gauges to ~19.5.2; igniteui-react and igniteui-react-grids to ~19.6.0.

Eye of Mordor: a six-page React app built through prompts

Eye of Mordor is a demo React application - themed as Sauron’s command center, with dashboards for battalion readiness, supply chains, armory production, and spy intelligence across six pages - built entirely through chat prompts using the CLI MCP and the bundled skills files. No manual component wiring. No documentation tab left open on the side.

The build was four consecutive prompt phases, starting from one CLI command:

1. Scaffold - ig new produced the React + TypeScript + Vite project with .vscode/mcp.json, .claude/skills/, and AGENTS.md in place. The CLI MCP and Theming MCP were wired automatically - no JSON editing required.
2. Structure - One initial prompt describing the six-page concept scaffolded the full routing, navigation layout, and mock data layer in a single pass.
3. Components - Refinement prompts replaced HTML placeholders with IgrCard, IgrChip, IgrBadge, IgrGridLite, IgrLinearProgress, and IgrExpansionPanel. The AI knew the correct JSX API, event names, and TypeScript patterns because the bundled component skills shipped those details with the project.
4. Theme - A design image prompt triggered the igniteui-react-generate-from-image-design skill, which decomposed the dashboard into regions, extracted the dark Mordor palette, called create_palette and get_component_design_tokens per component, then applied scoped token overrides using CSS variables and ::part() targeting - the correct theming pattern for Ignite UI for React. Ignite UI MCP turns AI from a helpful assistant into a practical development partner. -> Eye of Mordor source on GitHub

Breaking Changes & Migration

This release removes three legacy project types and changes the default framework in the step-by-step wizard.

Get Started

Install or upgrade the CLI and wire an existing project in two commands:

# install the CLI globally
npm install -g igniteui-cli
 
# create a new project (defaults to Angular in this release)
ig new
 
# wire AI config and MCP servers into an existing project
ig ai-config
 
# launch the MCP server manually
npx -y igniteui-cli mcp

• 📘 Ignite UI CLI MCP - full setup guide
• 🚀 AI-Assisted App Development with Ignite UI
• 💬 Ignite UI CLI on GitHub
• 🏰 Eye of Mordor - showcase app on GitHub

Ignite UI for Angular 21.2

This release ships AI Agent skills in Ignite UI for Angular giving your coding agents structured, reusable guidance, so that your teams can move from guesswork to reliable, framework-aware code generation, making AI-assisted development more predictable.

This includes four skills — Components, Grids, Theming, and Generate from Image — grounding GitHub Copilot, Cursor, and Claude Code, ensuring your AI coding assistant is grounded in real APIs.

Ignite UI for Anuglar 21.2 also comes with a focused update that adds a few well-placed quality-of-life improvements to combo, snackbar/toast, and sets the stage for cleaner overlay handling going forward.

• Combo enhancements — IgxCombo and IgxSimpleCombo gain a selectionChanged event (fires after selection is committed, non-cancelable) and a disableClear input to hide the clear button even when items are selected.
• Snackbar & Toast positioning — A new positioning input with a container option positions these components inside the closest ancestor instead of the whole viewport.
• Overlay settings shorthand — IgxOverlayService.createAbsoluteOverlaySettings now accepts useContainerStrategy: true as a second parameter to opt into ContainerPositionStrategy instead of the default GlobalPositionStrategy. The previous outlet-based overload still works but is deprecated.
• Deprecations — outlet in OverlaySettings, IgxOverlayOutletDirective, and the igxToggleOutlet input on IgxToggleActionDirective are now deprecated in favor of the default in-place/top-layer rendering behavior.