Ignite UI CLI MCP Server & Angular 21.2

CLI 15.0 Ignite UI新しい足場をすべてAI対応のワークスペースに変えます。内蔵のMCPサーバー、画像から生成できる設計スキル、Angular、React、Web Components向けの事前配線されたエージェント構成を出荷します。

ラドスラフ・ミルチェフ最終更新日:2026年5月5日 10分読書

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](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 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](https://www.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://www.infragistics.com/products/ignite-ui-angular/angular/components/general/ai/cli-mcp) - 🚀 [AI-Assisted App Development with Ignite UI](https://www.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) ## Ignite UI for Angular 21.2 21.2 is 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.

Angular Product Updates React Web Components