diff --git a/DOCFX-SYNC.md b/DOCFX-SYNC.md index 496fb9e2cd..b2d3980c0e 100644 --- a/DOCFX-SYNC.md +++ b/DOCFX-SYNC.md @@ -169,6 +169,11 @@ After fixing, verify that new `` additions don't conflict with the skil | File | Purpose | |---|---| -| `scripts/check-mdx-quality.mjs` | Post-sync validation script | +| `scripts/check-mdx-quality.mjs` | Post-sync validation — detects raw API links, .md extensions, lost ``/``, callouts, schema comments, unclosed `
`, markdown images | +| `scripts/merge-vnext-updates.mjs` | 3-way body-only merge of docfx vnext updates into local .mdx files; update `LAST_SYNC` after each sync | +| `scripts/reimport-body.mjs` | Re-merge upstream body for files where initial "keep ours" resolution discarded substantive text; applies MDX transforms to resolved content | +| `scripts/convert-callouts.mjs` | Convert `>[!NOTE/TIP/...]` callouts to `` and remove `` comments in-place | +| `scripts/convert-img-tags.mjs` | Convert `` tags to `` components from `astro:assets` | +| `scripts/migrate-vnext-new-files.mjs` | Apply full DocFX → MDX migration to newly-imported pages (frontmatter cleanup, callouts, code-view, images) | | `DOCFX-SYNC.md` | This guide | | `.github/skills/docfx-sync/SKILL.md` | AI agent skill for performing syncs | diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx index f78a818a52..301a2a0ef0 100644 --- a/docs/angular/src/content/en/components/action-strip.mdx +++ b/docs/angular/src/content/en/components/action-strip.mdx @@ -79,6 +79,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; export class HomeComponent {} ``` + This component uses Material Icons. Add the following link to your `index.html`: `` diff --git a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx index 1a94990a22..0aebf5c910 100644 --- a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx +++ b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx @@ -1,17 +1,18 @@ --- 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 license: MIT canonicalLink: "/components/ai-assisted-development-overview" mentionedTypes: [] +last_updated: "2026-05-03" --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; # 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: @@ -40,25 +41,27 @@ Without a version pin, `npx` may pull an older CLI version that does not recogni +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. -``` + +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/ -``` + +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. @@ -93,7 +96,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 @@ -119,13 +122,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. @@ -168,7 +171,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:** @@ -198,7 +201,11 @@ The command requires Ignite UI packages to be installed in your project (`npm in ### 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. @@ -238,6 +245,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": { @@ -249,6 +258,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 diff --git a/docs/angular/src/content/en/components/ai/cli-mcp.mdx b/docs/angular/src/content/en/components/ai/cli-mcp.mdx index 670b33c4cf..ffbaf143bf 100644 --- a/docs/angular/src/content/en/components/ai/cli-mcp.mdx +++ b/docs/angular/src/content/en/components/ai/cli-mcp.mdx @@ -5,7 +5,7 @@ keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignit license: MIT canonicalLink: "/components/ai/cli-mcp" mentionedTypes: [] - +last_updated: "2026-04-24" --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; @@ -20,7 +20,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' 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:** @@ -72,19 +72,19 @@ The `-y` flag tells `npx` to auto-confirm the package download prompt so the ser 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. @@ -364,7 +364,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: @@ -407,9 +407,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** diff --git a/docs/angular/src/content/en/components/ai/maker-framework.mdx b/docs/angular/src/content/en/components/ai/maker-framework.mdx index 0851382c8e..27ed2e93dc 100644 --- a/docs/angular/src/content/en/components/ai/maker-framework.mdx +++ b/docs/angular/src/content/en/components/ai/maker-framework.mdx @@ -64,23 +64,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/docs/angular/src/content/en/components/ai/skills.mdx b/docs/angular/src/content/en/components/ai/skills.mdx index cdd73cd7c8..60a9ae3398 100644 --- a/docs/angular/src/content/en/components/ai/skills.mdx +++ b/docs/angular/src/content/en/components/ai/skills.mdx @@ -1,7 +1,8 @@ --- -title: Ignite UI for Angular Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics +title: Agent Skills | AI Skills | AI-Assisted Development | Ignite UI for Angular | Infragistics description: Learn how to use Agent Skills to supercharge AI-assisted development with Ignite UI for Angular components, grids, data operations, and theming. -keywords: ignite ui for angular, copilot skills, ai assisted development, github copilot, cursor, windsurf, claude, jetbrains ai +keywords: Ignite UI for Angular, agent skills, ai assisted development, github copilot, cursor, windsurf, claude, gemini cli, junie +last_updated: "2026-04-24" --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; @@ -20,9 +21,10 @@ The skill files live in the [`skills/`](https://github.com/IgniteUI/igniteui-ang | Skill | Path | Description | |:------|:-----|:------------| -| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL) | Standalone components, form controls, overlays, layout | -| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | -| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL) | Palettes, typography, elevations, component themes, MCP server | +| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout | +| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data | +| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server | +| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular apps from screenshots, mockups, and wireframes using Ignite UI components | Starting with Ignite UI for Angular **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically. @@ -45,6 +47,8 @@ The `.agents/skills/` directory is a cross-agent convention supported by multipl SKILL.md igniteui-angular-theming/ SKILL.md + igniteui-angular-generate-from-image-design/ + SKILL.md ``` For user-level (global) skills available across all projects, use `~/.agents/skills/` instead. @@ -115,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 @@ -140,23 +144,9 @@ 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 (components, grids, theming) 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: + +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)** @@ -178,6 +168,7 @@ Or copy individual skill directories as needed: cp -r node_modules/igniteui-angular/skills/igniteui-angular-components .agents/skills/ cp -r node_modules/igniteui-angular/skills/igniteui-angular-grids .agents/skills/ cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skills/ +cp -r node_modules/igniteui-angular/skills/igniteui-angular-generate-from-image-design .agents/skills/ ``` **Windows (Command Prompt)** @@ -186,6 +177,23 @@ cp -r node_modules/igniteui-angular/skills/igniteui-angular-theming .agents/skil robocopy node_modules\igniteui-angular\skills\igniteui-angular-components .agents\skills\igniteui-angular-components /E robocopy node_modules\igniteui-angular\skills\igniteui-angular-grids .agents\skills\igniteui-angular-grids /E robocopy node_modules\igniteui-angular\skills\igniteui-angular-theming .agents\skills\igniteui-angular-theming /E +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** @@ -201,6 +209,7 @@ The `gemini skills install` command installs skills directly from a Git reposito gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design ``` **Install to workspace scope:** @@ -209,6 +218,7 @@ gemini skills install https://github.com/IgniteUI/igniteui-angular.git --path sk gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-components gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-grids gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-theming +gemini skills install --scope workspace https://github.com/IgniteUI/igniteui-angular.git --path skills/igniteui-angular-generate-from-image-design ``` Once installed, the skill files are available in the respective location and will be automatically discovered by compatible AI assistants. @@ -235,7 +245,7 @@ Once complete, the skills are ready to use - no manual file copying required. ## Theming MCP Server -The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. +The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file](https://github.com/IgniteUI/igniteui-angular/blob/master/skills/igniteui-angular-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs. For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](/ai/theming-mcp) documentation. @@ -245,9 +255,9 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](/a - Getting Started with Ignite UI for Angular - Angular Schematics & Ignite UI CLI -- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview) -- [Ignite UI CLI MCP](./cli-mcp) -- [Ignite UI Theming MCP](./theming-mcp) +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [Ignite UI Theming MCP](./theming-mcp.md)
Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx index 67130fc3d9..208fa6d590 100644 --- a/docs/angular/src/content/en/components/ai/theming-mcp.mdx +++ b/docs/angular/src/content/en/components/ai/theming-mcp.mdx @@ -1,7 +1,7 @@ --- -title: Ignite UI Theming MCP | Ignite UI for Angular -description: Ignite UI for Angular ships with the Ignite UI Theming MCP server that allows you to create custom themes, palettes, typography, and elevations for your Angular applications. Learn how to use the MCP server to generate and apply custom themes that match your brand and design requirements. -keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations +title: Angular Theming MCP | Infragistics +description: Use the Ignite UI Theming MCP server to generate Ignite UI for Angular palettes, themes, typography, and design token overrides through your AI assistant. +keywords: Ignite UI for Angular controls, Angular widgets, web widgets, UI widgets, Components Suite, Artificial Intelligence, AI, MCP, Model Context Protocol, Theming, Custom Themes, Palettes, Typography, Elevations --- import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; @@ -16,7 +16,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' The Ignite UI Theming MCP server gives AI assistants the knowledge and tools to produce accurate theming code, including palettes with proper shade generation, typography, elevations, component design token overrides, and more. -The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on Angular, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool reads your `package.json` and selects the correct import paths and selectors automatically. +The server supports all four Ignite UI design systems (**Material**, **Bootstrap**, **Fluent**, and **Indigo**) in both light and dark variants. While this guide focuses on Angular, the MCP server also works with all Ignite UI component libraries from Infragistics. The `detect_platform` tool identifies the project framework and selects the correct import paths and selectors automatically. For Blazor projects, which have no `package.json`, it returns `generic` - tell the AI explicitly: _"Use the Blazor platform."_ Most tools can produce either **Sass** or **CSS** output. Sass output is the default and integrates with the `igniteui-theming` Sass module. CSS output generates ready-to-use CSS custom properties and can be used **without a local Sass toolchain** - the server compiles it for you. @@ -48,7 +48,7 @@ npm install igniteui-theming ## Setup -The MCP server is bundled with the `igniteui-theming` package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. +The MCP server is bundled with the `igniteui-theming` npm package and launched via `npx`. No separate installation is needed beyond having an Ignite UI package already in your project. The canonical launch command is: @@ -247,7 +247,7 @@ Here is a brief overview of each tool: | Tool | Description | |------|-------------| -| `detect_platform` | Reads `package.json` and identifies whether the project uses Ignite UI for Angular, Web Components, React, or Blazor. Selects the correct import paths and component selectors for all subsequent tools. | +| `detect_platform` | Identifies the project framework and selects the correct import paths and selectors. For Angular, React, and Web Components projects, reads `package.json`. For Blazor projects, which do not have a `package.json`, returns `generic` - tell the AI explicitly: _"Use the Blazor platform."_ | | `create_palette` | Generates a color palette with automatic shade variants (50-900, A100-A700) from your base brand colors. Accepts an `output` parameter (`sass` or `css`) and a `designSystem` to select the schema. | | `create_custom_palette` | Fine-grained palette creation. Specify exact hex values for every shade when automatic generation is not suitable. | | `create_typography` | Sets up a font family and type scale for a given design system. | @@ -325,7 +325,9 @@ The AI will call `set_spacing` scoped to the calendar component and `set_size` a **Platform not detected** -If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`) as a dependency. You can also tell the AI explicitly: _"Use the Angular platform."_ +If `detect_platform` returns `null` or `generic`, make sure your `package.json` lists an Ignite UI package (e.g., `igniteui-angular`) as a dependency. + +You can also tell the AI explicitly: _"Use the Angular platform."_ **Luminance warning on colors** @@ -347,10 +349,10 @@ Also confirm that `core()` is called before any other theming mixin in your `sty ## Additional Resources -- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview) -- [Ignite UI for Angular Skills](./skills) -- [Ignite UI CLI MCP](./cli-mcp) -- [MAKER Framework](./maker-framework) +- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md) +- [Ignite UI for Angular Skills](./skills.md) +- [Ignite UI CLI MCP](./cli-mcp.md) +- [MAKER Framework](./maker-framework.md) {/* Ideally these should be included once documentation is combined - [Theming Overview](../themes/index) diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx index bdd9309f82..2b32771277 100644 --- a/docs/angular/src/content/en/components/avatar.mdx +++ b/docs/angular/src/content/en/components/avatar.mdx @@ -127,6 +127,7 @@ To get an avatar that displays an image, all you have to do is set the image sou ``` + If all went well, you should see something like the following in the browser: diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx index 39dac7c2ae..3819369c8b 100644 --- a/docs/angular/src/content/en/components/banner.mdx +++ b/docs/angular/src/content/en/components/banner.mdx @@ -72,6 +72,11 @@ import { IGX_BANNER_DIRECTIVES } from 'igniteui-angular/banner'; export class HomeComponent {} ``` + + +This component uses Material Icons. Add the following link to your `index.html`: `` + + Now that you have the Ignite UI for Angular Banner module or directives imported, you can start with a basic configuration of the `igx-banner` component. ## Using the Angular Banner Component diff --git a/docs/angular/src/content/en/components/button-group.mdx b/docs/angular/src/content/en/components/button-group.mdx index 210d0f8838..bf9064b5dc 100644 --- a/docs/angular/src/content/en/components/button-group.mdx +++ b/docs/angular/src/content/en/components/button-group.mdx @@ -84,6 +84,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; export class HomeComponent {} ``` + This component uses Material Icons. Add the following link to your `index.html`: `` diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx index 6dc8167e35..64e72a5144 100644 --- a/docs/angular/src/content/en/components/button.mdx +++ b/docs/angular/src/content/en/components/button.mdx @@ -114,6 +114,11 @@ As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` di ``` + + +This component uses Material Icons. Add the following link to your `index.html`: `` + + ### Floating Action Button @@ -743,7 +748,7 @@ Or you can use the universal `--ig-button-size` variable to target all instances ```html
- +
``` diff --git a/docs/angular/src/content/en/components/card.mdx b/docs/angular/src/content/en/components/card.mdx index 457a390a6c..17afb841d4 100644 --- a/docs/angular/src/content/en/components/card.mdx +++ b/docs/angular/src/content/en/components/card.mdx @@ -107,6 +107,7 @@ import { IGX_CARD_DIRECTIVES } from 'igniteui-angular/card'; export class HomeComponent {} ``` + This component uses Material Icons. Add the following link to your `index.html`: `` diff --git a/docs/angular/src/content/en/components/carousel.mdx b/docs/angular/src/content/en/components/carousel.mdx index 10aced7d75..f3d9b76f05 100644 --- a/docs/angular/src/content/en/components/carousel.mdx +++ b/docs/angular/src/content/en/components/carousel.mdx @@ -57,6 +57,7 @@ import { IgxCarouselModule } from 'igniteui-angular/carousel'; export class AppModule {} ``` + Alternatively, as of `16.0.0` you can import the `IgxCarouselComponent` as a standalone dependency, or use the [`IGX_CAROUSEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/carousel/src/carousel/public_api.ts) token to import the component and all of its supporting components and directives. ```typescript diff --git a/docs/angular/src/content/en/components/chat.mdx b/docs/angular/src/content/en/components/chat.mdx index af77e4bc7d..a262c55c69 100644 --- a/docs/angular/src/content/en/components/chat.mdx +++ b/docs/angular/src/content/en/components/chat.mdx @@ -400,6 +400,37 @@ We highly recommend using the standard Web Component styling approaches before r - `` elements – For larger stylesheets, inject them inside the Shadow DOM. - Inline `