Skip to content

Commit 1cf0e25

Browse files
chore(mcp): documentation database update (#1686)
1 parent f16bc87 commit 1cf0e25

909 files changed

Lines changed: 7795 additions & 45441 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Binary file not shown.
632 KB
Binary file not shown.

packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/angular/pivotGrid-pivot-grid.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,9 @@ export class PivotDataSelectorSampleComponent {
9999
```
100100
```html
101101
<div class="pivot-container">
102-
<div style="flex-grow: 1;">
103-
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [height]="'850px'"
104-
[superCompactMode]="true" [defaultExpandState]='true'>
105-
</igx-pivot-grid>
106-
</div>
102+
<igx-pivot-grid #grid1 [data]="data" [pivotConfiguration]="pivotConfigHierarchy" [height]="'850px'"
103+
[superCompactMode]="true" [defaultExpandState]='true'>
104+
</igx-pivot-grid>
107105
<igx-pivot-data-selector [grid]="grid1"></igx-pivot-data-selector>
108106
</div>
109107
```

packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/accordion.md

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ In it, you can see how to define an accordion and its expansion panels. The samp
8484
}
8585
```
8686

87-
8887
<div class="divider--half"></div>
8988

9089
## Getting Started with Blazor Accordion
@@ -341,7 +340,6 @@ The sample below demonstrates how elaborate filtering options can be implemented
341340
}
342341
```
343342

344-
345343
<div class="divider--half"></div>
346344

347345
### Nested Blazor Accordions Scenario
@@ -453,7 +451,6 @@ In the following Blazor Accordion example is created a complex FAQ section in or
453451
}
454452
```
455453

456-
457454
<div class="divider--half"></div>
458455

459456
## Keyboard Navigation
Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
---
2+
title: AI-Assisted Development with Ignite UI - Ignite UI for Blazor
3+
_description: Configure Agent Skills, the Ignite UI MCP server, and the Theming MCP server in your Angular, React, Blazor, or Web Components project with a single command — npx igniteui-cli ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs.
4+
_keywords: Blazor, Ignite UI for Blazor, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config
5+
_language: en
6+
_license: MIT
7+
_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview"
8+
last_updated: "2026-05-03"
9+
namespace: Infragistics.Controls
10+
mentionedTypes: []
11+
_tocName: Agent Workflow
12+
---
13+
14+
<!-- schema: Article, HowTo -->
15+
16+
# AI-Assisted Development with Ignite UI
17+
18+
Ignite UI for Blazor provides a complete AI toolchain - Agent Skills, the Ignite UI CLI MCP server, the Ignite UI Theming MCP server and the MAKER 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 (`@igniteui/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 (`igniteui-theming`) exposes the Ignite UI Theming Engine as queryable agent context. The MAKER MCP (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. Skills, CLI MCP and Theming MCP - all three are configured by a single command: `npx igniteui-cli ai-config`
19+
20+
The MCP servers and Agent Skills serve different purposes and have different prerequisites:
21+
22+
| Component | What it provides | Requires Ignite UI installed? |
23+
| -------------------- | -------------------------------------------------------------- | ----------------------------- |
24+
| Ignite UI MCP server | Documentation queries, API reference, scaffolding tools | No |
25+
| Theming MCP server | Design tokens, palette tools, WCAG contrast validation | No |
26+
| Agent Skills | Project-level instruction packages for correct component usage | Yes |
27+
28+
You can start evaluating Ignite UI AI assistance with the MCP servers alone - Ignite UI does not need to be installed in your project. Agent Skills become available once you install Ignite UI packages.
29+
30+
The CLI MCP server requires STDIO transport; HTTP-based MCP clients are not supported. Agent Skills and the CLI MCP server do not modify project files autonomously - they expose tools and instructions to the active AI agent, which acts on developer prompts.
31+
32+
## Configure the AI Toolchain
33+
34+
Run this command from the root of your existing Angular, React, Blazor, or Web Components project. It configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. Existing files are only updated if their content has changed.
35+
36+
```bash
37+
npx igniteui-cli ai-config
38+
```
39+
40+
> [!IMPORTANT]
41+
> Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x.
42+
43+
After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent.
44+
45+
### What to Expect
46+
47+
If Ignite UI is **not** installed in the project:
48+
49+
```
50+
Ignite UI MCP servers configured in .vscode/mcp.json
51+
No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date.
52+
```
53+
54+
The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI.
55+
56+
If Ignite UI **is** installed in the project:
57+
58+
```
59+
Ignite UI MCP servers configured in .vscode/mcp.json
60+
Agent Skills copied to .claude/skills/
61+
```
62+
63+
Both the MCP servers and Skills are configured.
64+
65+
### Start the Servers
66+
67+
**VS Code with GitHub Copilot:**
68+
69+
Open `.vscode/mcp.json`. VS Code displays an inline **Start** button above each server entry. Click **Start** for both `igniteui` and `igniteui-theming`. Once started, VS Code shows the available tool count next to each server (for example, _"13 tools | 1 prompt"_). Alternatively, run **MCP: List Servers** from the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), select each server, and choose **Start**.
70+
71+
**Cursor:**
72+
73+
Open **Settings → MCP**, locate the `igniteui` and `igniteui-theming` entries, and toggle each one on. Cursor starts each server immediately and displays its tool count.
74+
75+
**Claude Code:**
76+
77+
Run `claude mcp list` to confirm both servers are registered. Claude Code starts MCP servers automatically when their tools are first invoked - no manual start step is required.
78+
79+
**JetBrains AI Assistant:**
80+
81+
Open **Settings → Tools → AI Assistant → Model Context Protocol (MCP)**. Click the play icon next to each server entry to start it.
82+
83+
**Claude Desktop:**
84+
85+
Quit and relaunch Claude Desktop. The servers start automatically on launch.
86+
87+
### Install Ignite UI and Add Skills Later
88+
89+
If you ran `ai-config` without Ignite UI installed and want to add Skills, install the Ignite UI package for your framework and re-run the command:
90+
91+
> [!Note]
92+
> For Blazor, the `ai-config` command is currently not available. Install the skills using the GitHub CLI:
93+
94+
```bash
95+
gh skill install IgniteUI/igniteui-blazor
96+
```
97+
98+
The command detects that Skills are now available and copies them. The MCP server entries in `.vscode/mcp.json` are left unchanged (already up-to-date)
99+
100+
## The AI Toolchain at a Glance
101+
102+
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.
103+
104+
| Layer | What it provides | Owner | Frameworks |
105+
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- |
106+
| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor |
107+
| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components, Blazor |
108+
| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS custom property generation, WCAG AA contrast validation | Infragistics | Angular, React, Web Components, Blazor |
109+
110+
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.
111+
112+
## Agent Skills
113+
114+
Agent Skills are structured, developer-owned packages that tell AI coding assistants exactly how to use Ignite UI for a specific framework. A Skill package can contain a `SKILL.md` instruction file with component patterns, import paths, and decision flows; references to authoritative Ignite UI documentation; and assets such as schema files or diagrams. When a Skill is active in the AI client, the agent follows the Skill instead of relying on general training data - which may reference outdated API signatures or import paths.
115+
116+
Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase.
117+
118+
For full setup instructions and IDE wiring, see [Agent Skills](skills.md).
119+
120+
## CLI MCP Server
121+
122+
The Ignite UI CLI MCP server (`igniteui-cli`) is an MCP server maintained by Infragistics that exposes Ignite UI CLI scaffolding and documentation tools to the active AI agent session. Once connected, the AI assistant can create Angular, React, Blazor or Web Components projects, add and modify Ignite UI components, and answer documentation and API questions - all through natural-language prompts in the chat session.
123+
124+
The CLI MCP server is configured via `npx` without a global install:
125+
126+
```bash
127+
npx igniteui-cli ai-config
128+
```
129+
130+
The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see the CLI MCP setup guides below.
131+
132+
It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.
133+
134+
## Theming MCP Server
135+
136+
The Ignite UI Theming MCP server (`igniteui-theming`) is a separate MCP server that exposes the Ignite UI Theming Engine as queryable agent context. It covers design token access, palette definitions, CSS custom property generation, and WCAG AA contrast validation. It is architecturally separate from the CLI MCP server - it can be connected independently to give the AI agent access to theming tools without exposing project scaffolding tools.
137+
138+
The Theming MCP server starts via `npx`:
139+
140+
```bash
141+
npx -y igniteui-theming igniteui-theming-mcp
142+
```
143+
144+
The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface.
145+
146+
For configuration details, see [Theming MCP](theming-mcp.md).
147+
148+
## Supported AI Clients
149+
150+
The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport.
151+
152+
| Client | Configuration method |
153+
| --------------------------- | ----------------------------------------------------------------- |
154+
| VS Code with GitHub Copilot | `.vscode/mcp.json` |
155+
| Cursor | `.cursor/mcp.json` |
156+
| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` |
157+
| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` |
158+
| Claude Code | `.mcp.json` or the Claude Code MCP CLI command |
159+
| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)*- |
160+
161+
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.
162+
163+
### Quick Setup
164+
165+
The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents.
166+
167+
**Using the Ignite UI CLI:**
168+
169+
```bash
170+
npx igniteui-cli ai-config
171+
```
172+
173+
If you have the Ignite UI CLI installed globally, use the shorter form:
174+
175+
```bash
176+
ig ai-config
177+
```
178+
179+
### Step 1 - Load Agent Skills
180+
181+
Copy the Ignite UI Skill package for your framework into your project's agent discovery path. The Skill package ships with the library in `node_modules/igniteui-{framework}/skills/`. Wire it to your IDE using the persistent setup for your client.
182+
183+
See [Agent Skills](skills.md) for the complete setup.
184+
185+
### Step 2 - Connect the CLI MCP Server
186+
187+
Add the `igniteui-cli` MCP server entry to the configuration file for your AI client. Use the JSON structure that matches your client:
188+
189+
**VS Code (`.vscode/mcp.json`):**
190+
191+
```json
192+
{
193+
"servers": {
194+
"igniteui-cli": {
195+
"command": "npx",
196+
"args": ["-y", "igniteui-cli", "mcp"]
197+
}
198+
}
199+
}
200+
```
201+
202+
**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:**
203+
204+
```json
205+
{
206+
"mcpServers": {
207+
"igniteui-cli": {
208+
"command": "npx",
209+
"args": ["-y", "igniteui-cli", "mcp"]
210+
}
211+
}
212+
}
213+
```
214+
215+
For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md).
216+
217+
### Step 3 - Connect the Theming MCP Server (optional)
218+
219+
Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`:
220+
221+
```json
222+
{
223+
"servers": {
224+
"igniteui-theming": {
225+
"command": "npx",
226+
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
227+
}
228+
}
229+
}
230+
```
231+
232+
For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).
233+
234+
## Additional Resources
235+
236+
- [Agent Skills](./skills.md)
237+
- [Ignite UI CLI MCP](./cli-mcp.md)
238+
- [Ignite UI Theming MCP](./theming-mcp.md)
239+
240+
<div class="divider--half"></div>
241+
242+
Our community is active and always welcoming to new ideas.
243+
244+
- [Ignite UI for Blazor **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-blazor)
245+
- [Ignite UI for Blazor **GitHub**](https://github.com/IgniteUI/igniteui-blazor)

packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/area-chart.md

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,6 @@ public class CountryRenewableElectricity
109109
}
110110
```
111111

112-
113112
<div class="divider--half"></div>
114113

115114
## Area Chart Recommendations
@@ -223,7 +222,6 @@ public class CountryRenewableElectricity
223222
}
224223
```
225224

226-
227225
<div class="divider--half"></div>
228226

229227
## Blazor Area Chart with Multiple Series
@@ -322,7 +320,6 @@ public class CountryRenewableElectricity
322320
}
323321
```
324322

325-
326323
<div class="divider--half"></div>
327324

328325
## Blazor Area Chart Styling
@@ -426,7 +423,6 @@ public class CountryRenewableElectricity
426423
}
427424
```
428425

429-
430426
<div class="divider--half"></div>
431427

432428
## Advanced Types of Area Charts
@@ -532,7 +528,6 @@ public class CountryRenewableElectricity
532528
}
533529
```
534530

535-
536531
<div class="divider--half"></div>
537532

538533
The following sections explain more advanced types of Blazor Area Charts that can be created using the [`IgbDataChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbDataChart.html) control instead of [`IgbCategoryChart`](https://www.infragistics.com/blazor/docs/api/api/IgniteUI.Blazor.Controls.IgbCategoryChart.html) control with simplified API.
@@ -681,7 +676,6 @@ public class TemperatureRangeData
681676
}
682677
```
683678

684-
685679
<div class="divider--half"></div>
686680

687681
## Blazor Stacked Area Chart
@@ -862,7 +856,6 @@ public class ContinentsBirthRate
862856
}
863857
```
864858

865-
866859
<div class="divider--half"></div>
867860

868861
## Blazor Stacked 100% Area Chart
@@ -1040,7 +1033,6 @@ public class ContinentsBirthRate
10401033
}
10411034
```
10421035

1043-
10441036
<div class="divider--half"></div>
10451037

10461038
## Blazor Stacked Spline Area Chart
@@ -1221,7 +1213,6 @@ public class ContinentsBirthRate
12211213
}
12221214
```
12231215

1224-
12251216
<div class="divider--half"></div>
12261217

12271218
## Blazor Stacked 100% Spline Area Chart
@@ -1398,7 +1389,6 @@ public class ContinentsBirthRate
13981389
}
13991390
```
14001391

1401-
14021392
<div class="divider--half"></div>
14031393

14041394
## Blazor Radial Area Chart
@@ -1547,7 +1537,6 @@ public class FootballPlayerStats
15471537
}
15481538
```
15491539

1550-
15511540
<div class="divider--half"></div>
15521541

15531542
## Blazor Polar Area Chart
@@ -1701,7 +1690,6 @@ public class BoatSailingData
17011690
}
17021691
```
17031692

1704-
17051693
<div class="divider--half"></div>
17061694

17071695
## Blazor Polar Spline Area Chart
@@ -1838,7 +1826,6 @@ public class BoatSailingData
18381826
}
18391827
```
18401828

1841-
18421829
<div class="divider--half"></div>
18431830

18441831
## Additional Resources

0 commit comments

Comments
 (0)