Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 48 additions & 21 deletions doc/en/components/ai/ai-assisted-development-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ _keywords: {Platform}, {ProductName}, Infragistics, MCP, Model Context Protocol,
_language: en
_license: MIT
_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview"
last_updated: "2026-04-21"
namespace: Infragistics.Controls
mentionedTypes: []
---

<!-- schema: Article, HowTo -->

# AI-Assisted Development with Ignite UI

Ignite UI for Angular, React, and Web Components provides a three-part AI toolchain - Agent Skills, the Ignite UI CLI MCP server, and the Ignite UI Theming MCP server - that grounds AI coding assistants in correct component APIs, import paths, and design tokens. Agent Skills are developer-owned instruction packages that define how AI agents use Ignite UI in a specific project. The CLI MCP server exposes Ignite UI CLI scaffolding, component management, and documentation tools to the active AI agent session via the Model Context Protocol. The Theming MCP server exposes the Ignite UI Theming Engine as queryable agent context. All three components work with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant.
Expand All @@ -19,11 +22,11 @@ The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skil

Ignite UI's AI toolchain consists of three independently usable layers. Each layer can be enabled on its own; they are designed to work together.

| Layer | What it provides | Owner | Frameworks |
| --- | --- | --- | --- |
| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor |
| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components |
| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS variable generation, theming queries via MCP | Infragistics | Angular, React, Web Components, Blazor |
| Layer | What it provides | Owner | Frameworks |
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- |
| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor |
| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components |
| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor |

The CLI MCP server and Theming MCP server are both started through `npx` and connect to any MCP-compatible client through STDIO transport. Agent Skills are local files placed in your project that the AI client reads from disk.

Expand Down Expand Up @@ -67,20 +70,50 @@ For configuration details, see [Theming MCP](theming-mcp.md).

The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport.

| Client | Configuration method |
| --- | --- |
| VS Code with GitHub Copilot | `.vscode/mcp.json` |
| Cursor | `.cursor/mcp.json` |
| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` |
| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` |
| Claude Code | `.mcp.json` or the Claude Code MCP CLI command |
| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** |
| Client | Configuration method |
| --------------------------- | ----------------------------------------------------------------- |
| VS Code with GitHub Copilot | `.vscode/mcp.json` |
| Cursor | `.cursor/mcp.json` |
| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` |
| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` |
| Claude Code | `.mcp.json` or the Claude Code MCP CLI command |
| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** |

Agent Skills are compatible with GitHub Copilot via `.github/copilot-instructions.md`, Cursor via `.cursorrules` or `.cursor/rules/`, Windsurf via `.windsurfrules`, and JetBrains AI Assistant via project-level prompt settings.

## Set Up the AI Toolchain

Setting up the Ignite UI AI toolchain takes three steps: load Agent Skills for your framework, connect the CLI MCP server, and optionally connect the Theming MCP server. All three steps are independent and can be done in any order.
Use `ig ai-config` to configure Agent Skills and both MCP servers in a single command. For individual control over each layer, or to configure only part of the toolchain in an existing project, follow the steps below. Running `ig ai-config` completes Steps 1, 2, and 3 in one operation.

### Quick Setup

The `ai-config` command copies the Ignite UI Agent Skills into `.claude/skills/` and writes the Ignite UI MCP server configuration to `.vscode/mcp.json`. If the files already exist and are up-to-date, the command is a no-op.

**Using Angular Schematics:**

```bash
ng generate @igniteui/angular-schematics:ai-config
```

This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers.

**Using the Ignite UI CLI:**

```bash
npx igniteui-cli ai-config
```

If you have the Ignite UI CLI installed globally, use the shorter form:

```bash
ig ai-config
```

> [!NOTE]
> The `npx igniteui-cli` and `ig` forms do not register the `@angular/cli` MCP server. Use the Angular Schematics command above if you want all three servers configured in a single step.

> [!NOTE]
> The command requires Ignite UI packages to be installed in your project (`npm install`). If no skill files are found, make sure your packages are up-to-date.

### Step 1 - Load Agent Skills

Expand Down Expand Up @@ -139,12 +172,6 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m

## Additional Resources

<!-- React -->
- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md)
<!-- end: React -->
<!-- WebComponents -->
- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md)
<!-- end: WebComponents -->
- [Agent Skills](./skills.md)
- [Ignite UI CLI MCP](./cli-mcp.md)
- [Ignite UI Theming MCP](./theming-mcp.md)
Expand All @@ -154,4 +181,4 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m
Our community is active and always welcoming to new ideas.

- [{ProductName} **Forums**]({ForumsLink})
- [{ProductName} **GitHub**]({GithubLink})
- [{ProductName} **GitHub**]({GithubLink})
Loading
Loading