Ignite UI CLI MCP Server & Angular 21.2

Ignite UI CLI pivots from a basic code generator into an automated AI toolchain by injecting a native MCP server, context-aware scaffolds, and image-to-code skills directly into developers' workspaces. Strategically, this release forces overdue technical modernization down users' throats by dragging Angular templates into the standalone/signals era, hitting React template parity

Radoslav Mirchev Apr 24, 2026 0min read

Ignite UI CLI ships a new MCP server covering Angular, React, and Web Components, AI-ready configuration files baked into every new scaffold, three new generate-from-image design skills, a full Angular 21.2 template modernization, and 30 additional React component templates. The release also removes three legacy project types and changes the step-by-step wizard default from jQuery to Angular - details in the breaking-changes section below. New users get AI-ready scaffolds out of the box; existing `igx-ts` and `igr-ts` users get modernized templates on their next `ig new`. > **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](https://github.com/IgniteUI/igniteui-cli) ## 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: ```bash npx -y igniteui-cli mcp ``` 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](https://es.infragistics.com/products/ignite-ui-react/react/components/ai/cli-mcp) ## 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: ```bash # 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](https://github.com/georgianastasov/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. ![Eye of Mordor Command Center dashboard assembled through prompts via Ignite UI CLI MCP](https://static.infragistics.com/marketing/Blogs/ignite-ui-cli-mcp-release/1.png "app") 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](https://github.com/georgianastasov/eye-of-mordor) ## Breaking Changes & Migration This release removes three legacy project types and changes the default framework in the step-by-step wizard. | Removed / changed | Affected | What changed | Migration | |---|---|---|---| | `igx-ts-legacy` Angular NgModules project type | New Angular project scaffolds | NgModule-based Angular template removed | Existing projects keep working. New projects use `igx-ts` (standalone). Run `ig new` and accept the default, or pass `--type=igx-ts`. | | `ig-ts` Angular wrappers project type | New Angular project scaffolds | Legacy Ignite UI for Angular wrappers template removed | Existing projects keep working. Re-scaffolding should target `igx-ts`. | | `igr-es6` React wrappers project type | New React project scaffolds | Legacy ES6 React wrappers template removed | Existing projects keep working. Re-scaffolding should target `igr-ts`. | | Step-by-step wizard default framework | `ig new` / `ig` in guided mode | Default changed from `jquery` to `angular` when no `--framework` is provided | Explicit `--framework=jquery` still works. | ## Get Started Install or upgrade the CLI and wire an existing project in two commands: ```bash # 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](https://es.infragistics.com/products/ignite-ui-angular/angular/components/general/ai/cli-mcp) - 🚀 [AI-Assisted App Development with Ignite UI](https://es.infragistics.com/ai-assisted-app-development) - 💬 [Ignite UI CLI on GitHub](https://github.com/IgniteUI/igniteui-cli) - 🏰 [Eye of Mordor - showcase app on GitHub](https://github.com/georgianastasov/eye-of-mordor)

Angular Product Updates React Web Components