Ignite UI for Web Components 7.2 - AI Skills, MCP & More

Ignite UI for Web Components 7.2 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 gains Web Components documentation access and scaffolding support. 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 boilerplate for common show/hide/toggle patterns, and the Popover API integration extends to Nav Drawer, Snackbar, and Toast. Run npm install igniteui-webcomponents@7.2.0 to upgrade.

What’s new in Ignite UI Web Components 7.2

• LLM Agent Skills (updated) - five in-package skills teach AI agents component selection, framework integration, theming, design-to-code, and bundle optimization
• CLI MCP Server: Web Components support - ig mcp now serves WC component docs, full API reference, and scaffolding guidance to any connected AI assistant
• Invoker Commands API - declarative --show, --hide, --toggle for five components via command and commandfor attributes, no JavaScript 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-webcomponents@7.2.0
📄 Full changelog

LLM Agent Skills

Five LLM Agent Skills ship inside the igniteui-webcomponents npm package under the skills/ directory. Each is a self-contained SKILL.md file with step-by-step instructions, code examples, and framework-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’ configuration) 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.

If you want to set up skills manually instead, copy them into your repository’s .github/skills/ directory so compatible agents can discover them for this project:

# Unix / macOS
cp -r node_modules/igniteui-webcomponents/skills/* .github/skills/

# Windows (PowerShell)
Copy-Item -Recurse node_modules\igniteui-webcomponents\skills\* .github\skills\

The skills are compatible with GitHub Copilot, Cursor, Windsurf, Claude, JetBrains Junie, and Gemini CLI. Discovery paths vary by agent - consult your agent’s documentation for the correct directory. The integrate-with-framework skill is particularly useful for Web Components: it branches per host (React via igniteui-react wrappers, Angular, Vue, vanilla JS) and covers the integration patterns agents consistently miss without explicit guidance.

AI-Assisted Development documentation →

CLI MCP Server: Web Components 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. Web Components 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 configuring MCP server entries automatically. For step-by-step manual setup, install the CLI, run ig ai-config to register MCP server entries, then start the servers:

# Requires igniteui-cli 15.0.0 or newer
npm install -g igniteui-cli
# Configure the MCP servers
ig ai-config
# Start the MCP servers
ig mcp

{
  "mcpServers": {
    "igniteui-cli": {
      "command": "npx",
      "args": [
        "-y",
        "igniteui-cli",
        "mcp"
      ]
    },
    "igniteui-theming": {
      "command": "npx",
      "args": [
        "-y",
        "igniteui-theming",
        "igniteui-theming-mcp"
      ]
    }
  }
}

Once connected, two MCP servers are available to your assistant. The CLI MCP exposes six tools: list_components, get_doc, search_docs, get_api_reference, search_api, and generate_ignite_app - for Web Components this means on-demand documentation for any igc-* component, exact API signatures, and tailored project scaffolding. The Theming MCP provides design token access, CSS custom property generation, and WCAG AA contrast validation.

This is where the Skills and the MCP complement each other. Skills teach the agent how to use Ignite UI Web Components correctly: which patterns apply per framework, how theming works, how to read a design and map it to components. The MCP gives the agent what to say when the question is specific - the exact property signature for IgcGridComponent, the current list of available date picker slots, the correct import path for a given version. One layer provides reasoning context; the other provides factual recall.

The CLI also scaffolds new Web Components projects and adds component templates:

# New project - AI toolchain configured from the start (interactive)
ig new

# Or specify framework and name directly
ig new "My App" --framework=webcomponents

# Add a component template interactively
ig add

Getting Started with Ignite UI Web Components →

Invoker Commands API

igc-button and igc-icon-button now support command and commandfor attributes, enabling declarative show/hide/toggle control of target components without JavaScript. Assign a command - --show, --hide, or --toggle - and point commandfor at the target component’s id.

<igc-button command="--toggle" commandfor="main-drawer">
  Open Menu
</igc-button>

<igc-nav-drawer id="main-drawer">
  
</igc-nav-drawer>

Five components respond to these commands: igc-banner, igc-dialog, igc-nav-drawer, igc-snackbar, and igc-toast. For Web Components - which are used across Angular, React, Vue, and vanilla JS without a shared component lifecycle - declarative commands are the cleanest cross-host solution for this pattern. The implementation follows the Invoker Commands specification 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: igcClosing fires just before close and is cancelable - useful for unsaved-changes guards - and igcClosed fires after the drawer has fully closed. A new keepOpenOnEscape property prevents Escape from dismissing the drawer when the host page needs that key for other interactions.

drawer.addEventListener('igcClosing', (event) => {
  if (hasUnsavedChanges) event.preventDefault();
});

Snackbar and Toast - both now render as popovers and gain a positioning property. 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.

<igc-toast positioning="viewport" open>Saved to cloud</igc-toast>

<div class="editor-panel">
  <igc-snackbar positioning="container" open>Draft auto-saved</igc-snackbar>
</div>

Nav Drawer docs → | Snackbar docs → | Toast docs →

More in This Release

• Form controls: Enter key submits the associated form - IgcInput, IgcMaskInput, IgcDateTimeInput, IgcCheckbox, IgcRadio, IgcSwitch, IgcDatePicker, and IgcDateRangePicker 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 →

• 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-property 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.

Breaking Changes & Migration

Nav Drawer overlay CSS part removed
Affected: igc-nav-drawer (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 →

How to Get Started

Install or upgrade Ignite UI for Web Components today:

npm install igniteui-webcomponents@7.2.0

• 📘 Release Notes & Full Changelog
• 🚀 Getting Started Guide
• 💬 GitHub Discussions