Skip to content
This repository was archived by the owner on Jun 8, 2026. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
b674fae
docs(jp): sync getting-started CLI and Schematics with AI config updates
github-actions[bot] Apr 23, 2026
aad1b8c
docs(getting-started-cli/jp): complete Japanese translation of MCP se…
jsakamotoIGJP Apr 26, 2026
e907c4a
Adding changes from build igniteui-xplat-docs-to-angular-docs-JP+KR_2…
Apr 29, 2026
b74eaba
Merge branch 'vnext' into jp-sync/update-getting-started-cli-ai-confi…
ChronosSF Apr 30, 2026
2f63b63
Merge branch 'vnext' into jp-sync/update-getting-started-cli-ai-confi…
ChronosSF Apr 30, 2026
9f5f052
docs(jp/button): sync styling text fixes from EN
github-actions[bot] May 11, 2026
b30bc29
Change the expression in button.md to natural Japanese
mkamiishi May 12, 2026
0277440
Adding changes from build igniteui-xplat-docs-to-angular-docs-JP+KR_2…
May 13, 2026
5b3d61a
Adding changes from build igniteui-xplat-docs-to-angular-docs-EN_2026…
May 18, 2026
0b2788c
Merge pull request #6497 from IgniteUI/ESShared/XPlaform_en_igniteui-…
ChronosSF May 18, 2026
a4def9c
Merge branch 'vnext' into ESShared/XPlaform_jp_igniteui-xplat-docs-to…
ChronosSF May 18, 2026
dfac4ff
Merge pull request #6480 from IgniteUI/ESShared/XPlaform_jp_igniteui-…
ChronosSF May 18, 2026
bab9525
Merge pull request #6491 from IgniteUI/ESShared/XPlaform_kr_igniteui-…
ChronosSF May 18, 2026
506ef96
Merge pull request #6476 from IgniteUI/jp-sync/update-getting-started…
ChronosSF May 18, 2026
2e401f0
Merge pull request #6487 from IgniteUI/jp-sync/button-styling-text-c7…
ChronosSF May 18, 2026
cfef387
Merge branch 'master' into vnext
kdinev May 18, 2026
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
51 changes: 35 additions & 16 deletions en/components/ai/ai-assisted-development-overview.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: AI-Assisted Development with Ignite UI - Ignite UI for Angular
_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.
_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@latest ai-config. Grounds GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains AI Assistant in correct Ignite UI APIs.
_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP server, Ignite UI Theming MCP, Agent Skills, AI, agent, Copilot, Cursor, Claude Code, ai-config
_language: en
_license: MIT
Expand All @@ -14,7 +14,7 @@ mentionedTypes: []

# AI-Assisted Development with Ignite UI

Ignite UI for Angular 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`
Ignite UI for Angular 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-cli`) 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`

The MCP servers and Agent Skills serve different purposes and have different prerequisites:

Expand All @@ -39,25 +39,25 @@ npx igniteui-cli ai-config
> [!IMPORTANT]
> 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.

If `ai-config` cannot detect the framework from your project files, it prompts you to select one - so the command works even from a project where no Ignite UI package is installed yet.

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.

### What to Expect

If Ignite UI is **not** installed in the project:

```
Ignite UI MCP servers configured in .vscode/mcp.json
No AI skill files found. Make sure packages are installed (npm install) and your Ignite UI packages are up-to-date.
```
> [!NOTE]
> Ignite UI MCP servers configured for your selected clients
> No AI skill files found. Make sure packages are installed (`npm install`) and your Ignite UI packages are up-to-date.

The MCP servers are ready to use. Skills will be added automatically the next time you run `ai-config` after installing Ignite UI.

If Ignite UI **is** installed in the project:

```
Ignite UI MCP servers configured in .vscode/mcp.json
Agent Skills copied to .claude/skills/
```
> [!NOTE]
> Ignite UI MCP servers configured for your selected clients
> Agent Skills copied to your selected agents' skills directories

Both the MCP servers and Skills are configured.

Expand Down Expand Up @@ -92,7 +92,7 @@ npm install igniteui-angular
npx igniteui-cli@latest ai-config
```

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)
The command detects that Skills are now available and copies them. The MCP configuration files for your selected clients are left unchanged (already up-to-date).

## The AI Toolchain at a Glance

Expand All @@ -118,13 +118,13 @@ For full setup instructions and IDE wiring, see [Agent Skills](skills.md).

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.

The CLI MCP server is configured via `npx` without a global install:
The CLI MCP server runs via `npx` without a global install:

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

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.
Use `ai-config` to write the MCP configuration for your AI client automatically. 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 [CLI MCP](cli-mcp.md) for the full setup guide.

It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.

Expand Down Expand Up @@ -167,7 +167,7 @@ The `ai-config` command configures MCP servers, copies framework-specific skill
ng generate @igniteui/angular-schematics:ai-config
```

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

**Using the Ignite UI CLI:**

Expand All @@ -189,7 +189,11 @@ ig ai-config

### Step 1 - Load Agent Skills

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

See [Agent Skills](skills.md) for the complete setup.

Expand Down Expand Up @@ -229,6 +233,8 @@ For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Cla

Add the `igniteui-theming` entry to the same MCP configuration file, alongside `igniteui-cli`:

**VS Code (`.vscode/mcp.json`):**

```json
{
"servers": {
Expand All @@ -240,6 +246,19 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside `
}
```

**Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP clients:**

```json
{
"mcpServers": {
"igniteui-theming": {
"command": "npx",
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
}
}
}
```

For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).

## Additional Resources
Expand Down
14 changes: 7 additions & 7 deletions en/components/ai/cli-mcp.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ last_updated: "2026-04-24"

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](./theming-mcp.md). 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.

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.
The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. 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.

**Example prompts to try once connected:**

Expand Down Expand Up @@ -70,19 +70,19 @@ npx -y igniteui-cli mcp
You can start with Ignite UI CLI MCP in three ways:

> **Recommended - CLI first**
> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and writes `.vscode/mcp.json` for VS Code automatically. After that, you only need to review the generated MCP configuration and open the project in your AI client.
> Create the project with Ignite UI CLI first by using `ig new` or the matching `npx --package igniteui-cli igniteui new` command. This is the easiest setup because Ignite UI CLI scaffolds the project, installs the required packages, and prompts you to choose which AI clients to configure for MCP and which agents to set up skill files for. After that, you only need to review the generated configuration and open the project in your AI client.

> **Empty folder**
> 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.

> **Existing project**
> 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.
> 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 MCP configuration for your selected AI clients and copy the Agent Skills into your project. The command prompts you to choose which clients and agents to configure.

All three paths use the same MCP servers. The difference is only how the project is prepared before you start prompting:

- in the **CLI-first** path, Ignite UI CLI creates the project and prepares the first MCP configuration for you
- in the **empty-folder** path, you create the MCP configuration first and let the assistant create the project after that
- 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
- in the **existing-project** path, run `ig ai-config` to write MCP configuration for your selected clients and copy the Agent Skills automatically

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

Expand Down Expand Up @@ -346,7 +346,7 @@ The following setup scenarios show when to use each starting point.

### CLI-first setup

Create the project with Ignite UI CLI first when you want the fastest guided setup and want `.vscode/mcp.json` generated for you automatically.
Create the project with Ignite UI CLI first when you want the fastest guided setup. `ig new` prompts you to select which AI clients to configure for MCP and which agents to set up skill files for.

Example scenarios:

Expand Down Expand Up @@ -389,9 +389,9 @@ Reload the workspace, reopen the editor, or restart the AI client. Some clients

Verify that the configuration content matches the examples exactly, including key names and argument order.

**The project was created, but the MCP configuration is only available for VS Code**
**The project was created, but MCP is not configured for one of your AI clients**

Ignite UI CLI writes `.vscode/mcp.json` for the CLI-first path. If you are using Cursor, Claude Desktop, Claude Code, JetBrains, GitHub, or another MCP client, copy the same server entries into that client's configuration format and location.
`ig new` prompts you to select which clients to configure. If you skipped a client during project creation, run `ig ai-config` and select the missing clients when prompted.

**The assistant is working in the wrong folder or cannot find the project files**

Expand Down
26 changes: 13 additions & 13 deletions en/components/ai/maker-framework.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,23 @@ Switch Copilot Chat to Agent mode and confirm that `plan`, `execute`, and `plan_
### Claude Desktop

1. Open your Claude Desktop configuration file:
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
- macOS: `~/Library/Application Support/Claude/claude_desktop_config.json`
- Windows: `%APPDATA%\Claude\claude_desktop_config.json`
2. Add the `maker` entry to the `mcpServers` block:

```json
{
"mcpServers": {
"maker": {
"command": "npx",
"args": ["-y", "@igniteui/maker-mcp", "--stdio"],
"env": {
"Executor__AIProviderKeys__Anthropic": "<your-anthropic-key>"
}
}
```json
{
"mcpServers": {
"maker": {
"command": "npx",
"args": ["-y", "@igniteui/maker-mcp", "--stdio"],
"env": {
"Executor__AIProviderKeys__Anthropic": "<your-anthropic-key>"
}
}
```
}
}
```

3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection).

Expand Down
37 changes: 19 additions & 18 deletions en/components/ai/skills.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ Use one of the options below to download and place the skill files into the appr

### **Option A - Use the Ignite UI CLI**

The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below.
The `ai-config` command configures MCP servers, copies framework-specific skill files into each agent's skills directory, and sets up instruction files - all in a single step. Use `--assistants` to choose which coding assistants receive MCP config and `--agents` to choose which agents receive skill files. Existing files are only updated if their content has changed. If no parameters are provided, the command enters interactive mode, prompting you to select assistants and agents. For available options, refer to the table below.

```bash
ig ai-config --assistants generic --agents claude
Expand All @@ -144,23 +144,8 @@ ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents

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

### **Option B - Use the `GitHub CLI`**

The GitHub CLI can be used to download skill files directly from the Ignite UI for Angular repository. Run the following commands in your project root to start the installation process:

```bash
gh skill install IgniteUI/igniteui-angular
```

You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents.

To update skills later, run the following command:

```bash
gh skill update IgniteUI/igniteui-angular
```

If Ignite UI for Angular is already installed in your project, the skill files are available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run:
> [!NOTE]
> If you installed Ignite UI for Angular manually and want to copy skills without running `ai-config`, the skill files are also available under `node_modules`. To copy them into your project (e.g. into `.agents/skills/`), run:

**macOS / Linux / Windows (PowerShell)**

Expand Down Expand Up @@ -194,6 +179,22 @@ robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\s
robocopy node_modules\igniteui-angular\skills\igniteui-angular-generate-from-image-design .agents\skills\igniteui-angular-generate-from-image-design /E
```

### **Option B - Use the `GitHub CLI`**

The GitHub CLI can be used to download skill files directly from the Ignite UI for Angular repository. Run the following commands in your project root to start the installation process:

```bash
gh skill install IgniteUI/igniteui-angular
```

You will be asked to select which skills to install and the target Agents for the skill files in your project. The CLI will then download and place the selected skill according to the chosen Agents.

To update skills later, run the following command:

```bash
gh skill update IgniteUI/igniteui-angular
```

### **Option C - Use the `gemini skills` CLI**

The `gemini skills install` command installs skills directly from a Git repository. It supports two scopes:
Expand Down
Loading
Loading