Ignite UI React 19.7 – AI Skills, MCP & More

Radoslav Mirchev Jun 10, 2026 10 min read

Ignite UI React 19.7 is now available on npm. This release advances the library's AI toolchain on two fronts: updated LLM Agent Skills ship inside the npm package, and the Ignite UI CLI MCP server serves React component documentation, API reference, and scaffolding guidance to any connected AI assistant. For engineering teams, that means faster onboarding, less hand-written integration code, and fewer inconsistencies across projects when developers or AI assistants implement common patterns. Platform-side, the Invoker Commands API eliminates JavaScript wiring for common show/hide/toggle patterns, and the Popover API integration extends to Nav Drawer, Snackbar, and Toast. Run `npm install igniteui-react@19.7.0` to upgrade. --- > **What's new in Ignite UI React 19.7** > > - **LLM Agent Skills (updated)** - four in-package skills teach AI agents React component usage, theming, design-to-code, and bundle optimization > - **CLI MCP Server: React support** - `ig mcp` serves React component docs, full API reference, and scaffolding guidance to any connected AI assistant > - **Invoker Commands API** - declarative `--show`, `--hide`, `--toggle` via `command` and `commandFor` props, no JavaScript wiring required > - **Platform Popover Upgrades** - Nav Drawer moves to native Popover API; Snackbar and Toast gain top-layer `positioning` property > - **Date Range Picker inline editing** - edit range value directly via a single input field > - ⚠️ **Nav Drawer `overlay` CSS part removed** - target `base::backdrop` or `--ig-overlay-background-color` instead > > 📦 `npm install igniteui-react@19.7.0` > 📄 [Full changelog](https://github.com/IgniteUI/igniteui-react/blob/master/CHANGELOG.md) --- ## LLM Agent Skills Four LLM Agent Skills ship inside the `igniteui-react` npm package under the `skills/` directory. Each is a self-contained skill file with step-by-step instructions, code examples, and React-specific patterns - structured so AI agents can retrieve and apply them consistently. The preferred way to add the Ignite UI AI toolchain (Skills & MCP servers) to an existing project is `ig ai-config`. Agent toolchains evolve rapidly; `ig ai-config` is designed to be idempotent - you can run it on every release cycle to apply the latest skills without overwriting your team's custom agent instructions. It copies compatible skills into the appropriate discovery path, merges MCP server entries, and updates the baseline instructions in one step. | Skill | Use when | |---|---| | **components** | Identifying and using `Igr*` components - JSX patterns, events, refs, forms, Next.js setup | | **customize-theme** | Applying custom styles via CSS custom properties, Sass, and the theming system | | **optimize-bundle-size** | Reducing bundle size with granular imports, tree-shaking, and lazy loading | | **generate-from-image-design** | Implementing a view from a screenshot, mockup, or wireframe using Ignite UI React components | If you prefer to set up skills manually, copy them into your repository's `.github/skills/` directory so compatible agents can discover them: ```bash # Unix / macOS cp -r node_modules/igniteui-react/skills/* .github/skills/ # Windows (PowerShell) Copy-Item -Recurse node_modules\igniteui-react\skills\* .github\skills\ ``` The skills are compatible with GitHub Copilot, Cursor, Windsurf, Claude, JetBrains Junie, and Gemini CLI. The **components** skill is particularly useful for Ignite UI React: it covers `Igr*`-prefixed component usage, JSX event binding, React ref patterns, form integration, and Next.js project setup - patterns that AI agents reliably get wrong when falling back on general training data. [AI-Assisted Development documentation →](https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview) --- ## CLI MCP Server: React Documentation & Scaffolding The Ignite UI CLI bundles an MCP (Model Context Protocol) server that gives any connected AI assistant direct access to Ignite UI documentation, API reference, and project scaffolding guidance. React components, templates, and documentation are fully supported. The recommended setup path is `ig ai-config`, which adds the AI toolchain to an existing project by copying compatible skills into agent discovery path(s), generating agent instruction files, and creating the MCP configuration for supported assistants automatically. If you prefer to configure MCP manually, start the server with a single command, then add one JSON block to your AI assistant's configuration: ```bash # Requires igniteui-cli 15.0.0 or newer npm install -g igniteui-cli # Start the MCP server ig mcp ``` ```json { "mcpServers": { "igniteui": { "command": "ig", "args": ["mcp"] } } } ``` Once connected, the MCP server exposes six tools to your assistant: `list_components`, `get_doc`, `search_docs`, `get_api_reference`, `search_api`, and `generate_ignite_app`. This means your agent can retrieve the full documentation for any `Igr*` component on demand, look up exact prop signatures and event names, and get a tailored setup guide for a new React project - all without leaving the conversation. This is where the Skills and the MCP complement each other. Skills teach the agent how to use Ignite UI React correctly: which `Igr*` component fits the UI pattern, how theming works in a React context, how to match a design mockup to components. The MCP gives the agent what to say when the question is specific - the exact prop signature for `IgrGridComponent`, the correct event name for a given interaction, the right import path for the installed version. One layer provides reasoning context; the other provides factual recall. The CLI also scaffolds new React projects and adds component templates: ```bash # New project - AI toolchain configured from the start (interactive) ig new # Or specify framework directly ig new "My App" --framework=react # Add a component template interactively ig add ``` The CLI MCP is one part of the broader Ignite UI AI toolchain, which also includes a Theming MCP server for design token and CSS custom property generation with WCAG AA contrast validation, and a MAKER MCP server for multi-agent task orchestration. [See the AI-Assisted Development documentation for the full setup →](https://www.infragistics.com/products/ignite-ui-react/react/components/ai/ai-assisted-development-overview) --- ## Invoker Commands API `IgrButton` and `IgrIconButton` now support `command` and `commandFor` props, enabling declarative show/hide/toggle control of target components without JavaScript wiring. Assign a command - `--show`, `--hide`, or `--toggle` - and point `commandFor` at the target component's `id`. ```jsx {/* No event handlers, no refs, no imperative show() call */} <IgrButton command="--toggle" commandFor="main-drawer"> Open Menu </IgrButton> <IgrNavDrawer id="main-drawer"> {/* navigation content */} </IgrNavDrawer> ``` Five components respond to these commands: `IgrBanner`, `IgrDialog`, `IgrNavDrawer`, `IgrSnackbar`, and `IgrToast`. The pattern eliminates the ref-and-imperative-call boilerplate that commonly appears in React codebases when wiring trigger buttons to overlay components. The implementation follows the [Invoker Commands specification](https://open-ui.org/components/invokers.explainer/) currently advancing at Open UI, with Chromium-native support already available. --- ## Platform Popover Upgrades: Nav Drawer, Snackbar & Toast Three components migrate to the browser's native Popover API this release, each gaining top-layer rendering and the platform accessibility semantics that come with it. **Nav Drawer** - non-relative positions now use the Popover API in place of the library's custom overlay. The top layer sits above all stacking contexts, CSS transforms, and fixed-position ancestors. Focus trapping and ARIA modal semantics come from the browser rather than library code. Two new lifecycle events accompany the change, exposed as React props: `onClosing` fires just before close and is cancelable - useful for unsaved-changes guards - and `onClosed` fires after the drawer has fully closed. A new `keepOpenOnEscape` prop prevents Escape from dismissing the drawer when the host application needs that key for other interactions. ```jsx <IgrNavDrawer onClosing={(event) => { if (hasUnsavedChanges) event.preventDefault(); }} onClosed={resetNavigationState} /> ``` **Snackbar and Toast** - both now render as popovers and gain a `positioning` prop. `viewport` (default) anchors the notification to the viewport. `container` anchors it to the nearest visible ancestor, enabling panel-scoped notifications without fighting stacking contexts or `overflow: hidden` ancestors. ```jsx {/* Viewport-anchored - appears over all page content */} <IgrToast positioning="viewport" open={true}>Saved to cloud</IgrToast> {/* Panel-scoped notification */} <div className="editor-panel"> <IgrSnackbar positioning="container" open={true}> Draft auto-saved </IgrSnackbar> </div> ``` [Nav Drawer docs →](https://www.infragistics.com/products/ignite-ui-react/react/components/menus/navigation-drawer) | [Snackbar docs →](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/snackbar) | [Toast docs →](https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/toast) --- ## More in This Release - **Form controls: Enter key submits the associated form** - `IgrInput`, `IgrMaskInput`, `IgrDateTimeInput`, `IgrCheckbox`, `IgrRadio`, `IgrSwitch`, `IgrDatePicker`, and `IgrDateRangePicker` now match native HTML form element behavior on Enter. No code changes required; review any custom Enter-key handlers that manually call `form.submit()` to avoid duplicate submissions. - **Date Range Picker inline editing** - users can now type the date range value directly into a single input field in addition to the calendar picker. Practical for keyboard-centric or high-density data entry UIs. [Docs →](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker) - **Input: date/time type theming** - `date`, `time`, `datetime-local`, `week`, and `month` input types now receive full theming support and consistent floating label behavior across all supported themes. - **Localization: resource strings deprecated** - the per-component `resourceStrings` interfaces for `Calendar`, `Chat`, `Date Picker`, and `Date Range Picker` are deprecated. Components now use `igniteui-i18n` resource keys. Provide a complete resource strings object rather than setting individual string properties. - **Bug fixes** - Button Group selected state border color mismatch in focused and hover states; Combo display value not restored when tabbing out in single-select mode with partial search text; Stepper step components now correctly receive context when connected to the DOM before their parent stepper. --- ## Breaking Changes & Migration **Nav Drawer `overlay` CSS part removed** Affected: `IgrNavDrawer` (non-relative positions) What changed: the `overlay` CSS part used to style the drawer's backdrop has been removed as part of the Popover API migration. The underlying element it targeted no longer exists. Migration: target the `base` CSS part's `::backdrop` pseudo-element, use the `--ig-overlay-background-color` CSS custom property, or apply backdrop customization through the theming package. [Full changelog →](https://github.com/IgniteUI/igniteui-react/blob/master/CHANGELOG.md) --- ## How to Get Started Install or upgrade Ignite UI React today: ```bash npm install igniteui-react@19.7.0 ``` - 📘 [Release Notes & Full Changelog](https://github.com/IgniteUI/igniteui-react/blob/master/CHANGELOG.md) - 🚀 [Getting Started Guide](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started) - 💬 [GitHub Discussions](https://github.com/IgniteUI/igniteui-react/discussions) ---

React Uncategorized

Blazor

Ignite UI React 19.7 – AI Skills, MCP & More

Related Articles

Ignite UI for Blazor 26.1 – Agent Skills, MCP, Grids & New Components

What’s New in Infragistics Ultimate 26.1

Why AI Results Improve Over Time Without the Model Actually Learning