diff --git a/en/components/ai/maker-framework.md b/en/components/ai/maker-framework.md index 58f03a3e50..daa66a10d9 100644 --- a/en/components/ai/maker-framework.md +++ b/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": "" - } - } - } -} -``` + ```json + { + "mcpServers": { + "maker": { + "command": "npx", + "args": ["-y", "@igniteui/maker-mcp", "--stdio"], + "env": { + "Executor__AIProviderKeys__Anthropic": "" + } + } + } + } + ``` 3. Restart Claude Desktop. The first start downloads the native binary (~30 s on a typical connection). diff --git a/en/components/general-cli-overview.md b/en/components/general-cli-overview.md index cac256e7f7..803c45ddf9 100644 --- a/en/components/general-cli-overview.md +++ b/en/components/general-cli-overview.md @@ -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 | diff --git a/en/components/general/cli/getting-started-with-angular-schematics.md b/en/components/general/cli/getting-started-with-angular-schematics.md index b6ca650b3b..eaa4039244 100644 --- a/en/components/general/cli/getting-started-with-angular-schematics.md +++ b/en/components/general/cli/getting-started-with-angular-schematics.md @@ -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: @@ -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). \ No newline at end of file diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index 168f794e0f..4e95ac11da 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -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 --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`. @@ -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 @@ -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. | diff --git a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md index 18814a22cd..b90109c8b9 100644 --- a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md +++ b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md @@ -63,7 +63,7 @@ Two theme options are available: 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. Step by step prompt: finish or add a view @@ -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). diff --git a/en/components/general/cli/step-by-step-guide-using-cli.md b/en/components/general/cli/step-by-step-guide-using-cli.md index 782e91b7fd..86ba7f4981 100644 --- a/en/components/general/cli/step-by-step-guide-using-cli.md +++ b/en/components/general/cli/step-by-step-guide-using-cli.md @@ -51,7 +51,7 @@ The next step is to choose a theme for your application. Selecting the default o ![Step by step new project theme selection](../../../images/general/ig-step-by-step-new-project-theme.png) -After completing the above steps, the application structure is generated, a Git repository is initialized, and the project is committed. You will then be asked whether to complete the process or add a new view to your application: +After completing the above steps, the application structure is generated. The wizard then prompts you to [configure AI coding assistants](#configure-ai-assistants). Once AI configuration is complete, a Git repository is initialized, the project is committed, and you are asked whether to complete the process or add a new view to your application: ![Step by step new project action prompt](../../../images/general/ig-step-by-step-new-project-action.png) @@ -82,3 +82,43 @@ To add more Ignite UI for Angular views to a project later without the wizard, u ```bash ig add [template] [name] ``` + +## Configure AI assistants + +After choosing your framework, project type, template, and theme, the wizard prompts you to configure AI coding assistant integration. This step runs the same logic as `ig 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 AI config coding assistants prompt](../../../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 AI config agents prompt](../../../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. + +> [!NOTE] +> To skip AI configuration prompts entirely during non-interactive project creation, pass `--assistants none --agents none` to `ig new`. To re-run AI configuration later, use `ig ai-config` from the project root. diff --git a/en/images/general/ig-step-by-step-ai-config-agents.png b/en/images/general/ig-step-by-step-ai-config-agents.png new file mode 100644 index 0000000000..0da02cc710 Binary files /dev/null and b/en/images/general/ig-step-by-step-ai-config-agents.png differ diff --git a/en/images/general/ig-step-by-step-ai-config-assistants.png b/en/images/general/ig-step-by-step-ai-config-assistants.png new file mode 100644 index 0000000000..2b4300b667 Binary files /dev/null and b/en/images/general/ig-step-by-step-ai-config-assistants.png differ