Merge branch 'vnext' into jp-sync/skills-generate-from-image-design-2026-05-15-88e841c1f9a93237

Author: kdinev

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

@@ -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
@@ -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:
 
@@ -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.
 
@@ -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
 
@@ -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.
 
@@ -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:**
 
@@ -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.
 
@@ -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": {
@@ -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

en/components/ai/cli-mcp.md

@@ -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:**
 
@@ -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.
 
@@ -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:
 
@@ -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**
 

en/components/ai/maker-framework.md

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

en/components/ai/skills.md

@@ -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
@@ -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)**
 
@@ -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: