Skip to content
Infragistics

AI-Assisted App Development One Playbook for Developers and AI Agents

Ignite UI brings AI-assisted app development to Angular, React, Web Components and Blazor. AI coding assistants like GitHub Copilot, Cursor and Claude Code are fast, but they don't know your components, APIs or design system. Agent Skills, the Ignite UI CLI MCP and the Theming MCP give them that context, so they generate production-ready UI inside the tools you already use.

Ignite UI contextYour promptAI assistantCopilot · Claudeig newIgnite UI CLIin your terminalYour appAngularReactWeb ComponentsBlazorAgent Skillspatterns & pitfallsCLI MCPdocs · API · setupTheming MCPpalettes · tokensIgnite UI contextYour promptwhat you want builtAI assistantCopilot · Claude · CursorAgent Skillspatterns & pitfallsCLI MCPdocs · API · setupTheming MCPpalettes · tokensIgnite UI CLIig new · in your terminalYour appAngular · ReactWeb Components · Blazor

Trusted by:

  • Intuit Logo
  • Blue Yonder Logo
  • Exxon Logo
  • Morgan Stanley Logo
  • Pedrollo Logo
  • PTV Group Logo
  • Pasona Tech Logo
  • Battelle Logo
  • Fidelity Investments Logo

Pick a prompt to see Agent Skills, the CLI MCP and the Theming MCP working together.

Build an Angular sales dashboard with a paged data grid, in our brand purple #7B2D8B

Agent Skill loaded: igniteui-angular-grids

get_project_setup_guide(framework: "angular")ig new · base template

search_docs(query: "grid paging", framework: "angular")grid-paging

create_palette(primary: "#7B2D8B", secondary: "#F97316", surface: "#FAFAFA", name: "brand", platform: "angular", output: "sass")$brand-palette

CLI MCP for setup and docs, Theming MCP for the palette — the assistant runs ig new itself

Make our React app compact and put the primary buttons in our brand purple

Agent Skill loaded: igniteui-react-customize-theme

get_component_design_tokens(component: "contained-button")primary tokens: background, foreground

create_component_theme(component: "contained-button", platform: "react", output: "css", tokens: {"background": "#7B2D8B"})igc-button[variant="contained"]

set_size(size: "small", platform: "react")--ig-size: 1

Theming MCP only — nothing to scaffold

Start a Blazor app with a sortable data grid

Agent Skill loaded: igniteui-blazor-grids

get_project_setup_guide(framework: "blazor")dotnet new and NuGet steps

search_docs(query: "grid sorting", framework: "blazor")grid-sorting

get_api_reference(platform: "blazor", component: "IgbColumn", member: "Sortable")Sortable: bool

Same toolchain, .NET steps and Blazor APIs

See It Work

The Toolchain Behind the Playbook

Developers and AI agents can finally work from the same playbook. Agent Skills tell the assistant how Ignite UI is meant to be used, the CLI MCP gives it the current docs, API and setup steps, and the Theming MCP generates the styles — so the UI it builds matches your conventions from the first generation, across every developer, IDE and framework.

Pick a prompt to watch a request use the layers it needs.

The Playbook Is Yours. The API Is Ours

Three layers, each independently configurable, and all three set up by one command — ig ai-config. You own the Skills and extend them with your standards; the MCP servers give your agents the current Ignite UI API and theming engine.

CLI MCP Server

Gives an assistant the current Ignite UI docs, API reference and project-setup steps, so it scaffolds and extends apps with the Ignite UI CLI instead of from a remembered API.

  • Six read-only tools: docs, API reference and setup guides
  • Angular, React, Web Components and Blazor
npx -y igniteui-cli mcpAbout the CLI MCP Server

AI Agent Skills

SKILL.md files that teach an assistant how Ignite UI components are actually used — the props, the patterns and the pitfalls. You add them to your repository and extend them with your own conventions.

  • Components, grids, theming and design-to-code from an image, per framework
  • Ship inside igniteui-angular, igniteui-react and igniteui-webcomponents; Blazor skills install from GitHub
  • Work with Copilot, Claude Code, Cursor, Windsurf, Codex, Gemini CLI and JetBrains Junie
About AI Agent Skills

Theming MCP Server

Generates palettes, themes and component styles through the Ignite UI Theming Engine, so an assistant themes with real tokens instead of guessed values.

  • Material, Bootstrap, Fluent and Indigo, light or dark
  • A WCAG AA contrast colour for every shade
npx -y igniteui-theming igniteui-theming-mcpAbout the Theming MCP Server

Standardization by Design

Embed the exact import paths, component patterns, property bindings, and decision flows for Angular, React, Blazor and Web Components directly into Copilot, Cursor, Claude, and others. The agent stops guessing and starts following your standards.

  • Dashboards from a single prompt

    Create data-driven screens and dashboards with the correct component layout and data bindings from a single prompt, reducing manual setup and accelerating development.

  • Your brand, applied consistently

    Apply your brand across a new screen with the Theming MCP, using real palette and design-token values without approximations to ensure consistent styling across components.

  • Grids, charts and forms by default

    Compose data-driven grids, charts, and forms by default, adding any feature your app requires so you can instantly create powerful, interactive UI components.

  • Private, on your own machine

    The MCP servers run locally and answer from bundled documentation. Pair them with a local LLM to keep every query, dataset, and interaction private.

get_doc(framework: react, name: grid-column-pinning)
---
component: IgrGrid, IgrColumn
toc_name: Column Pinning
keywords: grid, column-pinning, frozen-columns, toolbar, scrolling,
  column-order, pinning-position, custom-ui, column-selection
summary: Learn how to pin React Grid columns, control their position,
  reorder pinned columns, and build custom pinning interfaces.
  Includes toolbar, API, styling, and limitation examples.
premium: true
---
 
# React Grid Column Pinning
⋮
This example pins columns to the left side of the
[`IgrGrid`](mcp:get_api_reference?platform=react&component=IgrGrid)
and exposes the integrated toolbar UI.
⋮
<IgrColumn field="Company" header="Company" pinned={true} />
<IgrColumn field="ContactName" header="Contact Name" />
<IgrColumn field="ContactTitle" header="Contact Title" />
{/* ... additional columns */}

The Foundation

AI-Optimized Documentation - The Quality Ceiling of the System

Ignite UI's documentation has been restructured for agent consumption — not a refresh, but an architectural change. This is what an assistant receives when it asks the CLI MCP for a topic:

  • A summary and keywords on every topic — all 1,230 of them, across four frameworks — so search finds the right page without the agent reading the whole site.
  • API names that link straight to the API tool in most topics, one call away from the exact property, method or event.
  • Code samples in almost every topic, trimmed where they repeat, so examples stay short and cost fewer tokens.

Get Started With AI-Assisted App Development in Minutes

Stay in your existing IDE and workflow: four steps take you from an Ignite UI project to an AI assistant that writes correct, framework-aware Ignite UI code. Starting fresh? Projects created with ig new come with all of it configured.

  1. Add Ignite UI to your project

    Install the library for your framework, so ai-config can add the Agent Skills that match it. The MCP servers work even before you do.

  2. Run one command: ai-config

    It configures the CLI MCP and the Theming MCP for the AI clients you choose, and copies the Agent Skills for your framework into the folders your agents read.

  3. Start the servers in your AI client

    ai-config configures the servers; your client starts them — one click in VS Code or Cursor, automatic in Claude Code.

  4. Prompt your assistant

    Ask in plain language. The assistant follows the Skills, looks up the current API and theming engine, and builds with real Ignite UI components.

# 1 · Add Ignite UI to your project
ng add igniteui-angular
npm install igniteui-react
npm install igniteui-webcomponents
dotnet add package IgniteUI.Blazor
 
# 2 · Configure the whole toolchain in one command
npx igniteui-cli@latest ai-config
 
# 3 · Start the servers in your AI client
#   VS Code      .vscode/mcp.json → Start
#   Cursor       Settings → MCP → enable
#   Claude Code  starts them on first use
 
# 4 · Ask for what you want
> Build a sales dashboard with a paged data grid

Read the Setup Guide

Frequently Asked Questions

What are Ignite UI Agent Skills?

Agent Skills are structured markdown files that load into your AI assistant's context (one per concern, per framework). They define correct import paths, component patterns, property bindings, and decision flows for Angular, React, Web Components, and Blazor. When a Skill is active, Copilot or Cursor stops relying on general training data, which is often outdated or wrong for your specific library version. Instead, it follows the Skill. The output is far more likely to compile, with correct imports and idiomatic patterns.

What is the Ignite UI CLI MCP Server?

The CLI MCP (Model Context Protocol) server exposes Ignite UI's current documentation, API reference, and project-setup guides as queryable context for Angular, React, Web Components, and Blazor. Agents call it during a coding session to look up component APIs and follow CLI-backed setup and scaffolding steps; design tokens and theming come from the separate Theming MCP. Instead of reading a whole documentation site, the agent fetches the targeted, version-matched entries it needs. It updates with every CLI release.

How is this different from just giving Copilot the documentation?

Documentation is a text that an AI agent reads and interprets. The MCP server is a tool an agent calls and gets a structured response from. The difference in output quality is significant, especially at the edges of context limits, where text-heavy documentation degrades faster than targeted tool responses. Agent Skills add a second layer: explicit decision flows and patterns that prevent the agent from making the wrong choice before it even queries the API. Together, Skills and MCP replace approximation with a system.

Can I customize the Skills for my project?

Yes, and that's by design. A Skill is a markdown file. Edit it to match your team's conventions, add project-specific component patterns, enforce your architectural decisions. Version it alongside your codebase.

Do I need both Skills and the MCP server, or can I use them independently?

Both work independently and add value on their own. Skills alone significantly improve agent output for teams not yet running an MCP server. The MCP server alone gives agents live API access without Skills-level convention enforcement. Together they form the complete context stack.

Does Ignite UI reduce AI hallucinations?

Skills and the MCP server address hallucination at the source. Skills target the most common failure modes — wrong import paths, incorrect API signatures, outdated component names — by replacing training-data guesses with explicit instructions. The MCP server grounds the agent in the current library API, rather than a stale snapshot from its training data. The result is a significant reduction in the errors that cause rewrite cycles. No system eliminates hallucination entirely, but grounding the agent in both your conventions and the live library API gets you as close as current tooling allows.

Is the Theming MCP available for all frameworks?

Yes. The Theming MCP is in production and supports Angular, React, Web Components, and Blazor today.

Is Ignite UI AI tooling suitable for enterprise production?

The AI toolchain (Agent Skills, including generating an app from an image design, plus the CLI and Theming MCP servers) is built on top of Ignite UI, by Infragistics, which has shipped enterprise UI components for more than 35 years. The Skills are versioned alongside the library. The MCP server reflects the current release. There is no separate AI tier, no usage-based pricing, and no dependency on a third-party AI infrastructure that could change without notice.

Does Ignite UI work with GitHub Copilot, Cursor, and Windsurf?

Yes. Agent Skills work with GitHub Copilot (including VS Code Agent Mode), Cursor, Windsurf, Claude Code, Codex, Gemini CLI, and JetBrains Junie. Each has a persistent setup path — ig ai-config writes it for you once per project, and every session follows your standards from then on. The MCP servers work with any MCP client that supports STDIO.

Included with Ignite UI

AI Capabilities Included No New Pricing

Extend the AI tools you and your team already use. The toolchain is part of the library, because AI agents are already part of your team.

  • No usage-based AI tier
  • No separate billing model
  • No new IDE to learn

Select a framework to get started for free: