Skip to content

Commit 895a450

Browse files
azure-pipelines[bot]tfsbuildChronosSFCopilot
authored
Changes from igniteui-xplat-docs-to-angular-docs-EN for en (#6477)
* Adding changes from build igniteui-xplat-docs-to-angular-docs-EN_2026.4.23.1 * chore(*): adding "agentic" to allowed words * fix(*): adding maker framework to toc Co-authored-by: Copilot <copilot@github.com> * chore(*): fixing linting errors --------- Co-authored-by: tfsbuild <tfsbuild@infragistics.com> Co-authored-by: Stamen Stoychev <SStoychev@infragistics.com> Co-authored-by: Copilot <copilot@github.com>
1 parent 92fcc6d commit 895a450

93 files changed

Lines changed: 330 additions & 337 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.

‎cspell.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,7 @@
262262
"alldata",
263263
"subtag",
264264
"junie",
265-
"xplat"
265+
"xplat",
266+
"agentic"
266267
]
267268
}

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

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Prot
55
_language: en
66
_license: MIT
77
_canonicalLink: "{environment:dvUrl}/components/ai-assisted-development-overview"
8+
last_updated: "2026-04-21"
89
namespace: Infragistics.Controls
910
mentionedTypes: []
1011
---
1112

13+
<!-- schema: Article, HowTo -->
14+
1215
# AI-Assisted Development with Ignite UI
1316

1417
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.
@@ -19,11 +22,11 @@ The AI toolchain does not currently support Blazor in the CLI MCP and Agent Skil
1922

2023
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.
2124

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

2831
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.
2932

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

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

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)** |
73+
| Client | Configuration method |
74+
| --------------------------- | ----------------------------------------------------------------- |
75+
| VS Code with GitHub Copilot | `.vscode/mcp.json` |
76+
| Cursor | `.cursor/mcp.json` |
77+
| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` |
78+
| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` |
79+
| Claude Code | `.mcp.json` or the Claude Code MCP CLI command |
80+
| JetBrains AI Assistant | **Tools → AI Assistant → Model Context Protocol (MCP)*- |
7881

7982
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.
8083

8184
## Set Up the AI Toolchain
8285

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.
86+
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.
87+
88+
### Quick Setup
89+
90+
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.
91+
92+
**Using Angular Schematics:**
93+
94+
```bash
95+
ng generate @igniteui/angular-schematics:ai-config
96+
```
97+
98+
This also registers the `@angular/cli` MCP server in `.vscode/mcp.json` alongside the Ignite UI servers.
99+
100+
**Using the Ignite UI CLI:**
101+
102+
```bash
103+
npx igniteui-cli ai-config
104+
```
105+
106+
If you have the Ignite UI CLI installed globally, use the shorter form:
107+
108+
```bash
109+
ig ai-config
110+
```
111+
112+
> [!NOTE]
113+
> 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.
114+
115+
> [!NOTE]
116+
> 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.
84117
85118
### Step 1 - Load Agent Skills
86119

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

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@ _license: MIT
77
_canonicalLink: "{environment:dvUrl}/components/ai/cli-mcp"
88
namespace: Infragistics.Controls
99
mentionedTypes: []
10+
last_updated: "2026-04-21"
1011
---
1112

13+
<!-- schema: Article, HowTo -->
14+
1215
# Ignite UI CLI MCP
1316

1417
<p class="highlight">The Ignite UI CLI MCP is a <a href="https://modelcontextprotocol.io/" target="_blank">Model Context Protocol</a> (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.</p>
@@ -19,8 +22,6 @@ mentionedTypes: []
1922

2023
Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside Ignite UI Theming MCP - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
2124

22-
The Ignite UI CLI MCP works alongside the Ignite UI Theming MCP. In practice, the CLI MCP handles project and component workflows, while the Theming MCP handles palettes, themes, tokens, and styling workflows. Most teams will want both servers connected.
23-
2425
The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and writes the initial MCP configuration for VS Code. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists.
2526

2627
**Example prompts to try once connected:**
@@ -75,13 +76,13 @@ You can start with Ignite UI CLI MCP in three ways:
7576
> Start with a completely empty folder, add the MCP configuration manually, and then ask the assistant to create the project through chat. This path is useful when you want MCP to drive the project creation flow from the beginning instead of running the CLI yourself first.
7677
7778
> **Existing project**
78-
> Add MCP configuration to a project you already have and continue working in the current codebase. This path is useful when the project already exists and you want the assistant to help with project changes, component work, and documentation questions without regenerating anything.
79+
> Add MCP configuration to a project you already have and continue working in the current codebase. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config` for Angular projects) to write `.vscode/mcp.json` and copy the Agent Skills into your project automatically. For other AI clients, copy the server entries from the client-specific sections below.
7980
8081
All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting:
8182

8283
- in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you
8384
- in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that
84-
- in the **existing-project** path, you attach MCP to the current codebase and continue from what is already there
85+
- in the **existing-project** path, run `ig ai-config` to write `.vscode/mcp.json` and copy the Agent Skills automatically, or add the configuration manually for other clients
8586

8687
In all cases, once the MCP servers are connected and visible in your AI client, the assistant can keep working in the same session.
8788

@@ -135,7 +136,7 @@ For more details about project templates, CLI command options, and component sca
135136

136137
### VS Code
137138

138-
GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Create or edit `.vscode/mcp.json` in your project root:
139+
GitHub Copilot in VS Code supports MCP servers through a workspace-level configuration file. Run `ig ai-config` (or `ng generate @igniteui/angular-schematics:ai-config`) from your project root to generate this file automatically. To configure it manually, create or edit `.vscode/mcp.json` in your project root:
139140

140141
```json
141142
{
@@ -319,14 +320,14 @@ To get the live list with current parameters, ask:
319320
320321
Here is a brief overview of each tool:
321322
322-
| Tool | Description |
323-
|------|-------------|
323+
| Tool | Description |
324+
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
324325
| `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). |
325-
| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. |
326-
| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. |
327-
| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. |
328-
| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. |
329-
| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. |
326+
| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. |
327+
| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. |
328+
| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. |
329+
| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. |
330+
| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. |
330331
331332
At a high level, the CLI MCP tools help with:
332333
@@ -337,7 +338,7 @@ At a high level, the CLI MCP tools help with:
337338
- answering documentation and API questions
338339
339340
> [!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.
341+
> 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.
341342
342343
The theming server adds styling, theme, palette, and token workflows to the same client session.
343344

0 commit comments

Comments
 (0)