Skip to content

Commit e5daf0d

Browse files
ChronosSFChronosSF
authored
Merge branch 'vnext' into ESShared/XPlaform_jp_igniteui-xplat-docs-to-angular-docs-JP+KR_2026.4.15.1
2 parents 585483d + 6aa9c74 commit e5daf0d

61 files changed

Lines changed: 354 additions & 112 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎en/components/action-strip.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
7777
export class HomeComponent {}
7878
```
7979

80+
> [!NOTE]
81+
> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
82+
8083
Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the `igx-action-strip` component.
8184

8285
## Using the Angular Action Strip Component

‎en/components/ai/ai-assisted-development-overview.md‎

Lines changed: 135 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,143 @@ namespace: Infragistics.Controls
99
mentionedTypes: []
1010
---
1111

12-
<!-- schema: Article -->
12+
# AI-Assisted Development with Ignite UI
1313

14-
<!-- cspell:words igniteui mcpservers npx theming -->
14+
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.
1515

16-
## Related Topics
16+
The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skills layers - Blazor coverage is provided by the Theming MCP only. 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.
1717

18-
- [Agent Skills](skills.md) - Full setup guide for loading and wiring Skill packages in VS Code, Cursor, Windsurf, and JetBrains
19-
- [CLI MCP](cli-mcp.md) - Full setup guide for Ignite UI CLI MCP, including recommended CLI-first setup and client-specific configuration
18+
## The AI Toolchain at a Glance
2019

21-
<!---->
20+
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.
2221

23-
- [Theming MCP](theming-mcp.md) - Theming MCP server setup and theming workflow examples
22+
| Layer | What it provides | Owner | Frameworks |
23+
| --------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------- |
24+
| Agent Skills | Developer-owned instruction packages: import paths, component patterns, decision flows, project conventions | Developer | Angular, React, Web Components, Blazor |
25+
| CLI MCP server (`igniteui-cli`) | Project scaffolding, component management, documentation and API queries via MCP | Infragistics | Angular, React, Web Components |
26+
| Theming MCP server (`igniteui-theming`) | Design tokens, palette definitions, CSS variable generation, theming queries via MCP | Infragistics | Angular, React, Web Components, Blazor |
27+
28+
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.
29+
30+
## Agent Skills
31+
32+
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.
33+
34+
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.
35+
36+
For full setup instructions and IDE wiring, see [Agent Skills](skills.md).
37+
38+
## CLI MCP Server
39+
40+
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, 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.
41+
42+
The CLI MCP server starts via `npx` without a global install:
43+
44+
```bash
45+
npx -y igniteui-cli mcp
46+
```
47+
48+
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.
49+
50+
The CLI MCP server does not support Blazor. It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.
51+
52+
## Theming MCP Server
53+
54+
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.
55+
56+
The Theming MCP server starts via `npx`:
57+
58+
```bash
59+
npx -y igniteui-theming igniteui-theming-mcp
60+
```
61+
62+
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.
63+
64+
For configuration details, see [Theming MCP](theming-mcp.md).
65+
66+
## Supported AI Clients
67+
68+
The CLI MCP server and Theming MCP server work with any editor or AI client that supports MCP with STDIO transport.
69+
70+
| Client | Configuration method |
71+
| --------------------------- | ----------------------------------------------------------------- |
72+
| VS Code with GitHub Copilot | `.vscode/mcp.json` |
73+
| Cursor | `.cursor/mcp.json` |
74+
| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` |
75+
| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` |
76+
| Claude Code | `.mcp.json` or the Claude Code MCP CLI command |
77+
| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)** |
78+
79+
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.
80+
81+
## Set Up the AI Toolchain
82+
83+
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.
84+
85+
### Step 1 - Load Agent Skills
86+
87+
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.
88+
89+
See [Agent Skills](skills.md) for the complete setup.
90+
91+
### Step 2 - Connect the CLI MCP Server
92+
93+
Add the `igniteui-cli` MCP server entry to the configuration file for your AI client. Use the JSON structure that matches your client:
94+
95+
**VS Code (`.vscode/mcp.json`):**
96+
97+
```json
98+
{
99+
"servers": {
100+
"igniteui-cli": {
101+
"command": "npx",
102+
"args": ["-y", "igniteui-cli", "mcp"]
103+
}
104+
}
105+
}
106+
```
107+
108+
**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:**
109+
110+
```json
111+
{
112+
"mcpServers": {
113+
"igniteui-cli": {
114+
"command": "npx",
115+
"args": ["-y", "igniteui-cli", "mcp"]
116+
}
117+
}
118+
}
119+
```
120+
121+
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).
122+
123+
### Step 3 - Connect the Theming MCP Server (optional)
124+
125+
Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`:
126+
127+
```json
128+
{
129+
"servers": {
130+
"igniteui-theming": {
131+
"command": "npx",
132+
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
133+
}
134+
}
135+
}
136+
```
137+
138+
For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).
139+
140+
## Additional Resources
141+
142+
- [Agent Skills](./skills.md)
143+
- [Ignite UI CLI MCP](./cli-mcp.md)
144+
- [Ignite UI Theming MCP](./theming-mcp.md)
145+
146+
<div class="divider--half"></div>
147+
148+
Our community is active and always welcoming to new ideas.
149+
150+
- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
151+
- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)

‎en/components/ai/cli-mcp.md‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
2-
title: "Angular Ignite UI CLI MCP | Infragistics"
3-
_description: "Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Angular. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients."
4-
_keywords: "Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains"
2+
title: Angular Ignite UI CLI MCP | Infragistics
3+
_description: Connect Ignite UI CLI MCP to your AI client to scaffold projects, modify existing apps, create and update components, and ask documentation questions for Ignite UI for Angular. Learn the setup options for VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients.
4+
_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, agent, GitHub Copilot, Cursor, Claude, JetBrains
55
_language: en
66
_license: MIT
77
_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp"
@@ -89,19 +89,19 @@ If you are creating a project with Ignite UI CLI first, you can run the CLI in e
8989

9090
- **Global install**
9191

92-
```bash
93-
npm install -g igniteui-cli
94-
```
92+
```bash
93+
npm install -g igniteui-cli
94+
```
9595

96-
This gives you the `ig` command in any terminal session and is the clearest option if you plan to create and scaffold projects regularly.
96+
This gives you the `ig` command in any terminal session and is the clearest option if you plan to create and scaffold projects regularly.
9797

9898
- **Without a global install**
9999

100-
```bash
101-
npx --package igniteui-cli igniteui new
102-
```
100+
```bash
101+
npx --package igniteui-cli igniteui new
102+
```
103103

104-
This runs the CLI through `npx` instead of a global `ig` command.
104+
This runs the CLI through `npx` instead of a global `ig` command.
105105

106106
For the **CLI-first** path, you can create the project in guided mode or with a direct command.
107107

@@ -247,20 +247,20 @@ JetBrains AI Assistant supports MCP servers through the IDE settings:
247247

248248
4. Enter the following configuration:
249249

250-
```json
251-
{
252-
"mcpServers": {
253-
"igniteui-cli": {
254-
"command": "npx",
255-
"args": ["-y", "igniteui-cli", "mcp"]
256-
},
257-
"igniteui-theming": {
258-
"command": "npx",
259-
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
260-
}
261-
}
262-
}
263-
```
250+
```json
251+
{
252+
"mcpServers": {
253+
"igniteui-cli": {
254+
"command": "npx",
255+
"args": ["-y", "igniteui-cli", "mcp"]
256+
},
257+
"igniteui-theming": {
258+
"command": "npx",
259+
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
260+
}
261+
}
262+
}
263+
```
264264

265265
5. Click **OK** and restart the AI Assistant.
266266

@@ -337,7 +337,7 @@ At a high level, the CLI MCP tools help with:
337337
- answering documentation and API questions
338338

339339
> [!NOTE]
340-
> Framework detection uses component prefixes: `` for Angular, `` for React, `` for Web Components, `` for Blazor. The assistant picks up the right framework automatically from your open files or prompt context.
340+
> Framework detection uses component prefixes: `for Angular`, `for React`, `for Web Components`, `for Blazor`. The assistant picks up the right framework automatically from your open files or prompt context.
341341
342342
The theming server adds styling, theme, palette, and token workflows to the same client session.
343343

@@ -409,9 +409,6 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
409409
## Additional Resources
410410

411411
- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
412-
413-
<!---->
414-
415412
- [Ignite UI for Angular Skills](./skills.md)
416413
- [Ignite UI Theming MCP](./theming-mcp.md)
417414

‎en/components/ai/skills.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,12 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./
205205
- <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started">Getting Started with Ignite UI for Angular</a>
206206
- <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview">Angular Schematics & Ignite UI CLI</a>
207207

208+
<!---->
209+
210+
- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
211+
- [Ignite UI CLI MCP](./cli-mcp.md)
212+
- [Ignite UI Theming MCP](./theming-mcp.md)
213+
208214
<div class="divider--half"></div>
209215
Our community is active and always welcoming to new ideas.
210216

‎en/components/ai/theming-mcp.md‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -162,16 +162,16 @@ JetBrains AI Assistant supports MCP servers through the IDE settings:
162162

163163
4. Enter the following configuration:
164164

165-
```json
166-
{
167-
"mcpServers": {
168-
"igniteui-theming": {
169-
"command": "npx",
170-
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
171-
}
172-
}
173-
}
174-
```
165+
```json
166+
{
167+
"mcpServers": {
168+
"igniteui-theming": {
169+
"command": "npx",
170+
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
171+
}
172+
}
173+
}
174+
```
175175

176176
5. Click **OK** and restart the AI Assistant.
177177

@@ -276,7 +276,7 @@ The AI will call `create_theme` and return a ready-to-use `styles.scss` file. Th
276276

277277
```scss
278278
/* styles.scss */
279-
@use 'igniteui-angular/theming' as *;
279+
@use "igniteui-angular/theming" as *;
280280

281281
$my-palette: palette(
282282
$primary: #2563eb,
@@ -286,7 +286,7 @@ $my-palette: palette(
286286
);
287287

288288
$my-typography: typography(
289-
$font-family: 'Roboto, sans-serif',
289+
$font-family: "Roboto, sans-serif",
290290
);
291291

292292
@include core();
@@ -342,7 +342,9 @@ Also confirm that `core()` is called before any other theming mixin in your `sty
342342

343343
## Additional Resources
344344

345+
- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
345346
- [Ignite UI for Angular Skills](./skills.md)
347+
- [Ignite UI CLI MCP](./cli-mcp.md)
346348

347349
<!-- Ideally these should be included once documentation is combined
348350
- [Theming Overview](../themes/index.md)

‎en/components/avatar.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,9 @@ Analogically, the avatar can display an icon via the [`icon`]({environment:angul
142142
</igx-avatar>
143143
```
144144

145+
> [!NOTE]
146+
> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
147+
145148
You should see something like this:
146149

147150
<div class="sample-container loading" style="height:100px">

‎en/components/badge.md‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge';
6464
export class HomeComponent {}
6565
```
6666

67+
> [!NOTE]
68+
> This component uses Material Icons. Add the following link to your `index.html`: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
69+
6770
Now that you have the Ignite UI for Angular Badge module or component imported, you can start with a basic configuration of the `igx-badge` component.
6871

6972
## Using the Angular Badge Component
@@ -137,6 +140,39 @@ igx-badge {
137140
}
138141
```
139142

143+
### Badge Value and Icon
144+
145+
Use the `[value]` input to display text or a numeric count inside the badge:
146+
147+
```html
148+
<igx-badge [value]="model.value"></igx-badge>
149+
```
150+
151+
Use the `[icon]` input to display an icon inside the badge:
152+
153+
```html
154+
<igx-badge icon="check" type="success"></igx-badge>
155+
```
156+
157+
When both `[icon]` and `[value]` are set, the badge displays both simultaneously:
158+
159+
```html
160+
<!-- Both the icon "check" and the value "5" will be shown -->
161+
<igx-badge icon="check" value="5" type="success"></igx-badge>
162+
```
163+
164+
Or you can project content directly:
165+
166+
```html
167+
<igx-badge>{{ model.value }}</igx-badge>
168+
169+
<!-- When projecting both icon and text, wrap the text to keep correct padding. -->
170+
<igx-badge>
171+
<igx-icon>bluetooth</igx-icon>
172+
<span>Bluetooth</span>
173+
</igx-badge>
174+
```
175+
140176
### Badge Icon
141177

142178
In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it:
@@ -194,7 +230,7 @@ export class AppModule {}
194230
```
195231

196232
>[!NOTE]
197-
>The [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied.
233+
>The [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) has [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon), [`value`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#value), and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) inputs to configure the badge look. You can set the icon by providing its name from the official [material icons set](https://material.io/icons/). The badge type can be set to either [`default`]({environment:angularApiUrl}/enums/type.html#default), [`info`]({environment:angularApiUrl}/enums/type.html#info), [`success`]({environment:angularApiUrl}/enums/type.html#success), [`warning`]({environment:angularApiUrl}/enums/type.html#warning), or [`error`]({environment:angularApiUrl}/enums/type.html#error). Depending on the type, a specific background color is applied.
198234
199235
In our sample, [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) and [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) are bound to model properties named _icon_ and _type_.
200236

0 commit comments

Comments
 (0)