Skip to content
This repository was archived by the owner on May 19, 2026. It is now read-only.

Mstoyanova/ai config update #6499

Merged
kdinev merged 9 commits into from
May 19, 2026
Merged

Mstoyanova/ai config update #6499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c42000a
Enhance AI assistant integration documentation and commands in CLI gu…
Marina-L-Stoyanova May 18, 2026
2577de5
Merge branch 'vnext' into mstoyanova/ai-config-update
georgianastasov May 18, 2026
dbb5759
Merge branch 'vnext' into mstoyanova/ai-config-update
georgianastasov May 18, 2026
c2819fd
Refine CLI documentation standardize dashes
georgianastasov May 18, 2026
8cf77eb
Update CLI guides to include AI assistant configuration steps and add…
Marina-L-Stoyanova May 19, 2026
2b88b54
Merge branch 'mstoyanova/ai-config-update' of https://github.com/Igni…
Marina-L-Stoyanova May 19, 2026
b1de4f0
Update step-by-step-guide-using-angular-schematics.md
Marina-L-Stoyanova May 19, 2026
0337e3b
Format JSON code block for Claude Desktop configuration in the MAKER …
Marina-L-Stoyanova May 19, 2026
0eeb591
Merge branch 'mstoyanova/ai-config-update' of https://github.com/Igni…
Marina-L-Stoyanova May 19, 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
30 changes: 15 additions & 15 deletions en/components/ai/maker-framework.md
View file
Open in desktop
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
1 change: 1 addition & 0 deletions en/components/general-cli-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,4 +73,5 @@ A full list of the available Ignite UI CLI commands and their usage (like passin
| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term |
| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. |
| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. |
| [ig ai-config](https://github.com/IgniteUI/igniteui-cli/wiki/ai-config) | | Sets up AI coding assistant integration — configures MCP servers, copies skill files, and populates instruction files. |
| ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing |
123 changes: 120 additions & 3 deletions en/components/general/cli/getting-started-with-angular-schematics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,13 +180,130 @@ ng g @igniteui/angular-schematics:start

## AI Assistant Integration

The Ignite UI for Angular Schematics collection includes an `ai-config` schematic that configures Ignite UI for Angular Agent Skills and the Ignite UI MCP servers for your project in a single step. Run it from your project root after installing Ignite UI for Angular packages:
The Ignite UI for Angular Schematics collection includes an `ai-config` schematic that sets up AI coding assistant integration for your project. In a single command, it:

- **Configures MCP servers** - writes the MCP config file for your chosen coding assistant with the Ignite UI and Angular CLI MCP server entries
- **Copies skill files** - adds Angular-specific skill guides into your agent directories
- **Sets up instruction files** - populates each agent's instruction file with project-specific guidance

Run it from your project root after installing Ignite UI for Angular packages:

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

This copies Ignite UI for Angular Agent Skills into `.claude/skills/` and writes three MCP server entries to `.vscode/mcp.json`: `@angular/cli`, `igniteui mcp`, and `igniteui-theming-mcp`. If the files already exist and are up-to-date, the command is a no-op.
### Flags Reference

| Flag | Values | Default |
|------|--------|---------|
| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively; `generic` in non-interactive mode |
| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively; `generic` + `claude` in non-interactive mode |

### Supported Coding Assistants

| Coding Assistant | Choice value | Config Path | Root Key |
|-----------------|--------------|-------------|----------|
| Generic (Claude Code, VS Code, and others) | `generic` | `.mcp.json` | `mcpServers` |
| VS Code (GitHub Copilot) | `vscode` | `.vscode/mcp.json` | `servers` |
| Cursor | `cursor` | `.cursor/mcp.json` | `mcpServers` |
| Gemini | `gemini` | `.gemini/settings.json` | `mcpServers` |
| JetBrains Junie | `junie` | `.junie/mcp/mcp.json` | `mcpServers` |

### Supported AI Agents

| Agent | Skills Directory | Instruction File |
|-------|------------------|------------------|
| Generic | `.agents/skills` | `AGENTS.md` |
| Claude | `.claude/skills` | `.claude/CLAUDE.md` |
| Copilot | `.github/skills` | `.github/copilot-instructions.md` |
| Cursor | `.cursor/skills` | `.cursor/rules/cursor.mdc` |
| Codex | `.codex/skills` | `.codex/instructions.md` |
| Windsurf | `.windsurf/skills` | `.windsurf/rules/guidelines.md` |
| Gemini | `.gemini/skills` | `.gemini/GEMINI.md` |
| Junie | `.junie/skills` | `.junie/guidelines.md` |

### Usage Examples

Interactive - prompts for coding assistants, then agents:

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

Non-interactive - specify both assistants and agents:

```bash
ng generate @igniteui/angular-schematics:ai-config --assistants cursor --agents claude copilot
```

Skip MCP configuration only:

```bash
ng generate @igniteui/angular-schematics:ai-config --assistants none --agents claude generic
```

Skip skill files and instructions only (MCP servers are still configured):

```bash
ng generate @igniteui/angular-schematics:ai-config --assistants vscode --agents none
```

The schematic also runs automatically as part of `ng add igniteui-angular` with defaults: agents `["claude", "generic"]`, assistants `["generic"]`.

### MCP Server Configuration

The schematic writes (or merges into) the config file for your chosen coding assistant. Existing third-party MCP server entries are always preserved - the command merges, never overwrites. When run via the Angular schematic, an additional `angular-cli` MCP server entry is included automatically alongside the Ignite UI servers.

**Generic, Cursor, Gemini, and Junie** (`.mcp.json` and equivalents, root key `mcpServers`):

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

**VS Code / GitHub Copilot** (`.vscode/mcp.json`, root key `servers`):

```json
{
"servers": {
"angular-cli": {
"command": "npx",
"args": ["-y", "@angular/cli", "mcp"]
},
"igniteui-cli": {
"command": "npx",
"args": ["-y", "igniteui-cli", "mcp"]
},
"igniteui-theming": {
"command": "npx",
"args": ["-y", "igniteui-theming", "igniteui-theming-mcp"]
}
}
}
```

### Skill Files

Skill files are Angular-specific guides copied into each agent's skills directory. They are sourced from your installed Ignite UI package and kept in sync each time you run the schematic - existing files are only updated if their content has changed.

> [!NOTE]
> If you run `ai-config` before installing packages (e.g. with `--skip-install`), the schematic falls back to built-in templates. Re-run the command after installing to pick up the skill files from your installed version.

### Using the Ignite UI CLI Instead

If you have the Ignite UI CLI installed globally, the equivalent command is:

Expand All @@ -195,6 +312,6 @@ ig ai-config
```

> [!NOTE]
> The `ig ai-config` command configures only the two Ignite UI entries, `igniteui mcp` and `igniteui-theming-mcp`, and does not register `@angular/cli`. Use `ng generate @igniteui/angular-schematics:ai-config` to get all three servers configured in a single step.
> The `ig ai-config` command configures only the two Ignite UI entries, `igniteui-cli` and `igniteui-theming`, and does not register `angular-cli`. Use `ng generate @igniteui/angular-schematics:ai-config` to get all three servers configured in a single step.

For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp.md).
44 changes: 41 additions & 3 deletions en/components/general/cli/getting-started-with-cli.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,9 +69,27 @@ For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Us
To create an Angular project non-interactively, provide `angular` as the framework and `igx-ts` as the project type:

```cmd
ig new <project-name> --framework=angular --type=igx-ts --template=side-nav
ig new my-app --framework=angular --type=igx-ts --template=side-nav
```

You can also specify AI assistant and agent configuration during project creation:

```cmd
ig new my-app --framework=angular --type=igx-ts --template=side-nav --assistants generic --agents claude copilot
```

To skip AI configuration entirely:

```cmd
ig new my-app --framework=angular --type=igx-ts --assistants none --agents none
```

**Sequence during `ig new`:**
1. Project files are generated
2. AI configuration runs inside the new project directory (prompts for assistants and agents unless flags are provided)
3. Git is initialized (unless `--skip-git`)
4. Dependencies are installed (unless `--skip-install`)

> [!NOTE]
> As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project with standalone components by default. To use NgModule-based bootstrapping instead, set `--type=igx-ts-legacy`.

Expand Down Expand Up @@ -209,10 +227,30 @@ ig start

The Ignite UI CLI includes a built-in MCP (Model Context Protocol) server that connects AI coding assistants - GitHub Copilot, Claude, Cursor - to live Ignite UI component documentation and API references. Once configured, your AI assistant can query component APIs, retrieve setup guides, and generate accurate Ignite UI for Angular code without switching context.

If your project was created with `ig new`, the VS Code MCP configuration is already generated in `.vscode/mcp.json` during scaffolding, and the Ignite UI for Angular Agent Skills are copied to `.claude/skills/`. If you are working with an existing project that is missing either or both of these, run `ig ai-config` from the project root to set up both the MCP configuration and the skills in one step.
If your project was created with `ig new`, the MCP configuration and Agent Skills are already generated during scaffolding. If you are working with an existing project, run `ig ai-config` from the project root to set up MCP servers, skill files, and instruction files in one step:

```cmd
ig ai-config
```

The command supports multiple coding assistants and AI agents:

```cmd
ig ai-config --assistants generic vscode --agents claude copilot
```

| Flag | Values | Default |
|------|--------|---------|
| `--assistants` | `generic`, `vscode`, `cursor`, `gemini`, `junie`, `none` | Prompted interactively; `generic` in non-interactive mode |
| `--agents` | `generic`, `claude`, `copilot`, `cursor`, `codex`, `windsurf`, `gemini`, `junie`, `none` | Prompted interactively; `generic` + `claude` in non-interactive mode |

When run without flags, `ig ai-config` enters interactive mode and prompts you to select coding assistants and agents using SPACE to toggle and ENTER to confirm. The prompts mirror the wizard steps during `ig new`:

1. **Choose coding assistants** - select one or more targets for MCP server configuration (Generic, VS Code, Cursor, Gemini, Junie), or None to skip.
2. **Choose AI agents** - select one or more agents for skill files and instruction files (Generic, Claude, Copilot, Cursor, Codex, Windsurf, Gemini, Junie), or None to skip.

Defaults in interactive mode are **Generic** for assistants and **Generic + Claude** for agents. For details on the wizard prompts, see [Step-by-Step Guide Using Ignite UI CLI - Configure AI assistants](step-by-step-guide-using-cli.md#configure-ai-assistants).

If you want to configure your AI client manually, or use a client other than VS Code, start the MCP server directly:

```cmd
Expand All @@ -237,4 +275,4 @@ A complete list of available Ignite UI CLI commands is maintained on the [Ignite
| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. |
| ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. |
| ig mcp | | Starts the Ignite UI MCP server, providing component documentation search and API reference tools to connected AI assistants. See [Ignite UI CLI MCP](../../ai/cli-mcp.md). |
| ig ai-config | | Sets up AI integration for an existing project by copying Ignite UI for Angular Agent Skills into `.claude/skills/` and writing the Ignite UI MCP server configuration to `.vscode/mcp.json`. |
| ig ai-config | | Sets up AI coding assistant integration - configures MCP servers, copies skill files, and populates instruction files for your chosen assistants and agents. |
42 changes: 40 additions & 2 deletions en/components/general/cli/step-by-step-guide-using-angular-schematics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ Two theme options are available:

<img class="responsive-img" src="../../../images/general/ig-step-by-step-new-project-theme.png" alt="Step by step prompt: choose default or custom theme" />

After completing these four steps, the wizard generates the project structure, initializes a Git repository, and commits the initial state. It then asks whether to finish or continue by adding a component view.
After completing these four steps, the wizard generates the project structure, then prompts you to [configure AI coding assistants](#ai-assistant-integration). Once AI configuration is complete, a Git repository is initialized and the initial state is committed. The wizard then asks whether to finish or continue by adding a component view.

<img class="responsive-img" src="../../../images/general/ig-step-by-step-new-project-action.png" alt="Step by step prompt: finish or add a view" />

Expand Down Expand Up @@ -99,6 +99,44 @@ ng g @igniteui/angular-schematics:c [template] [name]

## AI Assistant Integration

The Ignite UI CLI - which shares the same scaffolding toolchain as these Schematics - includes a built-in MCP server that connects AI coding assistants to live Ignite UI component documentation. If your workflow uses the Ignite UI CLI alongside the Angular CLI, start the server with `ig mcp` after installing the CLI globally.
After choosing your bootstrapping type, project name, template, and theme, the wizard prompts you to configure AI coding assistant integration. This step runs the same logic as `ng generate @igniteui/angular-schematics:ai-config` but is embedded in the project creation flow.

### Choose coding assistants

You will be prompted to select which coding assistants to configure MCP servers for. Use the SPACE key to toggle selections and ENTER to confirm:

![Step by step prompt: choose coding assistants for MCP configuration](../../../images/general/ig-step-by-step-ai-config-assistants.png)

- **Generic** (Claude Code, VS Code, and others) - writes `.mcp.json`
- **VS Code** (GitHub Copilot) - writes `.vscode/mcp.json`
- **Cursor** - writes `.cursor/mcp.json`
- **Gemini** - writes `.gemini/settings.json`
- **JetBrains Junie** - writes `.junie/mcp/mcp.json`
- **None** - skips MCP configuration

The default selection is **Generic**. Selecting **None** skips MCP server configuration entirely.

### Choose AI agents

Next, you will be prompted to select which AI agents to configure skill files and instructions for:

![Step by step prompt: choose AI agents for skill files and instructions](../../../images/general/ig-step-by-step-ai-config-agents.png)

- **Generic** - `.agents/skills/` and `AGENTS.md`
- **Claude** - `.claude/skills/` and `.claude/CLAUDE.md`
- **Copilot** - `.github/skills/` and `.github/copilot-instructions.md`
- **Cursor** - `.cursor/skills/` and `.cursor/rules/cursor.mdc`
- **Codex** - `.codex/skills/` and `.codex/instructions.md`
- **Windsurf** - `.windsurf/skills/` and `.windsurf/rules/guidelines.md`
- **Gemini** - `.gemini/skills/` and `.gemini/GEMINI.md`
- **Junie** - `.junie/skills/` and `.junie/guidelines.md`
- **None** - skips skill files and instructions

The default selections are **Generic** and **Claude**. Selecting **None** skips agent configuration entirely.

When run via the Angular schematic, an additional `angular-cli` MCP server entry is included automatically alongside the Ignite UI servers.

> [!NOTE]
> To skip AI configuration prompts entirely during non-interactive project creation, pass `--assistants none --agents none` to `ng new`. To re-run AI configuration later, use `ng generate @igniteui/angular-schematics:ai-config` from the project root.

For MCP client configuration and a full description of available tools, see [Ignite UI CLI MCP](../../ai/cli-mcp.md).
Loading
Loading