From c5344389ee919a55b9bca319e731eef3449c999d Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Thu, 2 Apr 2026 14:32:38 +0300 Subject: [PATCH 01/28] docs(mcp): add MCP how to workflow guides --- .../how-to/general-how-to-mcp-overview.md | 110 ++++++++ .../general-how-to-start-mcp-cli-project.md | 256 ++++++++++++++++++ .../how-to/general-how-to-start-mcp.md | 165 +++++++++++ ...general-how-to-use-mcp-existing-project.md | 188 +++++++++++++ en/components/toc.yml | 12 + 5 files changed, 731 insertions(+) create mode 100644 en/components/general/how-to/general-how-to-mcp-overview.md create mode 100644 en/components/general/how-to/general-how-to-start-mcp-cli-project.md create mode 100644 en/components/general/how-to/general-how-to-start-mcp.md create mode 100644 en/components/general/how-to/general-how-to-use-mcp-existing-project.md diff --git a/en/components/general/how-to/general-how-to-mcp-overview.md b/en/components/general/how-to/general-how-to-mcp-overview.md new file mode 100644 index 0000000000..27f7c7824a --- /dev/null +++ b/en/components/general/how-to/general-how-to-mcp-overview.md @@ -0,0 +1,110 @@ +--- +title: Ignite UI MCP Overview | Ignite UI for Angular | Infragistics +_description: Learn what Ignite UI MCP is and choose the right Angular MCP workflow topic to start with. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, AI, Ignite UI CLI MCP, Ignite UI Theming MCP +--- + +# Ignite UI MCP Overview + +This topic is the quick entry point for Ignite UI MCP for Angular. + +Use it to understand what Ignite UI MCP is, how it fits into your editor or AI client, and which setup path to open next. + +## What Ignite UI MCP Is + +Ignite UI MCP is a set of MCP servers that make Ignite UI tools available to an AI assistant in a supported editor or chat experience. + +The main servers used in the current setup flows are: + +- `igniteui` for creating projects, modifying and editing existing projects, creating and changing components, and asking documentation questions +- `igniteui-theming` for theme and styling-related work + +Together, they help the assistant create a Angular project, continue setup work, support theming tasks, and answer product questions from chat. + +Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. + +The exact setup flow can vary a little depending on your editor and AI client. + +## Before You Start + +Before you configure Ignite UI MCP, make sure you have: + +- Node.js installed so `npx` is available +- a supported editor or AI client with MCP support +- internet access for package resolution when the MCP servers start + +Some workflows also assume you already have a Angular project or that you want to create one in a new empty folder. + +## How the MCP Setup Works + +The Ignite UI MCP servers are started through `npx`. + +In practice, the setup is always the same at a high level: + +- add MCP configuration for your AI client +- point that configuration to the Ignite UI MCP servers +- let the client load the servers and expose their tools +- continue in chat or agent mode + +The server entries use a command and arguments similar to these: + +- `igniteui`: `npx -y igniteui-cli@next mcp` +- `igniteui-theming`: `npx -y igniteui-theming igniteui-theming-mcp` + +The `-y` flag tells `npx` to auto-confirm the package download prompt so the servers can start without manual intervention. + +## Editors and AI Clients + +Ignite UI MCP is not limited to one editor or one chat provider. + +You can use it with different combinations of editors and AI clients, as long as they support MCP. + +Common examples include: + +- **VS Code with GitHub Copilot** using a workspace-level `.vscode/mcp.json` +- **Cursor** using `.cursor/mcp.json` +- **Claude Desktop** using the desktop client MCP configuration file +- **Claude Code** using `.mcp.json` or the `claude mcp` command +- **JetBrains IDEs with AI Assistant** using the IDE MCP settings +- **Other MCP clients** using the same command and arguments through STDIO configuration + +In practice, the main differences are usually: + +- where the MCP configuration is stored +- how the client shows the available MCP tools +- whether you continue in chat, agent mode, or another AI panel + +The Ignite UI MCP servers stay the same even when the editor or chat experience changes. + +Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use an external MCP configuration file and then work with the project you point them to. + +This overview keeps the client explanation short. The step-by-step topics below show the exact configuration locations and the exact JSON structure to use. + +## Available Starting Paths + +The current section includes three setup paths: + +- start from a completely empty folder and let MCP help create the Angular project +- create the Angular project with Ignite UI CLI first, then continue with MCP +- connect MCP to a Angular project that already exists and continue working in the current codebase + +The existing-project path can also be used when you want to ask documentation and API questions while working in the current app. + +Each topic repeats the essential setup details so it can be used on its own, even if you open it directly from search or navigation. + +## Open the Right Topic + +Use the short guide below to choose the best starting point: + +> **Start from an Empty Folder with MCP for Angular**: use this when you want MCP to help create the Angular project from the beginning. + +> **Create an Angular Project with Ignite UI CLI, then Continue with MCP**: use this when you want to create the Angular project first and use MCP after that. + +> **Use MCP in an Existing Angular Project**: use this when you already have an Angular project and want to connect MCP, continue working in the current codebase, and ask documentation or API questions. + +- [Start from an Empty Folder with MCP for Angular](general-how-to-start-mcp.md) + Use this when you want to begin with an empty workspace, add the MCP configuration for your AI client, and let the assistant help create the Angular project from the beginning. +- [Create a Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) + Use this when you want to create the Angular project with Ignite UI CLI first and continue with the generated MCP setup after that. +- [Use MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md) + Use this when you want to connect MCP to an existing Angular project, continue working in the current codebase, and ask documentation or API questions in chat. diff --git a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md new file mode 100644 index 0000000000..343ba7c0e0 --- /dev/null +++ b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md @@ -0,0 +1,256 @@ +--- +title: Create a Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics +_description: Learn how to create a new Angular project with Ignite UI CLI, review the generated MCP configuration, and continue with MCP tools in a supported AI client. +_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI Theming MCP, AI +--- + +# Create a Project with Ignite UI CLI, then Continue with MCP + +This guide shows a CLI-first flow for Angular. You create the Angular project with Ignite UI CLI first, then continue with MCP using a supported editor or AI client. + +Before you begin, make sure Node.js is installed, `npm` can run, and you have internet access for package resolution. + +Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. + +Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. + +## Step 1: Choose How to Run Ignite UI CLI + +### Option 1: Install globally + +Run: + +```cmd +npm install -g igniteui-cli +``` + +Use this when you want the `ig` command available globally. + +### Option 2: Run with `npx` + +If your setup supports it, you can run Ignite UI CLI without installing it globally by using `npx`. + +Guided example: + +```cmd +npx --package igniteui-cli igniteui new +``` + +Direct command example: + +```cmd +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +``` + +This topic uses the global `ig` command in the main examples below. If you prefer not to install the CLI globally, you can use the matching `npx` form instead when supported by your setup. + +## Step 2: Create a New Empty Folder + +Create a new empty folder for your Angular project. + +Open a terminal in that folder. + +## Step 3: Create the Project + +You can create the project in either of these ways. + +### Guided mode + +Run: + +```cmd +ig new +``` + +Use this when you want the CLI to guide you through the available options. + +Matching `npx` form: + +```cmd +npx --package igniteui-cli igniteui new +``` + +### Direct command + +Run a full command when you already know the project settings. + +Use this form: + +```cmd +ig new my-app --framework=angular --type=[project-type] --template=[template] +``` + +Examples: + +```cmd +ig new my-app --framework=angular --type=igx-ts --template=base +ig new my-app --framework=angular --type=igx-ts --template=empty +ig new my-app --framework=angular --type=igx-ts --template=side-nav +ig new my-app --framework=angular --type=igx-ts --template=side-nav-auth +``` + +Matching `npx` examples: + +```cmd +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=base +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=side-nav +npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=side-nav-auth +``` + +Common variants include: + +- `--framework=angular` +- `--template=base` for an project structure with routing +- `--template=empty` for an empty project structure with routing and home page +- `--template=side-nav` for a project with side navigation +- `--template=side-nav-auth` for a side navigation project with authentication +- `--type=igx-ts` for Angular projects that use standalone components by default +- `--type=igx-ts-legacy` for Angular projects that use module-based bootstrapping + +For more project templates and CLI command details, see the [Ignite UI CLI](../../general-cli-overview.md) topic. + +## Step 4: Complete the Guided CLI Setup + +This step applies only if you used the guided `ig new` flow. + +Complete the prompts in the CLI. + +The exact prompts depend on the platform. + +Use the short flow below: + +- project name +- framework +- project type when applicable +- template +- theme when offered +- add a component or view, or complete the setup +- install and run option when offered + +After the last prompt, the CLI creates the project and installs everything needed to run it. + +## Step 5: Review the MCP Configuration + +After the project is created, review the MCP configuration for your AI client. + +If you are using VS Code, open `.vscode/mcp.json`. + +If you are using another AI client, add the equivalent MCP configuration in that client's location: + +- **Cursor**: `.cursor/mcp.json` +- **Claude Desktop**: + **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` + **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` +- **Claude Code**: `.mcp.json` +- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** +- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration + +Make sure the configuration contains the required Ignite UI MCP servers. + +### VS Code + +```json +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +- `igniteui` starts the Ignite UI CLI MCP server +- `igniteui-theming` starts the Ignite UI theming MCP server + +What you should see next: your AI client configuration contains the required Ignite UI MCP servers. + +## Step 6: Open the Project in Your Editor or AI Client + +If you are using an editor-based client, open the generated Angular project folder there. + +If you are using a desktop or chat-first client, make the generated Angular project available as the project context you want to work with. + +The client should detect the MCP configuration from the appropriate file or settings location. + +## Step 7: Confirm the MCP Servers and Tools Are Available + +Open chat, agent mode, or the MCP tools view in your AI client. + +Check the available tools. + +You should see the MCP servers and their tools, including: + +- `igniteui` +- `igniteui-theming` + +What you should see next: all MCP servers are available and there are no startup errors. + +Client-specific checks: + +- **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode +- **Cursor**: open a new chat session and check the available MCP tools +- **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area +- **Claude Code**: use the `/mcp` command to confirm the server is connected +- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** + +## Step 8: Start Prompting + +Once the tools are available, you can continue with prompts to build or refine the Angular application. + +## Troubleshooting + +**`ig` does not run** + +Make sure Ignite UI CLI is installed globally and available in the terminal. + +**The project is created but MCP tools do not appear** + +Reload the workspace, reopen the project, or restart the AI client. + +**One server does not start** + +Check that the MCP configuration content matches the example exactly. + +## Next Steps + +Now that the Angular project is created and the MCP tools are available, you can use chat to continue building on top of the existing app. + +Typical next actions include: + +- adding or changing pages and features +- updating theme and styling +- refining generated code +- asking for help with Angular components and configuration + +## Related Topics + +This guide covers the CLI-first flow for Angular. If you want the assistant to start from a completely empty folder and create the Angular project from the beginning through MCP, see the [Start from an Empty Folder with MCP](general-how-to-start-mcp.md) topic. + +If you already have an Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). + +If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). + +For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md new file mode 100644 index 0000000000..cb379d57e8 --- /dev/null +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -0,0 +1,165 @@ +--- +title: Start from an Empty Folder with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics +_description: Learn how to start from an empty folder, add the Ignite UI MCP configuration, verify the tools, and create a new Angular project through chat. +_keywords: Angular Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI +--- + +# Start from an Empty Folder with MCP + +This guide shows the cleanest MCP-first flow for Angular. You start from a completely empty folder, add the Ignite UI MCP configuration, and then continue in chat to create the Angular project from the beginning. + +The goal is simple: get the MCP servers running in a new workspace so the assistant can help you create and shape the Angular project through prompts. + +Before you begin, make sure Node.js is installed, `npx` can run, and you have internet access for package resolution. + +Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. + +Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. + +## Step 1: Create a New Empty Folder + +Create a new empty folder for your Angular project. + +If you are using an editor-based client, open that folder there. + +If you are using a desktop or chat-first client, keep the folder available as the project context you want to work with. + +## Step 2: Create the MCP Configuration File + +Create the MCP configuration file that matches your AI client. + +Use one of these locations: + +- **VS Code**: `.vscode/mcp.json` +- **Cursor**: `.cursor/mcp.json` +- **Claude Desktop**: + **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` + **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` +- **Claude Code**: `.mcp.json` +- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** +- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration + +For example, in VS Code your folder structure should look like this: + +```text +your-project/ + .vscode/ + mcp.json +``` + +What you should see next: the MCP configuration file is present in the correct location for your AI client. + +## Step 3: Add the MCP Configuration + +Add both Ignite UI MCP servers to that configuration. + +Use the JSON structure that matches your AI client. + +### VS Code + +```json +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +- `igniteui` starts the Ignite UI CLI MCP server +- `igniteui-theming` starts the Ignite UI theming MCP server + +## Step 4: Let the Workspace Load the MCP Servers + +After you save the MCP configuration, your editor or AI client may detect the MCP servers automatically. + +If the tools do not appear immediately, reload or reopen the workspace or restart the client. + +What you should see next: the client recognizes the MCP configuration and starts loading the available tools. + +## Step 5: Confirm the MCP Tools Are Available + +Open chat, agent mode, or the MCP tools view in your AI client. + +Check the available MCP tools. + +You should see the Ignite UI MCP servers and their tools, including: + +- `igniteui` +- `igniteui-theming` + +What you should see next: both MCP servers are available and there are no startup errors. + +Client-specific checks: + +- **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode +- **Cursor**: open a new chat session and check the available MCP tools +- **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area +- **Claude Code**: use the `/mcp` command to confirm the server is connected +- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** + +## Step 6: Start Prompting to Create the Angular Project + +Once the tools are available, continue in chat and ask the assistant to create the Angular project in the current folder. + +## Troubleshooting + +**`npx` does not work** + +Make sure Node.js is installed and available in the terminal. + +**The MCP tools do not appear** + +Reload the workspace, reopen the editor, or restart the AI client after creating the MCP configuration file. + +**One server does not start** + +Check that the MCP configuration content matches the example exactly. + +**The folder was not empty** + +This guide assumes a fresh workspace with no project files yet. + +## Next Steps + +Now that the MCP servers are available, you can use chat to create the Angular project and continue shaping it. + +Typical next actions include: + +- creating the initial application in the current folder +- choosing the Angular project structure through prompts +- applying theming changes +- continuing with component, layout, or setup tasks + +## Related Topics + +This guide covers the empty-folder MCP-first flow for Angular. If you prefer to create the Angular project with Ignite UI CLI first and continue with MCP after that, see the [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) topic. + +If you already have a Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). + +If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). + +For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). diff --git a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md new file mode 100644 index 0000000000..0520fa0064 --- /dev/null +++ b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md @@ -0,0 +1,188 @@ +--- +title: Use Ignite UI CLI MCP in an Existing Project | Ignite UI for Angular | Infragistics +_description: Learn how to add Ignite UI MCP to an existing Angular project, verify the tools, continue working in the current codebase, and use MCP to ask documentation and API questions. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI, documentation, API +--- + +# Use MCP in an Existing Project + +This guide shows how to connect Ignite UI MCP to a Angular project that already exists and continue working in the current codebase. + +It also shows how to use MCP in chat to ask documentation questions about Angular components, configuration, and available API members. + +Before you begin, make sure Node.js is installed, `npx` can run, and you have internet access for package resolution. + +Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. + +Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. + +## Step 1: Open the Existing Angular Project + +If you are using an editor-based client, open the existing Angular project there. + +If you are using a desktop or chat-first client, keep the existing Angular project available as the project context you want to work with. + +Make sure you are working in the project root. + +## Step 2: Create the MCP Configuration File + +Create the MCP configuration file that matches your AI client. + +Use one of these locations: + +- **VS Code**: `.vscode/mcp.json` +- **Cursor**: `.cursor/mcp.json` +- **Claude Desktop**: + **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` + **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` +- **Claude Code**: `.mcp.json` +- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** +- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration + +What you should see next: the MCP configuration file is present in the correct location for your AI client. + +## Step 3: Add the MCP Configuration + +Add both Ignite UI MCP servers to that configuration. + +Use the JSON structure that matches your AI client. + +### VS Code + +```json +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +- `igniteui` starts the Ignite UI CLI MCP server +- `igniteui-theming` starts the Ignite UI theming MCP server + +## Step 4: Let the MCP Servers Load + +After you save the MCP configuration, your editor or AI client may detect the MCP servers automatically. + +If the tools do not appear immediately, reload or reopen the workspace or restart the client. + +What you should see next: the workspace recognizes the MCP configuration and starts loading the available tools. + +## Step 5: Confirm the MCP Tools Are Available + +Open chat, agent mode, or the MCP tools view in your AI client. + +Check the available MCP tools. + +You should see the Ignite UI MCP servers and their tools, including: + +- `igniteui` +- `igniteui-theming` + +What you should see next: both MCP servers are available and there are no startup errors. + +Client-specific checks: + +- **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode +- **Cursor**: open a new chat session and check the available MCP tools +- **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area +- **Claude Code**: use the `/mcp` command to confirm the server is connected +- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** + +## Step 6: Continue Working in the Existing Angular Project + +Once the tools are available, continue in chat and ask the assistant to work with the current Angular project instead of creating a new one. + +Typical next actions include: + +- reviewing the existing project structure +- adding or changing pages and features +- updating theme and styling +- refining code in the current codebase + +## Step 7: Use MCP to Ask Documentation Questions + +You can also use chat to ask questions about Angular documentation while working in the existing project. + +The `igniteui` MCP server can help you continue working in the current codebase, make project and component changes, and ask documentation questions about Angular components, features, and API members. + +Typical documentation questions include: + +- which component fits a specific scenario +- how to configure a feature in a component +- which properties, events, or methods are available +- how a specific API member is used +- what examples or patterns are recommended for a component + +You can ask in plain language and continue the conversation based on the answers the assistant gives you. + +Example questions: + +> _"What properties does the grid support for filtering?"_ + +> _"What events does this component expose?"_ + +> _"Show me the available methods for this component."_ + +## Troubleshooting + +**`npx` does not work** + +Make sure Node.js is installed and available in the terminal. + +**The MCP tools do not appear** + +Reload the workspace, reopen the editor, or restart the AI client after creating the MCP configuration file. + +**One server does not start** + +Check that the MCP configuration content matches the example exactly. + +**The project is very large** + +Start with a narrow request so the assistant can inspect the relevant area of the codebase first. + +## Next Steps + +Now that MCP is connected to your existing Angular project, you can use chat to continue building, refactoring, and asking product questions without starting from scratch. + +Typical next actions include: + +- asking the assistant to inspect and explain the current codebase +- changing features in the existing app +- asking for component and API guidance from the documentation +- applying theming changes with the theming MCP server + +## Related Topics + +If you want to start from a completely empty folder instead, see [Start from an Empty Folder with MCP](general-how-to-start-mcp.md). + +If you want to create the Angular project with Ignite UI CLI first and continue after that, see [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md). + +If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). + +For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). diff --git a/en/components/toc.yml b/en/components/toc.yml index a4cd02f302..e1196469e7 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -61,6 +61,18 @@ - name: Use Standalone Components href: general/how-to/how-to-use-standalone-components.md updated: false + - name: Ignite UI MCP Overview + href: general/how-to/general-how-to-mcp-overview.md + new: true + - name: Start from an Empty Folder with MCP + href: general/how-to/general-how-to-start-mcp.md + new: true + - name: Create a Project with Ignite UI CLI, then Continue with MCP + href: general/how-to/general-how-to-start-mcp-cli-project.md + new: true + - name: Use MCP in an Existing Project + href: general/how-to/general-how-to-use-mcp-existing-project.md + new: true - name: Angular Schematics & Ignite UI CLI href: general/cli-overview.md sortable: false From d86555ab60ad7f64f9ba27f4ab6d7644f3ae8f83 Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Thu, 2 Apr 2026 14:37:07 +0300 Subject: [PATCH 02/28] docs(mcp): update MCP overview and guide names --- en/components/toc.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/toc.yml b/en/components/toc.yml index e1196469e7..914bc13bbd 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -61,7 +61,7 @@ - name: Use Standalone Components href: general/how-to/how-to-use-standalone-components.md updated: false - - name: Ignite UI MCP Overview + - name: Ignite UI CLI MCP Overview href: general/how-to/general-how-to-mcp-overview.md new: true - name: Start from an Empty Folder with MCP From 189aa79504ce59f263d6fb9f71729e402741a636 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Thu, 2 Apr 2026 14:46:23 +0300 Subject: [PATCH 03/28] Update en/components/general/how-to/general-how-to-start-mcp-cli-project.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../general/how-to/general-how-to-start-mcp-cli-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md index 343ba7c0e0..1b5a3f1669 100644 --- a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md +++ b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md @@ -101,7 +101,7 @@ npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts Common variants include: - `--framework=angular` -- `--template=base` for an project structure with routing +- `--template=base` for a project structure with routing - `--template=empty` for an empty project structure with routing and home page - `--template=side-nav` for a project with side navigation - `--template=side-nav-auth` for a side navigation project with authentication From ab345aa2ea181a9d2d1857ac32745dba91e90599 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Thu, 2 Apr 2026 14:47:12 +0300 Subject: [PATCH 04/28] Update en/components/general/how-to/general-how-to-start-mcp-cli-project.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../general/how-to/general-how-to-start-mcp-cli-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md index 1b5a3f1669..1e5dd1188d 100644 --- a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md +++ b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md @@ -108,7 +108,7 @@ Common variants include: - `--type=igx-ts` for Angular projects that use standalone components by default - `--type=igx-ts-legacy` for Angular projects that use module-based bootstrapping -For more project templates and CLI command details, see the [Ignite UI CLI](../../general-cli-overview.md) topic. +For more project templates and CLI command details, see the [Ignite UI CLI](../cli-overview.md) topic. ## Step 4: Complete the Guided CLI Setup From 64d5f66fe3ca1f4e2e34bfa3f83ec6d8769173df Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Thu, 2 Apr 2026 14:47:24 +0300 Subject: [PATCH 05/28] Update en/components/general/how-to/general-how-to-use-mcp-existing-project.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../general/how-to/general-how-to-use-mcp-existing-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md index 0520fa0064..729f2fcd64 100644 --- a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md +++ b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md @@ -6,7 +6,7 @@ _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Prot # Use MCP in an Existing Project -This guide shows how to connect Ignite UI MCP to a Angular project that already exists and continue working in the current codebase. +This guide shows how to connect Ignite UI MCP to an Angular project that already exists and continue working in the current codebase. It also shows how to use MCP in chat to ask documentation questions about Angular components, configuration, and available API members. From cfac45f0b7ce16fb9c7546966b47e64d62919ce1 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Thu, 2 Apr 2026 14:47:32 +0300 Subject: [PATCH 06/28] Update en/components/general/how-to/general-how-to-start-mcp.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- en/components/general/how-to/general-how-to-start-mcp.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md index cb379d57e8..ae60e0d04d 100644 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -158,7 +158,7 @@ Typical next actions include: This guide covers the empty-folder MCP-first flow for Angular. If you prefer to create the Angular project with Ignite UI CLI first and continue with MCP after that, see the [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) topic. -If you already have a Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). +If you already have an Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). From 11c33180f0920f18f33d77a4d0ef1c2af60e4ed4 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Thu, 2 Apr 2026 14:47:43 +0300 Subject: [PATCH 07/28] Update en/components/general/how-to/general-how-to-start-mcp.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- en/components/general/how-to/general-how-to-start-mcp.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md index ae60e0d04d..045d9d65b9 100644 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -1,7 +1,7 @@ --- title: Start from an Empty Folder with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics _description: Learn how to start from an empty folder, add the Ignite UI MCP configuration, verify the tools, and create a new Angular project through chat. -_keywords: Angular Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI --- # Start from an Empty Folder with MCP From 298cb79580b8f54dc4994f6f71f001f368636de9 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Thu, 2 Apr 2026 14:47:51 +0300 Subject: [PATCH 08/28] Update en/components/general/how-to/general-how-to-mcp-overview.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- en/components/general/how-to/general-how-to-mcp-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-mcp-overview.md b/en/components/general/how-to/general-how-to-mcp-overview.md index 27f7c7824a..bef75f0062 100644 --- a/en/components/general/how-to/general-how-to-mcp-overview.md +++ b/en/components/general/how-to/general-how-to-mcp-overview.md @@ -104,7 +104,7 @@ Use the short guide below to choose the best starting point: - [Start from an Empty Folder with MCP for Angular](general-how-to-start-mcp.md) Use this when you want to begin with an empty workspace, add the MCP configuration for your AI client, and let the assistant help create the Angular project from the beginning. -- [Create a Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) +- [Create an Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) Use this when you want to create the Angular project with Ignite UI CLI first and continue with the generated MCP setup after that. - [Use MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md) Use this when you want to connect MCP to an existing Angular project, continue working in the current codebase, and ask documentation or API questions in chat. From 69242210543192e56c75617f94f976f7c29e3402 Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Thu, 2 Apr 2026 14:53:32 +0300 Subject: [PATCH 09/28] docs(mcp): update section titles for clarity and fix minor typos --- .../general/how-to/general-how-to-mcp-overview.md | 10 +++++----- .../general/how-to/general-how-to-start-mcp.md | 2 +- .../how-to/general-how-to-use-mcp-existing-project.md | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/en/components/general/how-to/general-how-to-mcp-overview.md b/en/components/general/how-to/general-how-to-mcp-overview.md index 27f7c7824a..7decddd6d9 100644 --- a/en/components/general/how-to/general-how-to-mcp-overview.md +++ b/en/components/general/how-to/general-how-to-mcp-overview.md @@ -4,7 +4,7 @@ _description: Learn what Ignite UI MCP is and choose the right Angular MCP workf _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, AI, Ignite UI CLI MCP, Ignite UI Theming MCP --- -# Ignite UI MCP Overview +# Ignite UI CLI MCP Overview This topic is the quick entry point for Ignite UI MCP for Angular. @@ -19,7 +19,7 @@ The main servers used in the current setup flows are: - `igniteui` for creating projects, modifying and editing existing projects, creating and changing components, and asking documentation questions - `igniteui-theming` for theme and styling-related work -Together, they help the assistant create a Angular project, continue setup work, support theming tasks, and answer product questions from chat. +Together, they help the assistant create an Angular project, continue setup work, support theming tasks, and answer product questions from chat. Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. @@ -33,7 +33,7 @@ Before you configure Ignite UI MCP, make sure you have: - a supported editor or AI client with MCP support - internet access for package resolution when the MCP servers start -Some workflows also assume you already have a Angular project or that you want to create one in a new empty folder. +Some workflows also assume you already have an Angular project or that you want to create one in a new empty folder. ## How the MCP Setup Works @@ -86,7 +86,7 @@ The current section includes three setup paths: - start from a completely empty folder and let MCP help create the Angular project - create the Angular project with Ignite UI CLI first, then continue with MCP -- connect MCP to a Angular project that already exists and continue working in the current codebase +- connect MCP to an Angular project that already exists and continue working in the current codebase The existing-project path can also be used when you want to ask documentation and API questions while working in the current app. @@ -104,7 +104,7 @@ Use the short guide below to choose the best starting point: - [Start from an Empty Folder with MCP for Angular](general-how-to-start-mcp.md) Use this when you want to begin with an empty workspace, add the MCP configuration for your AI client, and let the assistant help create the Angular project from the beginning. -- [Create a Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) +- [Create an Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) Use this when you want to create the Angular project with Ignite UI CLI first and continue with the generated MCP setup after that. - [Use MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md) Use this when you want to connect MCP to an existing Angular project, continue working in the current codebase, and ask documentation or API questions in chat. diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md index cb379d57e8..ae60e0d04d 100644 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -158,7 +158,7 @@ Typical next actions include: This guide covers the empty-folder MCP-first flow for Angular. If you prefer to create the Angular project with Ignite UI CLI first and continue with MCP after that, see the [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) topic. -If you already have a Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). +If you already have an Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). diff --git a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md index 0520fa0064..729f2fcd64 100644 --- a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md +++ b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md @@ -6,7 +6,7 @@ _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Prot # Use MCP in an Existing Project -This guide shows how to connect Ignite UI MCP to a Angular project that already exists and continue working in the current codebase. +This guide shows how to connect Ignite UI MCP to an Angular project that already exists and continue working in the current codebase. It also shows how to use MCP in chat to ask documentation questions about Angular components, configuration, and available API members. From c0d20f909036f590178b791c39b34dd449721527 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 00:44:45 +0300 Subject: [PATCH 10/28] Revise Ignite UI MCP Overview content and metadata Updated the title, description, and keywords for the Ignite UI MCP overview. Revised content to clarify the roles of Ignite UI CLI MCP and Ignite UI Theming MCP, including setup instructions and supported clients. --- .../how-to/general-how-to-mcp-overview.md | 119 +++++++----------- 1 file changed, 44 insertions(+), 75 deletions(-) diff --git a/en/components/general/how-to/general-how-to-mcp-overview.md b/en/components/general/how-to/general-how-to-mcp-overview.md index 7decddd6d9..9ef2d33c05 100644 --- a/en/components/general/how-to/general-how-to-mcp-overview.md +++ b/en/components/general/how-to/general-how-to-mcp-overview.md @@ -1,110 +1,79 @@ --- -title: Ignite UI MCP Overview | Ignite UI for Angular | Infragistics -_description: Learn what Ignite UI MCP is and choose the right Angular MCP workflow topic to start with. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, AI, Ignite UI CLI MCP, Ignite UI Theming MCP +title: Ignite UI CLI MCP Overview | Ignite UI for Angular | Infragistics +_description: Ignite UI CLI MCP and Ignite UI Theming MCP expose Ignite UI for Angular tools to AI-assisted editors. Choose the right Angular setup path and get started. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI --- -# Ignite UI CLI MCP Overview -This topic is the quick entry point for Ignite UI MCP for Angular. +# Angular Ignite UI CLI MCP Overview -Use it to understand what Ignite UI MCP is, how it fits into your editor or AI client, and which setup path to open next. +Ignite UI CLI MCP and Ignite UI Theming MCP are two standalone Model Context Protocol servers that expose Ignite UI for Angular CLI and theming tools to AI-assisted editors and chat clients — including VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, and JetBrains IDEs with AI Assistant. The `igniteui-cli` server handles project creation, component management, and documentation questions. The `igniteui-theming` server handles theme and styling work. Both servers run via `npx` and connect to any supported client through STDIO transport. -## What Ignite UI MCP Is +Ignite UI CLI MCP and Ignite UI Theming MCP do not currently support Blazor — they cover Angular, React, and Web Components only. Neither server modifies project files autonomously; each server exposes tools to the active AI agent session in a supported client. MCP clients that use HTTP-based transport instead of STDIO are not supported by the current server configuration. -Ignite UI MCP is a set of MCP servers that make Ignite UI tools available to an AI assistant in a supported editor or chat experience. +## Prerequisites -The main servers used in the current setup flows are: +Before configuring Ignite UI CLI MCP and Ignite UI Theming MCP, make sure the following are in place: -- `igniteui` for creating projects, modifying and editing existing projects, creating and changing components, and asking documentation questions -- `igniteui-theming` for theme and styling-related work +- Node.js installed so `npx` is available in the terminal +- A supported editor or AI client: VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, or another MCP-compatible client with STDIO support +- Internet access for `npx` to download the MCP server packages on first run -Together, they help the assistant create an Angular project, continue setup work, support theming tasks, and answer product questions from chat. +## What Ignite UI CLI MCP and Ignite UI Theming MCP Provide -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. +Ignite UI CLI MCP and Ignite UI Theming MCP each expose a distinct set of tools to the AI client. -The exact setup flow can vary a little depending on your editor and AI client. +**Ignite UI CLI MCP** (`igniteui-cli`) handles project and component work: creating new Angular projects, adding and modifying Ignite UI for Angular components, updating existing project structure, and answering documentation and API questions about Angular components, properties, events, and methods. -## Before You Start - -Before you configure Ignite UI MCP, make sure you have: - -- Node.js installed so `npx` is available -- a supported editor or AI client with MCP support -- internet access for package resolution when the MCP servers start - -Some workflows also assume you already have an Angular project or that you want to create one in a new empty folder. +**Ignite UI Theming MCP** (`igniteui-theming`) handles theme and styling work: applying and modifying Ignite UI themes, generating CSS custom property overrides, and answering theming-related questions. ## How the MCP Setup Works -The Ignite UI MCP servers are started through `npx`. +The setup process is consistent across all supported clients and all three setup paths. -In practice, the setup is always the same at a high level: +Add the Ignite UI CLI MCP and Ignite UI Theming MCP server entries to the MCP configuration file for your AI client. The client reads that configuration, starts the servers through `npx`, and exposes their tools in chat or agent mode. From that point, prompts in the chat session can invoke the tools from either server directly. -- add MCP configuration for your AI client -- point that configuration to the Ignite UI MCP servers -- let the client load the servers and expose their tools -- continue in chat or agent mode +The server entries use these commands: -The server entries use a command and arguments similar to these: - -- `igniteui`: `npx -y igniteui-cli@next mcp` +- `igniteui-cli`: `npx -y igniteui-cli@next mcp` - `igniteui-theming`: `npx -y igniteui-theming igniteui-theming-mcp` -The `-y` flag tells `npx` to auto-confirm the package download prompt so the servers can start without manual intervention. - -## Editors and AI Clients - -Ignite UI MCP is not limited to one editor or one chat provider. - -You can use it with different combinations of editors and AI clients, as long as they support MCP. - -Common examples include: - -- **VS Code with GitHub Copilot** using a workspace-level `.vscode/mcp.json` -- **Cursor** using `.cursor/mcp.json` -- **Claude Desktop** using the desktop client MCP configuration file -- **Claude Code** using `.mcp.json` or the `claude mcp` command -- **JetBrains IDEs with AI Assistant** using the IDE MCP settings -- **Other MCP clients** using the same command and arguments through STDIO configuration - -In practice, the main differences are usually: - -- where the MCP configuration is stored -- how the client shows the available MCP tools -- whether you continue in chat, agent mode, or another AI panel +The `-y` flag tells `npx` to confirm the package download automatically so the servers start without manual intervention. The step-by-step topics below show the exact configuration file locations and JSON structure for each supported client. -The Ignite UI MCP servers stay the same even when the editor or chat experience changes. +## Supported Editors and AI Clients -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use an external MCP configuration file and then work with the project you point them to. +Ignite UI CLI MCP and Ignite UI Theming MCP work with any editor or AI client that supports MCP with STDIO transport. Supported clients include: -This overview keeps the client explanation short. The step-by-step topics below show the exact configuration locations and the exact JSON structure to use. +- **VS Code with GitHub Copilot** — workspace-level `.vscode/mcp.json` +- **Cursor** — `.cursor/mcp.json` +- **Claude Desktop** — macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` / Windows: `%APPDATA%\Claude\claude_desktop_config.json` +- **Claude Code** — `.mcp.json` or the `claude mcp` command +- **JetBrains IDEs with AI Assistant** — configured in **Tools → AI Assistant → Model Context Protocol (MCP)** +- **Other MCP clients** — use the same command and arguments through STDIO configuration -## Available Starting Paths +The main differences between clients are where the MCP configuration file is stored, how the client surfaces the available tools, and whether you continue in chat, agent mode, or another AI panel. The server commands and arguments are the same across all clients. -The current section includes three setup paths: +Editor-based clients open the Angular project folder directly and detect the MCP configuration from the workspace. Desktop and chat-first clients use an external configuration file and work with the project context provided in the session. -- start from a completely empty folder and let MCP help create the Angular project -- create the Angular project with Ignite UI CLI first, then continue with MCP -- connect MCP to an Angular project that already exists and continue working in the current codebase +## Available Setup Paths -The existing-project path can also be used when you want to ask documentation and API questions while working in the current app. +Three setup paths are available for Ignite UI CLI MCP with Angular: -Each topic repeats the essential setup details so it can be used on its own, even if you open it directly from search or navigation. +- **Start from an empty folder** — begin with an empty workspace, add the MCP configuration, and let the AI assistant create the Angular project from the beginning. Use this when there is no existing project. +- **Create the project with Ignite UI CLI, then continue with MCP** — create the Angular project using Ignite UI CLI first, then connect MCP to the generated project. Use this when you prefer CLI scaffolding before bringing in the AI client. +- **Connect MCP to an existing project** — add the MCP configuration to an Angular project that already exists and continue working in the current codebase. Use this when you have an existing Angular app and want to add Ignite UI CLI MCP and Ignite UI Theming MCP. This path also covers asking documentation and API questions from chat without making project changes. -## Open the Right Topic +## Choose the Right Setup Path -Use the short guide below to choose the best starting point: +**[Start from an Empty Folder with Ignite UI CLI MCP for Angular](general-how-to-start-mcp.md)** +Use this when you want to begin with an empty workspace, add the MCP configuration for your AI client, and let the assistant create the Angular project through prompts. -> **Start from an Empty Folder with MCP for Angular**: use this when you want MCP to help create the Angular project from the beginning. +**[Create an Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md)** +Use this when you want to scaffold the Angular project with Ignite UI CLI first and connect MCP after that. -> **Create an Angular Project with Ignite UI CLI, then Continue with MCP**: use this when you want to create the Angular project first and use MCP after that. +**[Use Ignite UI CLI MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md)** +Use this when you have an existing Angular project and want to connect Ignite UI CLI MCP and Ignite UI Theming MCP, continue working in the current codebase, and ask documentation or API questions in chat. -> **Use MCP in an Existing Angular Project**: use this when you already have an Angular project and want to connect MCP, continue working in the current codebase, and ask documentation or API questions. +## Related Topics -- [Start from an Empty Folder with MCP for Angular](general-how-to-start-mcp.md) - Use this when you want to begin with an empty workspace, add the MCP configuration for your AI client, and let the assistant help create the Angular project from the beginning. -- [Create an Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) - Use this when you want to create the Angular project with Ignite UI CLI first and continue with the generated MCP setup after that. -- [Use MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md) - Use this when you want to connect MCP to an existing Angular project, continue working in the current codebase, and ask documentation or API questions in chat. +For more information about AI skills and theming workflows, see [Angular Agent Skills](ai/skills.md) and [Ignite UI Theming MCP](ai/theming-mcp.md). From 23947d74ad8ca15c01467dd92f3ca8c6a5b53551 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 00:50:07 +0300 Subject: [PATCH 11/28] Revise Ignite UI CLI project creation guide Updated the title, description, and keywords for clarity and consistency. Revised the content to improve readability and enhance the instructions for creating an Angular project with Ignite UI CLI and MCP. --- .../general-how-to-start-mcp-cli-project.md | 203 ++++++++---------- 1 file changed, 90 insertions(+), 113 deletions(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md index 1e5dd1188d..15c848c009 100644 --- a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md +++ b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md @@ -1,68 +1,60 @@ --- -title: Create a Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics -_description: Learn how to create a new Angular project with Ignite UI CLI, review the generated MCP configuration, and continue with MCP tools in a supported AI client. -_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI Theming MCP, AI +title: Create an Angular Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics +_description: Scaffold an Angular project with Ignite UI CLI, review the generated MCP configuration, and use Ignite UI CLI MCP and Ignite UI Theming MCP in a supported AI client to continue building through chat. +_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI --- -# Create a Project with Ignite UI CLI, then Continue with MCP + + -This guide shows a CLI-first flow for Angular. You create the Angular project with Ignite UI CLI first, then continue with MCP using a supported editor or AI client. +# Create an Angular Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP -Before you begin, make sure Node.js is installed, `npm` can run, and you have internet access for package resolution. +The CLI-first setup for Ignite UI for Angular uses Ignite UI CLI to scaffold the Angular project first, then connects Ignite UI CLI MCP and Ignite UI Theming MCP to the generated project so an AI assistant can continue building through chat. Ignite UI CLI generates the project structure, installs dependencies, and writes the initial MCP configuration. After that, Ignite UI CLI MCP and Ignite UI Theming MCP are available to the AI client through the generated configuration. -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. +Ignite UI CLI MCP and Ignite UI Theming MCP do not currently support Blazor — they cover Angular, React, and Web Components only. Neither server modifies project files autonomously; each exposes tools to the active AI agent session in a supported client. If you want the AI assistant to create the Angular project without running the CLI yourself, see [Start from an Empty Folder with Ignite UI CLI MCP for Angular](general-how-to-start-mcp.md) instead. -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. +## Prerequisites + +- Node.js installed so `npm` and `npx` are available in the terminal +- A supported AI client: VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, or another MCP-compatible client with STDIO support +- Internet access for package installation and `npx` resolution +- An empty folder for the new Angular project ## Step 1: Choose How to Run Ignite UI CLI -### Option 1: Install globally +Ignite UI CLI is available as a global install or through `npx` without a global install. -Run: +### Install globally ```cmd npm install -g igniteui-cli ``` -Use this when you want the `ig` command available globally. - -### Option 2: Run with `npx` - -If your setup supports it, you can run Ignite UI CLI without installing it globally by using `npx`. - -Guided example: - -```cmd -npx --package igniteui-cli igniteui new -``` +Use this when you want the `ig` command available in any terminal session. The examples in this guide use the global `ig` command. -Direct command example: +### Run with `npx` without installing globally ```cmd npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty ``` -This topic uses the global `ig` command in the main examples below. If you prefer not to install the CLI globally, you can use the matching `npx` form instead when supported by your setup. +Replace the direct `ig` command with the matching `npx --package igniteui-cli igniteui` form in any step below when using this option. ## Step 2: Create a New Empty Folder -Create a new empty folder for your Angular project. - -Open a terminal in that folder. +Create a new empty folder for the Angular project and open a terminal in that folder. -## Step 3: Create the Project +## Step 3: Create the Angular Project -You can create the project in either of these ways. +Create the project using guided mode or a direct command. ### Guided mode -Run: - ```cmd ig new ``` -Use this when you want the CLI to guide you through the available options. +The CLI prompts for project name, framework, project type, template, and theme. After the last prompt, the CLI creates the project and installs all dependencies. Matching `npx` form: @@ -72,9 +64,7 @@ npx --package igniteui-cli igniteui new ### Direct command -Run a full command when you already know the project settings. - -Use this form: +Use this form when you already know the project settings: ```cmd ig new my-app --framework=angular --type=[project-type] --template=[template] @@ -98,62 +88,54 @@ npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=side-nav-auth ``` -Common variants include: - -- `--framework=angular` -- `--template=base` for a project structure with routing -- `--template=empty` for an empty project structure with routing and home page -- `--template=side-nav` for a project with side navigation -- `--template=side-nav-auth` for a side navigation project with authentication -- `--type=igx-ts` for Angular projects that use standalone components by default -- `--type=igx-ts-legacy` for Angular projects that use module-based bootstrapping +Template and type options: -For more project templates and CLI command details, see the [Ignite UI CLI](../cli-overview.md) topic. +- `--template=base` — project structure with routing +- `--template=empty` — empty project structure with routing and home page +- `--template=side-nav` — project with side navigation +- `--template=side-nav-auth` — side navigation project with authentication +- `--type=igx-ts` — Angular project using standalone components by default +- `--type=igx-ts-legacy` — Angular project using module-based bootstrapping -## Step 4: Complete the Guided CLI Setup +For the full list of templates and CLI command options, see the [Ignite UI CLI](../cli-overview.md) topic. -This step applies only if you used the guided `ig new` flow. +## Step 4: Complete the Guided CLI Prompts -Complete the prompts in the CLI. +This step applies only when using guided mode (`ig new` without arguments). -The exact prompts depend on the platform. +The CLI presents prompts in this order: -Use the short flow below: +1. Project name +2. Framework +3. Project type +4. Template +5. Theme +6. Add a component or complete the setup -- project name -- framework -- project type when applicable -- template -- theme when offered -- add a component or view, or complete the setup -- install and run option when offered +After the final prompt, the CLI creates the project folder and installs all required packages. -After the last prompt, the CLI creates the project and installs everything needed to run it. +## Step 5: Review the Generated MCP Configuration -## Step 5: Review the MCP Configuration +After the project is created, Ignite UI CLI writes an MCP configuration file to the project. Review the configuration and confirm it contains entries for both Ignite UI CLI MCP and Ignite UI Theming MCP. -After the project is created, review the MCP configuration for your AI client. +For VS Code, the generated file is `.vscode/mcp.json`. For other clients, add the equivalent configuration manually in the correct location: -If you are using VS Code, open `.vscode/mcp.json`. +| Client | Configuration location | +| --- | --- | +| VS Code | `.vscode/mcp.json` (generated by CLI) | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` | +| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Other MCP clients | Use the same command and arguments through STDIO configuration | -If you are using another AI client, add the equivalent MCP configuration in that client's location: - -- **Cursor**: `.cursor/mcp.json` -- **Claude Desktop**: - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` -- **Claude Code**: `.mcp.json` -- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** -- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration - -Make sure the configuration contains the required Ignite UI MCP servers. - -### VS Code +### VS Code — expected `.vscode/mcp.json` content ```json { "servers": { - "igniteui": { + "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli@next", "mcp"] }, @@ -170,7 +152,7 @@ Make sure the configuration contains the required Ignite UI MCP servers. ```json { "mcpServers": { - "igniteui": { + "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli@next", "mcp"] }, @@ -182,75 +164,70 @@ Make sure the configuration contains the required Ignite UI MCP servers. } ``` -- `igniteui` starts the Ignite UI CLI MCP server -- `igniteui-theming` starts the Ignite UI theming MCP server - -What you should see next: your AI client configuration contains the required Ignite UI MCP servers. - -## Step 6: Open the Project in Your Editor or AI Client - -If you are using an editor-based client, open the generated Angular project folder there. +The `igniteui-cli` entry starts Ignite UI CLI MCP. The `igniteui-theming` entry starts Ignite UI Theming MCP. -If you are using a desktop or chat-first client, make the generated Angular project available as the project context you want to work with. +## Step 6: Open the Project in Your AI Client -The client should detect the MCP configuration from the appropriate file or settings location. +- If you are using an editor-based client, open the generated Angular project folder in that editor. +- If you are using a desktop or chat-first client, make the generated project available as the project context for the session. -## Step 7: Confirm the MCP Servers and Tools Are Available +The client detects the MCP configuration from the file location or settings configured in Step 5. -Open chat, agent mode, or the MCP tools view in your AI client. +## Step 7: Confirm the MCP Tools Are Available -Check the available tools. +Open chat, agent mode, or the MCP tools view in your AI client and check the available tools. Both MCP servers and their tools should be listed: -You should see the MCP servers and their tools, including: - -- `igniteui` +- `igniteui-cli` - `igniteui-theming` -What you should see next: all MCP servers are available and there are no startup errors. +If either server fails to appear, verify that the configuration content matches the examples in Step 5 exactly and that Node.js is installed in the terminal environment. -Client-specific checks: +Client-specific verification steps: - **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode - **Cursor**: open a new chat session and check the available MCP tools - **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area - **Claude Code**: use the `/mcp` command to confirm the server is connected -- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** +- **JetBrains IDEs**: review the MCP connection in **Tools → AI Assistant → Model Context Protocol (MCP)** -## Step 8: Start Prompting +## Step 8: Continue Building Through Chat -Once the tools are available, you can continue with prompts to build or refine the Angular application. +With both MCP servers confirmed available, continue in chat to build on top of the scaffolded Angular application: -## Troubleshooting +- Add or change pages and features +- Add Ignite UI for Angular components through prompts +- Update theme and styling with Ignite UI Theming MCP +- Ask documentation and API questions about Ignite UI for Angular components +- Refine the generated project code -**`ig` does not run** +## Troubleshooting -Make sure Ignite UI CLI is installed globally and available in the terminal. +**`ig` is not recognized** +Ignite UI CLI is not installed globally or the global npm bin directory is not in the system PATH. Run `npm install -g igniteui-cli` and verify with `ig --version`. **The project is created but MCP tools do not appear** +Reload the workspace, reopen the project folder, or restart the AI client. Some clients require a full restart to detect MCP configuration files. -Reload the workspace, reopen the project, or restart the AI client. +**One server fails to start** +Verify that the configuration content matches the examples in Step 5 exactly, including key names (`igniteui-cli`, not `igniteui`) and argument order. -**One server does not start** - -Check that the MCP configuration content matches the example exactly. +**The CLI-generated MCP configuration uses the wrong JSON structure for your client** +The CLI generates `.vscode/mcp.json` for VS Code. For other clients, copy the server entries into the `mcpServers` structure shown in Step 5 and place the file in the correct location for your client. ## Next Steps -Now that the Angular project is created and the MCP tools are available, you can use chat to continue building on top of the existing app. - -Typical next actions include: +With the Angular project scaffolded and both MCP servers running, continue in chat to expand the application: -- adding or changing pages and features -- updating theme and styling -- refining generated code -- asking for help with Angular components and configuration +- Add Ignite UI for Angular components through prompts +- Apply and customize themes with Ignite UI Theming MCP +- Ask documentation and API questions about Angular components in the same session ## Related Topics -This guide covers the CLI-first flow for Angular. If you want the assistant to start from a completely empty folder and create the Angular project from the beginning through MCP, see the [Start from an Empty Folder with MCP](general-how-to-start-mcp.md) topic. +For an overview of all available MCP setup paths for Angular, see [Angular Ignite UI CLI MCP Overview](general-how-to-mcp-overview.md). -If you already have an Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). +If you want the AI assistant to create the Angular project without running the CLI yourself, see [Start from an Empty Folder with Ignite UI CLI MCP for Angular](general-how-to-start-mcp.md). -If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). +If you already have an Angular project, see [Use Ignite UI CLI MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md). For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). From de5e722349b5a659589318278f502a10a169c6d0 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 00:55:10 +0300 Subject: [PATCH 12/28] Revise Ignite UI CLI MCP setup guide for Angular Updated the guide to reflect changes in the Ignite UI CLI MCP setup process, including new prerequisites and configuration details. --- .../how-to/general-how-to-start-mcp.md | 132 ++++++++---------- 1 file changed, 58 insertions(+), 74 deletions(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md index 045d9d65b9..6979f2a140 100644 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -1,45 +1,47 @@ --- -title: Start from an Empty Folder with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics -_description: Learn how to start from an empty folder, add the Ignite UI MCP configuration, verify the tools, and create a new Angular project through chat. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI +title: Start from an Empty Folder with Ignite UI CLI MCP for Angular | Ignite UI for Angular | Infragistics +_description: Set up Ignite UI CLI MCP and Ignite UI Theming MCP in a new empty folder and use an AI assistant to create an Angular project through chat. Covers VS Code, Cursor, Claude Desktop, Claude Code, and JetBrains. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI --- -# Start from an Empty Folder with MCP + + -This guide shows the cleanest MCP-first flow for Angular. You start from a completely empty folder, add the Ignite UI MCP configuration, and then continue in chat to create the Angular project from the beginning. +# Start from an Empty Folder with Ignite UI CLI MCP for Angular -The goal is simple: get the MCP servers running in a new workspace so the assistant can help you create and shape the Angular project through prompts. +The MCP-first setup for Ignite UI for Angular starts with an empty workspace folder, adds Ignite UI CLI MCP and Ignite UI Theming MCP configuration for your AI client, and then uses chat or agent mode to create the Angular project from the beginning. No manual CLI steps are required before the first prompt — Ignite UI CLI MCP exposes Ignite UI CLI scaffolding tools to the AI assistant, which invokes them on your behalf. -Before you begin, make sure Node.js is installed, `npx` can run, and you have internet access for package resolution. +Ignite UI CLI MCP and Ignite UI Theming MCP do not create the project autonomously. The AI assistant invokes Ignite UI CLI MCP tools in response to your prompts. Neither server supports Blazor — Angular, React, and Web Components are supported. If you already have an Angular project, see [Use Ignite UI CLI MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md) instead of this guide. -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. +## Prerequisites -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. +- Node.js installed so `npx` is available in the terminal +- A supported AI client: VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, or another MCP-compatible client with STDIO support +- Internet access for `npx` to download the MCP server packages on first run +- An empty folder with no existing project files -## Step 1: Create a New Empty Folder +## Step 1: Create the Empty Folder -Create a new empty folder for your Angular project. +Create a new empty folder for the Angular project. -If you are using an editor-based client, open that folder there. - -If you are using a desktop or chat-first client, keep the folder available as the project context you want to work with. +- If you are using an editor-based client (VS Code, Cursor, JetBrains), open that folder in the editor. +- If you are using a desktop or chat-first client (Claude Desktop, Claude Code), keep the folder available as the project context for the session. ## Step 2: Create the MCP Configuration File -Create the MCP configuration file that matches your AI client. - -Use one of these locations: +Create the MCP configuration file in the location that matches your AI client: -- **VS Code**: `.vscode/mcp.json` -- **Cursor**: `.cursor/mcp.json` -- **Claude Desktop**: - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` -- **Claude Code**: `.mcp.json` -- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** -- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration +| Client | Configuration location | +| --- | --- | +| VS Code | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` | +| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Other MCP clients | Use the same command and arguments through STDIO configuration | -For example, in VS Code your folder structure should look like this: +For VS Code, the folder structure after this step looks like: ```text your-project/ @@ -47,20 +49,16 @@ your-project/ mcp.json ``` -What you should see next: the MCP configuration file is present in the correct location for your AI client. - -## Step 3: Add the MCP Configuration +## Step 3: Add the MCP Server Configuration -Add both Ignite UI MCP servers to that configuration. - -Use the JSON structure that matches your AI client. +Add both MCP servers to the configuration file. Use the JSON structure that matches your AI client. ### VS Code ```json { "servers": { - "igniteui": { + "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli@next", "mcp"] }, @@ -77,7 +75,7 @@ Use the JSON structure that matches your AI client. ```json { "mcpServers": { - "igniteui": { + "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli@next", "mcp"] }, @@ -89,77 +87,63 @@ Use the JSON structure that matches your AI client. } ``` -- `igniteui` starts the Ignite UI CLI MCP server -- `igniteui-theming` starts the Ignite UI theming MCP server - -## Step 4: Let the Workspace Load the MCP Servers +The `igniteui-cli` entry starts Ignite UI CLI MCP, which exposes project creation, component management, and documentation tools. The `igniteui-theming` entry starts Ignite UI Theming MCP, which exposes theme and styling tools. -After you save the MCP configuration, your editor or AI client may detect the MCP servers automatically. +## Step 4: Load the MCP Servers -If the tools do not appear immediately, reload or reopen the workspace or restart the client. +Save the configuration file. Your editor or AI client may detect the MCP servers automatically after saving. -What you should see next: the client recognizes the MCP configuration and starts loading the available tools. +If the tools do not appear immediately, reload or reopen the workspace, or restart the client. ## Step 5: Confirm the MCP Tools Are Available -Open chat, agent mode, or the MCP tools view in your AI client. - -Check the available MCP tools. +Open chat, agent mode, or the MCP tools view in your AI client and check the available tools. Both MCP servers and their tools should be listed: -You should see the Ignite UI MCP servers and their tools, including: - -- `igniteui` +- `igniteui-cli` - `igniteui-theming` -What you should see next: both MCP servers are available and there are no startup errors. +If either server fails to appear, verify that the configuration content matches the examples in Step 3 exactly and that Node.js is installed and available in the terminal. -Client-specific checks: +Client-specific verification steps: - **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode - **Cursor**: open a new chat session and check the available MCP tools - **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area - **Claude Code**: use the `/mcp` command to confirm the server is connected -- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** +- **JetBrains IDEs**: review the MCP connection in **Tools → AI Assistant → Model Context Protocol (MCP)** -## Step 6: Start Prompting to Create the Angular Project +## Step 6: Prompt the Assistant to Create the Angular Project -Once the tools are available, continue in chat and ask the assistant to create the Angular project in the current folder. +Once both MCP servers are confirmed available, send a prompt in chat asking the assistant to create the Angular project in the current folder. The assistant will invoke Ignite UI CLI MCP tools to scaffold the project. ## Troubleshooting -**`npx` does not work** - -Make sure Node.js is installed and available in the terminal. - -**The MCP tools do not appear** +**`npx` is not recognized** +Node.js is not installed or is not available in the current terminal environment. Install Node.js from [nodejs.org](https://nodejs.org) and verify with `node --version`. -Reload the workspace, reopen the editor, or restart the AI client after creating the MCP configuration file. +**The MCP tools do not appear after saving the configuration** +Reload the workspace, reopen the editor, or restart the AI client. Some clients require a full restart to detect new MCP configuration files. -**One server does not start** +**One server fails to start** +Verify that the configuration content matches the examples in Step 3 exactly, including key names (`igniteui-cli`, not `igniteui`) and argument order. -Check that the MCP configuration content matches the example exactly. - -**The folder was not empty** - -This guide assumes a fresh workspace with no project files yet. +**The folder already has project files** +This guide assumes an empty workspace. If the folder contains existing project files, use [Use Ignite UI CLI MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md) instead. ## Next Steps -Now that the MCP servers are available, you can use chat to create the Angular project and continue shaping it. - -Typical next actions include: +With both MCP servers running and the Angular project created, continue in chat to build out the application: -- creating the initial application in the current folder -- choosing the Angular project structure through prompts -- applying theming changes -- continuing with component, layout, or setup tasks +- Add Ignite UI for Angular components through prompts +- Apply and customize themes with Ignite UI Theming MCP +- Ask documentation and API questions about Angular components in the same chat session ## Related Topics -This guide covers the empty-folder MCP-first flow for Angular. If you prefer to create the Angular project with Ignite UI CLI first and continue with MCP after that, see the [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) topic. +For an overview of all available MCP setup paths for Angular, see [Angular Ignite UI CLI MCP Overview](general-how-to-mcp-overview.md). -If you already have an Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). +If you prefer to scaffold the Angular project with Ignite UI CLI before connecting MCP, see [Create an Angular Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP](general-how-to-start-mcp-cli-project.md). -If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). +If you already have an Angular project, see [Use Ignite UI CLI MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md). For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). From b90efd07b879b4a3452a71d7fc496b2705f1d9fb Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 00:58:00 +0300 Subject: [PATCH 13/28] Revise MCP usage guide for existing Angular projects Updated the guide on using Ignite UI CLI MCP in an existing Angular project, including changes to the title, description, and keywords for clarity. Added details on connecting MCP servers and troubleshooting steps. --- ...general-how-to-use-mcp-existing-project.md | 167 ++++++++---------- 1 file changed, 75 insertions(+), 92 deletions(-) diff --git a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md index 729f2fcd64..ae1421a36a 100644 --- a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md +++ b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md @@ -1,58 +1,57 @@ --- -title: Use Ignite UI CLI MCP in an Existing Project | Ignite UI for Angular | Infragistics -_description: Learn how to add Ignite UI MCP to an existing Angular project, verify the tools, continue working in the current codebase, and use MCP to ask documentation and API questions. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI, documentation, API +title: Use Ignite UI CLI MCP in an Existing Angular Project | Ignite UI for Angular | Infragistics +_description: Connect Ignite UI CLI MCP and Ignite UI Theming MCP to an existing Angular project, continue working in the current codebase, and ask documentation and API questions about Ignite UI for Angular components through chat. +_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI, documentation, API +last_updated: "2025-04-03" --- -# Use MCP in an Existing Project + + -This guide shows how to connect Ignite UI MCP to an Angular project that already exists and continue working in the current codebase. +# Use Ignite UI CLI MCP in an Existing Angular Project -It also shows how to use MCP in chat to ask documentation questions about Angular components, configuration, and available API members. +Ignite UI CLI MCP and Ignite UI Theming MCP connect to an existing Angular project by adding MCP configuration for your AI client in the project root. Once connected, Ignite UI CLI MCP exposes Ignite UI for Angular CLI tools to the AI assistant — enabling the assistant to add and modify Ignite UI for Angular components, answer documentation questions about component properties, events, and methods, and assist with theming through Ignite UI Theming MCP. No project regeneration or CLI scaffolding is required. -Before you begin, make sure Node.js is installed, `npx` can run, and you have internet access for package resolution. +Ignite UI CLI MCP and Ignite UI Theming MCP do not currently support Blazor — Angular, React, and Web Components are supported. Neither server modifies project files autonomously; each exposes tools to the active AI agent session in a supported client. Neither server replaces or removes existing project structure — Ignite UI CLI MCP works with the current codebase as-is. If you do not have an existing Angular project, see [Start from an Empty Folder with Ignite UI CLI MCP for Angular](general-how-to-start-mcp.md) instead. -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. +## Prerequisites -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. +- Node.js installed so `npx` is available in the terminal +- A supported AI client: VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, or another MCP-compatible client with STDIO support +- Internet access for `npx` to download the MCP server packages on first run +- An existing Angular project open in the editor or available as the session context ## Step 1: Open the Existing Angular Project -If you are using an editor-based client, open the existing Angular project there. +- If you are using an editor-based client, open the existing Angular project folder in that editor. +- If you are using a desktop or chat-first client, make the existing project available as the project context for the session. -If you are using a desktop or chat-first client, keep the existing Angular project available as the project context you want to work with. - -Make sure you are working in the project root. +Work from the project root throughout this guide. ## Step 2: Create the MCP Configuration File -Create the MCP configuration file that matches your AI client. - -Use one of these locations: - -- **VS Code**: `.vscode/mcp.json` -- **Cursor**: `.cursor/mcp.json` -- **Claude Desktop**: - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` -- **Claude Code**: `.mcp.json` -- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** -- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration - -What you should see next: the MCP configuration file is present in the correct location for your AI client. +Create the MCP configuration file in the location that matches your AI client: -## Step 3: Add the MCP Configuration +| Client | Configuration location | +| --- | --- | +| VS Code | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` | +| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Other MCP clients | Use the same command and arguments through STDIO configuration | -Add both Ignite UI MCP servers to that configuration. +## Step 3: Add the MCP Server Configuration -Use the JSON structure that matches your AI client. +Add both MCP servers to the configuration file. Use the JSON structure that matches your AI client. ### VS Code ```json { "servers": { - "igniteui": { + "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli@next", "mcp"] }, @@ -69,7 +68,7 @@ Use the JSON structure that matches your AI client. ```json { "mcpServers": { - "igniteui": { + "igniteui-cli": { "command": "npx", "args": ["-y", "igniteui-cli@next", "mcp"] }, @@ -81,108 +80,92 @@ Use the JSON structure that matches your AI client. } ``` -- `igniteui` starts the Ignite UI CLI MCP server -- `igniteui-theming` starts the Ignite UI theming MCP server +The `igniteui-cli` entry starts Ignite UI CLI MCP, which exposes component management, project modification, and documentation tools. The `igniteui-theming` entry starts Ignite UI Theming MCP, which exposes theme and styling tools. -## Step 4: Let the MCP Servers Load +## Step 4: Load the MCP Servers -After you save the MCP configuration, your editor or AI client may detect the MCP servers automatically. +Save the configuration file. Your editor or AI client may detect the MCP servers automatically after saving. -If the tools do not appear immediately, reload or reopen the workspace or restart the client. - -What you should see next: the workspace recognizes the MCP configuration and starts loading the available tools. +If the tools do not appear immediately, reload or reopen the workspace, or restart the client. ## Step 5: Confirm the MCP Tools Are Available -Open chat, agent mode, or the MCP tools view in your AI client. - -Check the available MCP tools. - -You should see the Ignite UI MCP servers and their tools, including: +Open chat, agent mode, or the MCP tools view in your AI client and check the available tools. Both MCP servers and their tools should be listed: -- `igniteui` +- `igniteui-cli` - `igniteui-theming` -What you should see next: both MCP servers are available and there are no startup errors. +If either server fails to appear, verify that the configuration content matches the examples in Step 3 exactly and that Node.js is installed and available in the terminal. -Client-specific checks: +Client-specific verification steps: - **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode - **Cursor**: open a new chat session and check the available MCP tools - **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area - **Claude Code**: use the `/mcp` command to confirm the server is connected -- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** +- **JetBrains IDEs**: review the MCP connection in **Tools → AI Assistant → Model Context Protocol (MCP)** ## Step 6: Continue Working in the Existing Angular Project -Once the tools are available, continue in chat and ask the assistant to work with the current Angular project instead of creating a new one. +With both MCP servers confirmed available, continue in chat and ask the assistant to work with the current Angular project. Ignite UI CLI MCP has access to the project context, so it can inspect the existing structure, add or modify components, and update configuration in the current codebase. -Typical next actions include: +Typical actions in an existing project: -- reviewing the existing project structure -- adding or changing pages and features -- updating theme and styling -- refining code in the current codebase +- Review and explain the existing project structure +- Add Ignite UI for Angular components to existing pages +- Modify component configuration and data bindings +- Update theme and styling with Ignite UI Theming MCP +- Refactor or extend existing code -## Step 7: Use MCP to Ask Documentation Questions +## Step 7: Ask Documentation and API Questions -You can also use chat to ask questions about Angular documentation while working in the existing project. +Ignite UI CLI MCP can answer documentation questions about Ignite UI for Angular components without making any changes to the project. Ask in plain language and continue the conversation based on the answers. -The `igniteui` MCP server can help you continue working in the current codebase, make project and component changes, and ask documentation questions about Angular components, features, and API members. +Documentation questions Ignite UI CLI MCP can answer: -Typical documentation questions include: +- Which component is the right fit for a specific scenario +- How to configure a feature in a specific component +- Which properties, events, or methods a component exposes +- How a specific API member is used and what its accepted values are +- What patterns or examples are recommended for a component -- which component fits a specific scenario -- how to configure a feature in a component -- which properties, events, or methods are available -- how a specific API member is used -- what examples or patterns are recommended for a component +Example questions to ask in chat: -You can ask in plain language and continue the conversation based on the answers the assistant gives you. +> "What filtering properties does the Angular grid support?" -Example questions: +> "What events does the combo component expose?" -> _"What properties does the grid support for filtering?"_ - -> _"What events does this component expose?"_ - -> _"Show me the available methods for this component."_ +> "Show me the available methods for the date picker." ## Troubleshooting -**`npx` does not work** - -Make sure Node.js is installed and available in the terminal. - -**The MCP tools do not appear** +**`npx` is not recognized** +Node.js is not installed or is not available in the current terminal environment. Install Node.js from [nodejs.org](https://nodejs.org) and verify with `node --version`. -Reload the workspace, reopen the editor, or restart the AI client after creating the MCP configuration file. +**The MCP tools do not appear after saving the configuration** +Reload the workspace, reopen the editor, or restart the AI client. Some clients require a full restart to detect new MCP configuration files. -**One server does not start** +**One server fails to start** +Verify that the configuration content matches the examples in Step 3 exactly, including key names (`igniteui-cli`, not `igniteui`) and argument order. -Check that the MCP configuration content matches the example exactly. - -**The project is very large** - -Start with a narrow request so the assistant can inspect the relevant area of the codebase first. +**The assistant cannot locate files in the project** +Start with a prompt that describes the specific file or area of the codebase you want the assistant to work with, rather than asking it to inspect the entire project at once. ## Next Steps -Now that MCP is connected to your existing Angular project, you can use chat to continue building, refactoring, and asking product questions without starting from scratch. - -Typical next actions include: +With Ignite UI CLI MCP and Ignite UI Theming MCP connected to the existing Angular project, use chat to build, refactor, and ask product questions: -- asking the assistant to inspect and explain the current codebase -- changing features in the existing app -- asking for component and API guidance from the documentation -- applying theming changes with the theming MCP server +- Ask the assistant to inspect and explain specific parts of the codebase +- Add or modify Ignite UI for Angular components in the existing app +- Apply theming changes with Ignite UI Theming MCP +- Ask documentation and API questions about any Ignite UI for Angular component ## Related Topics -If you want to start from a completely empty folder instead, see [Start from an Empty Folder with MCP](general-how-to-start-mcp.md). +For an overview of all available MCP setup paths for Angular, see [Angular Ignite UI CLI MCP Overview](general-how-to-mcp-overview.md). -If you want to create the Angular project with Ignite UI CLI first and continue after that, see [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md). +If you want to start from an empty folder instead, see [Start from an Empty Folder with Ignite UI CLI MCP for Angular](general-how-to-start-mcp.md). -If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). +If you want to scaffold the Angular project with Ignite UI CLI first and connect MCP after that, see [Create an Angular Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP](general-how-to-start-mcp-cli-project.md). For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). From 48d7b7f3cb40b5aeb91a07e67a4019983ec13886 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:03:43 +0300 Subject: [PATCH 14/28] Update MCP documentation with last updated date --- .../how-to/general-how-to-start-mcp.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md index 6979f2a140..245748c784 100644 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -2,6 +2,7 @@ title: Start from an Empty Folder with Ignite UI CLI MCP for Angular | Ignite UI for Angular | Infragistics _description: Set up Ignite UI CLI MCP and Ignite UI Theming MCP in a new empty folder and use an AI assistant to create an Angular project through chat. Covers VS Code, Cursor, Claude Desktop, Claude Code, and JetBrains. _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI +last_updated: "2025-04-03" --- @@ -31,15 +32,15 @@ Create a new empty folder for the Angular project. Create the MCP configuration file in the location that matches your AI client: -| Client | Configuration location | -| --- | --- | -| VS Code | `.vscode/mcp.json` | -| Cursor | `.cursor/mcp.json` | -| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | -| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | -| Claude Code | `.mcp.json` | -| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | -| Other MCP clients | Use the same command and arguments through STDIO configuration | +| Client | Configuration location | +| ------------------------ | ------------------------------------------------------------------------ | +| VS Code | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` | +| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Other MCP clients | Use the same command and arguments through STDIO configuration | For VS Code, the folder structure after this step looks like: From 3d2282de25b6c4c174269c3ce68429b4f5ffeff6 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:04:22 +0300 Subject: [PATCH 15/28] Update MCP configuration details in documentation --- ...general-how-to-use-mcp-existing-project.md | 22 ++++++++----------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md index ae1421a36a..7b9eb58618 100644 --- a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md +++ b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md @@ -2,12 +2,8 @@ title: Use Ignite UI CLI MCP in an Existing Angular Project | Ignite UI for Angular | Infragistics _description: Connect Ignite UI CLI MCP and Ignite UI Theming MCP to an existing Angular project, continue working in the current codebase, and ask documentation and API questions about Ignite UI for Angular components through chat. _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI, documentation, API -last_updated: "2025-04-03" --- - - - # Use Ignite UI CLI MCP in an Existing Angular Project Ignite UI CLI MCP and Ignite UI Theming MCP connect to an existing Angular project by adding MCP configuration for your AI client in the project root. Once connected, Ignite UI CLI MCP exposes Ignite UI for Angular CLI tools to the AI assistant — enabling the assistant to add and modify Ignite UI for Angular components, answer documentation questions about component properties, events, and methods, and assist with theming through Ignite UI Theming MCP. No project regeneration or CLI scaffolding is required. @@ -32,15 +28,15 @@ Work from the project root throughout this guide. Create the MCP configuration file in the location that matches your AI client: -| Client | Configuration location | -| --- | --- | -| VS Code | `.vscode/mcp.json` | -| Cursor | `.cursor/mcp.json` | -| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | -| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | -| Claude Code | `.mcp.json` | -| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | -| Other MCP clients | Use the same command and arguments through STDIO configuration | +| Client | Configuration location | +| ------------------------ | ------------------------------------------------------------------------ | +| VS Code | `.vscode/mcp.json` | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` | +| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Other MCP clients | Use the same command and arguments through STDIO configuration | ## Step 3: Add the MCP Server Configuration From d3c3c594427700bad6ec4826e2b4bb8c6cb2a9c0 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:05:03 +0300 Subject: [PATCH 16/28] Revise MCP configuration details for various clients Updated the configuration table for various clients and ensured consistency in formatting. --- .../general-how-to-start-mcp-cli-project.md | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md index 15c848c009..9c3b2b9011 100644 --- a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md +++ b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md @@ -4,9 +4,6 @@ _description: Scaffold an Angular project with Ignite UI CLI, review the generat _keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI --- - - - # Create an Angular Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP The CLI-first setup for Ignite UI for Angular uses Ignite UI CLI to scaffold the Angular project first, then connects Ignite UI CLI MCP and Ignite UI Theming MCP to the generated project so an AI assistant can continue building through chat. Ignite UI CLI generates the project structure, installs dependencies, and writes the initial MCP configuration. After that, Ignite UI CLI MCP and Ignite UI Theming MCP are available to the AI client through the generated configuration. @@ -120,15 +117,15 @@ After the project is created, Ignite UI CLI writes an MCP configuration file to For VS Code, the generated file is `.vscode/mcp.json`. For other clients, add the equivalent configuration manually in the correct location: -| Client | Configuration location | -| --- | --- | -| VS Code | `.vscode/mcp.json` (generated by CLI) | -| Cursor | `.cursor/mcp.json` | -| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | -| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | -| Claude Code | `.mcp.json` | -| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | -| Other MCP clients | Use the same command and arguments through STDIO configuration | +| Client | Configuration location | +| ------------------------ | ------------------------------------------------------------------------ | +| VS Code | `.vscode/mcp.json` (generated by CLI) | +| Cursor | `.cursor/mcp.json` | +| Claude Desktop (macOS) | `~/Library/Application Support/Claude/claude_desktop_config.json` | +| Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | +| Claude Code | `.mcp.json` | +| JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | +| Other MCP clients | Use the same command and arguments through STDIO configuration | ### VS Code — expected `.vscode/mcp.json` content From 33141e16b1d4c66e79953c3008baeca97b987676 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:14:55 +0300 Subject: [PATCH 17/28] Fix formatting issues in general-how-to-start-mcp.md --- en/components/general/how-to/general-how-to-start-mcp.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md index 245748c784..98171f5b56 100644 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -40,7 +40,7 @@ Create the MCP configuration file in the location that matches your AI client: | Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | | Claude Code | `.mcp.json` | | JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | -| Other MCP clients | Use the same command and arguments through STDIO configuration | +| Other MCP clients | Use the same command and arguments through STDIO configuration | For VS Code, the folder structure after this step looks like: From de679b9cca4436b6665ca64b9d32c3082a20caf6 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:15:23 +0300 Subject: [PATCH 18/28] Revise metadata and clean up comments in guide Updated metadata and removed unnecessary comments in the how-to guide. --- en/components/general/how-to/general-how-to-start-mcp.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md index 98171f5b56..e3bcf37c1a 100644 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ b/en/components/general/how-to/general-how-to-start-mcp.md @@ -2,12 +2,8 @@ title: Start from an Empty Folder with Ignite UI CLI MCP for Angular | Ignite UI for Angular | Infragistics _description: Set up Ignite UI CLI MCP and Ignite UI Theming MCP in a new empty folder and use an AI assistant to create an Angular project through chat. Covers VS Code, Cursor, Claude Desktop, Claude Code, and JetBrains. _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI -last_updated: "2025-04-03" --- - - - # Start from an Empty Folder with Ignite UI CLI MCP for Angular The MCP-first setup for Ignite UI for Angular starts with an empty workspace folder, adds Ignite UI CLI MCP and Ignite UI Theming MCP configuration for your AI client, and then uses chat or agent mode to create the Angular project from the beginning. No manual CLI steps are required before the first prompt — Ignite UI CLI MCP exposes Ignite UI CLI scaffolding tools to the AI assistant, which invokes them on your behalf. From 6d71d08a0f3fe910636c9463a991f6d29728dc97 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:16:07 +0300 Subject: [PATCH 19/28] Fix formatting in MCP usage documentation --- .../general/how-to/general-how-to-use-mcp-existing-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md index 7b9eb58618..70869db659 100644 --- a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md +++ b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md @@ -36,7 +36,7 @@ Create the MCP configuration file in the location that matches your AI client: | Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | | Claude Code | `.mcp.json` | | JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | -| Other MCP clients | Use the same command and arguments through STDIO configuration | +| Other MCP clients | Use the same command and arguments through STDIO configuration | ## Step 3: Add the MCP Server Configuration From ca4d25f4afff82923edc9c6c1dda482d8c9e7d8f Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:16:53 +0300 Subject: [PATCH 20/28] Fix formatting in general-how-to-start-mcp-cli-project.md --- .../general/how-to/general-how-to-start-mcp-cli-project.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md index 9c3b2b9011..d68174c7d0 100644 --- a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md +++ b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md @@ -125,7 +125,7 @@ For VS Code, the generated file is `.vscode/mcp.json`. For other clients, add th | Claude Desktop (Windows) | `%APPDATA%\Claude\claude_desktop_config.json` | | Claude Code | `.mcp.json` | | JetBrains IDEs | **Tools → AI Assistant → Model Context Protocol (MCP)** | -| Other MCP clients | Use the same command and arguments through STDIO configuration | +| Other MCP clients | Use the same command and arguments through STDIO configuration | ### VS Code — expected `.vscode/mcp.json` content From 9988c8869b7f0a694fe4e17575c1881ae9a37718 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Sat, 4 Apr 2026 01:25:51 +0300 Subject: [PATCH 21/28] Fix relative links in MCP Overview document Updated links in the MCP Overview document to reflect the correct relative paths. --- en/components/general/how-to/general-how-to-mcp-overview.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-mcp-overview.md b/en/components/general/how-to/general-how-to-mcp-overview.md index 9ef2d33c05..fb87bd068d 100644 --- a/en/components/general/how-to/general-how-to-mcp-overview.md +++ b/en/components/general/how-to/general-how-to-mcp-overview.md @@ -2,8 +2,11 @@ title: Ignite UI CLI MCP Overview | Ignite UI for Angular | Infragistics _description: Ignite UI CLI MCP and Ignite UI Theming MCP expose Ignite UI for Angular tools to AI-assisted editors. Choose the right Angular setup path and get started. _keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI CLI MCP, Ignite UI Theming MCP, AI +last_updated: "2025-04-03" --- + + # Angular Ignite UI CLI MCP Overview @@ -76,4 +79,4 @@ Use this when you have an existing Angular project and want to connect Ignite UI ## Related Topics -For more information about AI skills and theming workflows, see [Angular Agent Skills](ai/skills.md) and [Ignite UI Theming MCP](ai/theming-mcp.md). +For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). From a31dde786b3336728936cd8cc2800f35c104579a Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Mon, 6 Apr 2026 14:33:04 +0300 Subject: [PATCH 22/28] docs(*): add angular how to mcp e2e workflow topic --- .../general/how-to/general-how-to-mcp-e2e.md | 254 +++++++++++++++++ .../how-to/general-how-to-mcp-overview.md | 110 -------- .../general-how-to-start-mcp-cli-project.md | 256 ------------------ .../how-to/general-how-to-start-mcp.md | 165 ----------- ...general-how-to-use-mcp-existing-project.md | 188 ------------- en/components/toc.yml | 13 +- 6 files changed, 256 insertions(+), 730 deletions(-) create mode 100644 en/components/general/how-to/general-how-to-mcp-e2e.md delete mode 100644 en/components/general/how-to/general-how-to-mcp-overview.md delete mode 100644 en/components/general/how-to/general-how-to-start-mcp-cli-project.md delete mode 100644 en/components/general/how-to/general-how-to-start-mcp.md delete mode 100644 en/components/general/how-to/general-how-to-use-mcp-existing-project.md diff --git a/en/components/general/how-to/general-how-to-mcp-e2e.md b/en/components/general/how-to/general-how-to-mcp-e2e.md new file mode 100644 index 0000000000..06c14c1f69 --- /dev/null +++ b/en/components/general/how-to/general-how-to-mcp-e2e.md @@ -0,0 +1,254 @@ +--- +title: "Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP - Ignite UI for Angular" +_description: "Follow an end-to-end Ignite UI for Angular workflow with Ignite UI CLI MCP and Ignite UI Theming MCP: start CLI-first, connect both MCP servers, create or extend the app through chat, ask documentation questions, and apply a custom theme." +_keywords: "Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, workflow, theming, prompt" +--- + +# Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP + +

Ignite UI CLI MCP and Ignite UI Theming MCP work together to let an AI assistant scaffold, extend, and theme a Ignite UI for Angular application through chat prompts. CLI MCP handles project creation, component work, and documentation questions. Theming MCP handles palettes, themes, tokens, and styling workflows. This topic shows the full process in one clear flow.

+ +
+ +## Overview + +This topic is the main end-to-end workflow topic for MCP. + +It shows how the process works from start to finish: + +- begin with a CLI-first project setup +- connect CLI MCP and Theming MCP +- continue in chat to build the app +- ask documentation and API questions during development +- apply and refine a custom theme + +Neither server executes steps autonomously. The AI assistant invokes the MCP tools in response to your prompts. Both servers require MCP clients that support STDIO transport. + +## What You Need + +Before you start, make sure you have: + +- **Node.js** installed so `npx` is available +- a supported AI client with MCP support +- internet access for `npx` package resolution on first use +- a folder for the project + +This walkthrough works best with a **CLI-first** setup because Ignite UI CLI scaffolds the project and prepares the first MCP configuration for VS Code automatically. + +If you still need the detailed setup reference for each client, see [Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md) and [Ignite UI Theming MCP](~/components/ai/theming-mcp.md). + +## Step 1: Start with Ignite UI CLI + +The recommended starting point is to create the project with Ignite UI CLI first. + +You can run Ignite UI CLI in either of these ways: + +### Global install + +```bash +npm install -g igniteui-cli +``` + +This gives you the `ig` command in any terminal session. + +### Without a global install + +```bash +npx --package igniteui-cli igniteui new +``` + +This runs the CLI through `npx` instead of a global `ig` command. + +You can use **guided mode** if you want the CLI to walk you through the options: + +```bash +ig new +``` + +Matching `npx` form: + +```bash +npx --package igniteui-cli igniteui new +``` + +You can also use a direct command when you already know the project settings. + +For Angular: + +```bash +ig new my-app --framework=angular +``` + +Matching `npx` form: + +```bash +npx --package igniteui-cli igniteui new my-app --framework=angular +``` + +What happens next: + +- Ignite UI CLI creates the project structure +- the required project packages are installed +- for the CLI-first path, VS Code also gets an initial `.vscode/mcp.json` + +## Step 2: Connect CLI MCP and Theming MCP + +After the project is created, make sure both MCP servers are available in your AI client. + +### VS Code + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + }, + "igniteui-theming": { + "command": "npx", + "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] + } + } +} +``` + +After saving the configuration, reopen or restart the AI client and confirm that both `igniteui-cli` and `igniteui-theming` are available. + +## Step 3: Let the Assistant Review the Project + +Once both MCP servers are running, open a new chat and start by giving the assistant project-level context. + +Useful prompts: + +> _"Review this project and explain the current structure before we start adding features."_ + +> _"Tell me what was created, what the main entry points are, and where new pages should be added."_ + +What happens next: + +- CLI MCP inspects the generated or existing project +- the assistant summarizes the structure +- you now have a shared starting point for the next steps + +## Step 4: Add a Real Feature Through Chat + +After the project structure is clear, ask for a concrete feature. + +Example prompt: + +> _"Add an Orders page with a Ignite UI for Angular grid. Include columns for Order ID, Customer Name, Order Date, and Total Amount, and bind the grid to sample data."_ + +Follow-up prompt: + +> _"Enable filtering, sorting, and paging on the Orders grid, and keep the page layout consistent with the rest of the app."_ + +What happens next: + +- CLI MCP adds or updates the right page +- the assistant creates or updates the component code +- the feature is integrated into the existing app structure + +You can continue with smaller refinements: + +> _"Add a simple toolbar above the grid and keep the layout compact."_ + +## Step 5: Ask Documentation Questions in the Same Session + +You do not need to leave the conversation to look up component APIs. + +Example prompts: + +> _"What filtering options does the Angular grid support, and which ones are the best fit for a simple orders table?"_ + +> _"What events does the combo component expose, and which one should I use for selection changes?"_ + +> _"Which Ignite UI for Angular component is the best fit for a side navigation layout, and why?"_ + +What happens next: + +- CLI MCP answers the question using documentation-aware tools +- you can immediately follow with an implementation request + +For example: + +> _"Apply the recommended filtering approach to the current Orders grid."_ + +## Step 6: Apply a Custom Theme + +Once the app structure and main feature are in place, switch to Theming MCP in the same chat. + +Example prompt: + +> _"Apply a professional theme to the app. Use a deep blue primary color, a warm amber secondary color, and keep the spacing compact."_ + +What happens next: + +- Theming MCP generates the palette and theme configuration +- the assistant updates the right theme or styles files +- the app styling stays aligned with the current structure + +You can refine the theme further with more targeted prompts: + +> _"Make the grid header use the primary color, increase the row height slightly, and keep the rest of the page visually clean."_ + +> _"Show me the generated primary and secondary palette shades before you refine the grid styling."_ + +## Step 7: Continue Iterating + +The strongest part of this workflow is that you can keep moving between project work, documentation questions, and theming in one conversation. + +Example prompts: + +> _"Keep the current Orders page structure, but simplify the layout and make the filter area more compact."_ + +> _"Use the current theme, but make the dashboard cards and grid spacing more consistent with the rest of the app."_ + +> _"Review the generated files and explain the main project, component, and theme changes you made."_ + +What happens next: + +- CLI MCP handles project and component refinements +- Theming MCP handles theme and token refinements +- the assistant keeps the whole workflow connected end to end + +## Topic Takeaways + +The main pattern in this workflow is simple: + +- start with Ignite UI CLI first +- connect both MCP servers +- use CLI MCP to scaffold and extend the app +- use CLI MCP documentation queries when you need API clarity +- use Theming MCP to generate and refine the visual design + +This keeps project creation, component work, documentation lookups, and theming in one chat session instead of splitting them across multiple tools. + +## Related Topics + +- [Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md) +- [Ignite UI Theming MCP](~/components/ai/theming-mcp.md) +- [Ignite UI for Angular Skills](~/components/ai/skills.md) + +
+ +Our community is active and always welcoming to new ideas. + +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/general/how-to/general-how-to-mcp-overview.md b/en/components/general/how-to/general-how-to-mcp-overview.md deleted file mode 100644 index 7decddd6d9..0000000000 --- a/en/components/general/how-to/general-how-to-mcp-overview.md +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Ignite UI MCP Overview | Ignite UI for Angular | Infragistics -_description: Learn what Ignite UI MCP is and choose the right Angular MCP workflow topic to start with. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, AI, Ignite UI CLI MCP, Ignite UI Theming MCP ---- - -# Ignite UI CLI MCP Overview - -This topic is the quick entry point for Ignite UI MCP for Angular. - -Use it to understand what Ignite UI MCP is, how it fits into your editor or AI client, and which setup path to open next. - -## What Ignite UI MCP Is - -Ignite UI MCP is a set of MCP servers that make Ignite UI tools available to an AI assistant in a supported editor or chat experience. - -The main servers used in the current setup flows are: - -- `igniteui` for creating projects, modifying and editing existing projects, creating and changing components, and asking documentation questions -- `igniteui-theming` for theme and styling-related work - -Together, they help the assistant create an Angular project, continue setup work, support theming tasks, and answer product questions from chat. - -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. - -The exact setup flow can vary a little depending on your editor and AI client. - -## Before You Start - -Before you configure Ignite UI MCP, make sure you have: - -- Node.js installed so `npx` is available -- a supported editor or AI client with MCP support -- internet access for package resolution when the MCP servers start - -Some workflows also assume you already have an Angular project or that you want to create one in a new empty folder. - -## How the MCP Setup Works - -The Ignite UI MCP servers are started through `npx`. - -In practice, the setup is always the same at a high level: - -- add MCP configuration for your AI client -- point that configuration to the Ignite UI MCP servers -- let the client load the servers and expose their tools -- continue in chat or agent mode - -The server entries use a command and arguments similar to these: - -- `igniteui`: `npx -y igniteui-cli@next mcp` -- `igniteui-theming`: `npx -y igniteui-theming igniteui-theming-mcp` - -The `-y` flag tells `npx` to auto-confirm the package download prompt so the servers can start without manual intervention. - -## Editors and AI Clients - -Ignite UI MCP is not limited to one editor or one chat provider. - -You can use it with different combinations of editors and AI clients, as long as they support MCP. - -Common examples include: - -- **VS Code with GitHub Copilot** using a workspace-level `.vscode/mcp.json` -- **Cursor** using `.cursor/mcp.json` -- **Claude Desktop** using the desktop client MCP configuration file -- **Claude Code** using `.mcp.json` or the `claude mcp` command -- **JetBrains IDEs with AI Assistant** using the IDE MCP settings -- **Other MCP clients** using the same command and arguments through STDIO configuration - -In practice, the main differences are usually: - -- where the MCP configuration is stored -- how the client shows the available MCP tools -- whether you continue in chat, agent mode, or another AI panel - -The Ignite UI MCP servers stay the same even when the editor or chat experience changes. - -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use an external MCP configuration file and then work with the project you point them to. - -This overview keeps the client explanation short. The step-by-step topics below show the exact configuration locations and the exact JSON structure to use. - -## Available Starting Paths - -The current section includes three setup paths: - -- start from a completely empty folder and let MCP help create the Angular project -- create the Angular project with Ignite UI CLI first, then continue with MCP -- connect MCP to an Angular project that already exists and continue working in the current codebase - -The existing-project path can also be used when you want to ask documentation and API questions while working in the current app. - -Each topic repeats the essential setup details so it can be used on its own, even if you open it directly from search or navigation. - -## Open the Right Topic - -Use the short guide below to choose the best starting point: - -> **Start from an Empty Folder with MCP for Angular**: use this when you want MCP to help create the Angular project from the beginning. - -> **Create an Angular Project with Ignite UI CLI, then Continue with MCP**: use this when you want to create the Angular project first and use MCP after that. - -> **Use MCP in an Existing Angular Project**: use this when you already have an Angular project and want to connect MCP, continue working in the current codebase, and ask documentation or API questions. - -- [Start from an Empty Folder with MCP for Angular](general-how-to-start-mcp.md) - Use this when you want to begin with an empty workspace, add the MCP configuration for your AI client, and let the assistant help create the Angular project from the beginning. -- [Create an Angular Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) - Use this when you want to create the Angular project with Ignite UI CLI first and continue with the generated MCP setup after that. -- [Use MCP in an Existing Angular Project](general-how-to-use-mcp-existing-project.md) - Use this when you want to connect MCP to an existing Angular project, continue working in the current codebase, and ask documentation or API questions in chat. diff --git a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md b/en/components/general/how-to/general-how-to-start-mcp-cli-project.md deleted file mode 100644 index 1e5dd1188d..0000000000 --- a/en/components/general/how-to/general-how-to-start-mcp-cli-project.md +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: Create a Project with Ignite UI CLI, then Continue with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics -_description: Learn how to create a new Angular project with Ignite UI CLI, review the generated MCP configuration, and continue with MCP tools in a supported AI client. -_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI Theming MCP, AI ---- - -# Create a Project with Ignite UI CLI, then Continue with MCP - -This guide shows a CLI-first flow for Angular. You create the Angular project with Ignite UI CLI first, then continue with MCP using a supported editor or AI client. - -Before you begin, make sure Node.js is installed, `npm` can run, and you have internet access for package resolution. - -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. - -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. - -## Step 1: Choose How to Run Ignite UI CLI - -### Option 1: Install globally - -Run: - -```cmd -npm install -g igniteui-cli -``` - -Use this when you want the `ig` command available globally. - -### Option 2: Run with `npx` - -If your setup supports it, you can run Ignite UI CLI without installing it globally by using `npx`. - -Guided example: - -```cmd -npx --package igniteui-cli igniteui new -``` - -Direct command example: - -```cmd -npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty -``` - -This topic uses the global `ig` command in the main examples below. If you prefer not to install the CLI globally, you can use the matching `npx` form instead when supported by your setup. - -## Step 2: Create a New Empty Folder - -Create a new empty folder for your Angular project. - -Open a terminal in that folder. - -## Step 3: Create the Project - -You can create the project in either of these ways. - -### Guided mode - -Run: - -```cmd -ig new -``` - -Use this when you want the CLI to guide you through the available options. - -Matching `npx` form: - -```cmd -npx --package igniteui-cli igniteui new -``` - -### Direct command - -Run a full command when you already know the project settings. - -Use this form: - -```cmd -ig new my-app --framework=angular --type=[project-type] --template=[template] -``` - -Examples: - -```cmd -ig new my-app --framework=angular --type=igx-ts --template=base -ig new my-app --framework=angular --type=igx-ts --template=empty -ig new my-app --framework=angular --type=igx-ts --template=side-nav -ig new my-app --framework=angular --type=igx-ts --template=side-nav-auth -``` - -Matching `npx` examples: - -```cmd -npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=base -npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=empty -npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=side-nav -npx --package igniteui-cli igniteui new my-app --framework=angular --type=igx-ts --template=side-nav-auth -``` - -Common variants include: - -- `--framework=angular` -- `--template=base` for a project structure with routing -- `--template=empty` for an empty project structure with routing and home page -- `--template=side-nav` for a project with side navigation -- `--template=side-nav-auth` for a side navigation project with authentication -- `--type=igx-ts` for Angular projects that use standalone components by default -- `--type=igx-ts-legacy` for Angular projects that use module-based bootstrapping - -For more project templates and CLI command details, see the [Ignite UI CLI](../cli-overview.md) topic. - -## Step 4: Complete the Guided CLI Setup - -This step applies only if you used the guided `ig new` flow. - -Complete the prompts in the CLI. - -The exact prompts depend on the platform. - -Use the short flow below: - -- project name -- framework -- project type when applicable -- template -- theme when offered -- add a component or view, or complete the setup -- install and run option when offered - -After the last prompt, the CLI creates the project and installs everything needed to run it. - -## Step 5: Review the MCP Configuration - -After the project is created, review the MCP configuration for your AI client. - -If you are using VS Code, open `.vscode/mcp.json`. - -If you are using another AI client, add the equivalent MCP configuration in that client's location: - -- **Cursor**: `.cursor/mcp.json` -- **Claude Desktop**: - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` -- **Claude Code**: `.mcp.json` -- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** -- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration - -Make sure the configuration contains the required Ignite UI MCP servers. - -### VS Code - -```json -{ - "servers": { - "igniteui": { - "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] - }, - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } -} -``` - -### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients - -```json -{ - "mcpServers": { - "igniteui": { - "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] - }, - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } -} -``` - -- `igniteui` starts the Ignite UI CLI MCP server -- `igniteui-theming` starts the Ignite UI theming MCP server - -What you should see next: your AI client configuration contains the required Ignite UI MCP servers. - -## Step 6: Open the Project in Your Editor or AI Client - -If you are using an editor-based client, open the generated Angular project folder there. - -If you are using a desktop or chat-first client, make the generated Angular project available as the project context you want to work with. - -The client should detect the MCP configuration from the appropriate file or settings location. - -## Step 7: Confirm the MCP Servers and Tools Are Available - -Open chat, agent mode, or the MCP tools view in your AI client. - -Check the available tools. - -You should see the MCP servers and their tools, including: - -- `igniteui` -- `igniteui-theming` - -What you should see next: all MCP servers are available and there are no startup errors. - -Client-specific checks: - -- **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode -- **Cursor**: open a new chat session and check the available MCP tools -- **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area -- **Claude Code**: use the `/mcp` command to confirm the server is connected -- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** - -## Step 8: Start Prompting - -Once the tools are available, you can continue with prompts to build or refine the Angular application. - -## Troubleshooting - -**`ig` does not run** - -Make sure Ignite UI CLI is installed globally and available in the terminal. - -**The project is created but MCP tools do not appear** - -Reload the workspace, reopen the project, or restart the AI client. - -**One server does not start** - -Check that the MCP configuration content matches the example exactly. - -## Next Steps - -Now that the Angular project is created and the MCP tools are available, you can use chat to continue building on top of the existing app. - -Typical next actions include: - -- adding or changing pages and features -- updating theme and styling -- refining generated code -- asking for help with Angular components and configuration - -## Related Topics - -This guide covers the CLI-first flow for Angular. If you want the assistant to start from a completely empty folder and create the Angular project from the beginning through MCP, see the [Start from an Empty Folder with MCP](general-how-to-start-mcp.md) topic. - -If you already have an Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). - -If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). - -For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). diff --git a/en/components/general/how-to/general-how-to-start-mcp.md b/en/components/general/how-to/general-how-to-start-mcp.md deleted file mode 100644 index 045d9d65b9..0000000000 --- a/en/components/general/how-to/general-how-to-start-mcp.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Start from an Empty Folder with Ignite UI CLI MCP | Ignite UI for Angular | Infragistics -_description: Learn how to start from an empty folder, add the Ignite UI MCP configuration, verify the tools, and create a new Angular project through chat. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI ---- - -# Start from an Empty Folder with MCP - -This guide shows the cleanest MCP-first flow for Angular. You start from a completely empty folder, add the Ignite UI MCP configuration, and then continue in chat to create the Angular project from the beginning. - -The goal is simple: get the MCP servers running in a new workspace so the assistant can help you create and shape the Angular project through prompts. - -Before you begin, make sure Node.js is installed, `npx` can run, and you have internet access for package resolution. - -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. - -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. - -## Step 1: Create a New Empty Folder - -Create a new empty folder for your Angular project. - -If you are using an editor-based client, open that folder there. - -If you are using a desktop or chat-first client, keep the folder available as the project context you want to work with. - -## Step 2: Create the MCP Configuration File - -Create the MCP configuration file that matches your AI client. - -Use one of these locations: - -- **VS Code**: `.vscode/mcp.json` -- **Cursor**: `.cursor/mcp.json` -- **Claude Desktop**: - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` -- **Claude Code**: `.mcp.json` -- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** -- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration - -For example, in VS Code your folder structure should look like this: - -```text -your-project/ - .vscode/ - mcp.json -``` - -What you should see next: the MCP configuration file is present in the correct location for your AI client. - -## Step 3: Add the MCP Configuration - -Add both Ignite UI MCP servers to that configuration. - -Use the JSON structure that matches your AI client. - -### VS Code - -```json -{ - "servers": { - "igniteui": { - "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] - }, - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } -} -``` - -### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients - -```json -{ - "mcpServers": { - "igniteui": { - "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] - }, - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } -} -``` - -- `igniteui` starts the Ignite UI CLI MCP server -- `igniteui-theming` starts the Ignite UI theming MCP server - -## Step 4: Let the Workspace Load the MCP Servers - -After you save the MCP configuration, your editor or AI client may detect the MCP servers automatically. - -If the tools do not appear immediately, reload or reopen the workspace or restart the client. - -What you should see next: the client recognizes the MCP configuration and starts loading the available tools. - -## Step 5: Confirm the MCP Tools Are Available - -Open chat, agent mode, or the MCP tools view in your AI client. - -Check the available MCP tools. - -You should see the Ignite UI MCP servers and their tools, including: - -- `igniteui` -- `igniteui-theming` - -What you should see next: both MCP servers are available and there are no startup errors. - -Client-specific checks: - -- **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode -- **Cursor**: open a new chat session and check the available MCP tools -- **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area -- **Claude Code**: use the `/mcp` command to confirm the server is connected -- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** - -## Step 6: Start Prompting to Create the Angular Project - -Once the tools are available, continue in chat and ask the assistant to create the Angular project in the current folder. - -## Troubleshooting - -**`npx` does not work** - -Make sure Node.js is installed and available in the terminal. - -**The MCP tools do not appear** - -Reload the workspace, reopen the editor, or restart the AI client after creating the MCP configuration file. - -**One server does not start** - -Check that the MCP configuration content matches the example exactly. - -**The folder was not empty** - -This guide assumes a fresh workspace with no project files yet. - -## Next Steps - -Now that the MCP servers are available, you can use chat to create the Angular project and continue shaping it. - -Typical next actions include: - -- creating the initial application in the current folder -- choosing the Angular project structure through prompts -- applying theming changes -- continuing with component, layout, or setup tasks - -## Related Topics - -This guide covers the empty-folder MCP-first flow for Angular. If you prefer to create the Angular project with Ignite UI CLI first and continue with MCP after that, see the [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md) topic. - -If you already have an Angular project and want to connect MCP to the existing codebase, see [Use MCP in an Existing Project](general-how-to-use-mcp-existing-project.md). - -If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). - -For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). diff --git a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md b/en/components/general/how-to/general-how-to-use-mcp-existing-project.md deleted file mode 100644 index 729f2fcd64..0000000000 --- a/en/components/general/how-to/general-how-to-use-mcp-existing-project.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Use Ignite UI CLI MCP in an Existing Project | Ignite UI for Angular | Infragistics -_description: Learn how to add Ignite UI MCP to an existing Angular project, verify the tools, continue working in the current codebase, and use MCP to ask documentation and API questions. -_keywords: Angular, Ignite UI for Angular, Infragistics, MCP, Model Context Protocol, Ignite UI MCP, Ignite UI CLI MCP, Ignite UI Theming MCP, AI, documentation, API ---- - -# Use MCP in an Existing Project - -This guide shows how to connect Ignite UI MCP to an Angular project that already exists and continue working in the current codebase. - -It also shows how to use MCP in chat to ask documentation questions about Angular components, configuration, and available API members. - -Before you begin, make sure Node.js is installed, `npx` can run, and you have internet access for package resolution. - -Supported AI clients can include VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains IDEs with AI Assistant, and other MCP-compatible clients. - -Editor-based clients usually open the project folder directly. Desktop or chat-first clients may use external MCP configuration and then work with the project context you provide. - -## Step 1: Open the Existing Angular Project - -If you are using an editor-based client, open the existing Angular project there. - -If you are using a desktop or chat-first client, keep the existing Angular project available as the project context you want to work with. - -Make sure you are working in the project root. - -## Step 2: Create the MCP Configuration File - -Create the MCP configuration file that matches your AI client. - -Use one of these locations: - -- **VS Code**: `.vscode/mcp.json` -- **Cursor**: `.cursor/mcp.json` -- **Claude Desktop**: - **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` - **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` -- **Claude Code**: `.mcp.json` -- **JetBrains IDEs**: configure MCP in **Tools -> AI Assistant -> Model Context Protocol (MCP)** -- **Other MCP clients**: use the same command and arguments with the client's STDIO MCP configuration - -What you should see next: the MCP configuration file is present in the correct location for your AI client. - -## Step 3: Add the MCP Configuration - -Add both Ignite UI MCP servers to that configuration. - -Use the JSON structure that matches your AI client. - -### VS Code - -```json -{ - "servers": { - "igniteui": { - "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] - }, - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } -} -``` - -### Cursor, Claude Desktop, Claude Code, JetBrains, and Other MCP Clients - -```json -{ - "mcpServers": { - "igniteui": { - "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] - }, - "igniteui-theming": { - "command": "npx", - "args": ["-y", "igniteui-theming", "igniteui-theming-mcp"] - } - } -} -``` - -- `igniteui` starts the Ignite UI CLI MCP server -- `igniteui-theming` starts the Ignite UI theming MCP server - -## Step 4: Let the MCP Servers Load - -After you save the MCP configuration, your editor or AI client may detect the MCP servers automatically. - -If the tools do not appear immediately, reload or reopen the workspace or restart the client. - -What you should see next: the workspace recognizes the MCP configuration and starts loading the available tools. - -## Step 5: Confirm the MCP Tools Are Available - -Open chat, agent mode, or the MCP tools view in your AI client. - -Check the available MCP tools. - -You should see the Ignite UI MCP servers and their tools, including: - -- `igniteui` -- `igniteui-theming` - -What you should see next: both MCP servers are available and there are no startup errors. - -Client-specific checks: - -- **VS Code with GitHub Copilot**: open Copilot Chat and switch to **Agent** mode -- **Cursor**: open a new chat session and check the available MCP tools -- **Claude Desktop**: restart the app and look for the MCP indicator in the chat input area -- **Claude Code**: use the `/mcp` command to confirm the server is connected -- **JetBrains IDEs**: review the MCP connection in **Tools -> AI Assistant -> Model Context Protocol (MCP)** - -## Step 6: Continue Working in the Existing Angular Project - -Once the tools are available, continue in chat and ask the assistant to work with the current Angular project instead of creating a new one. - -Typical next actions include: - -- reviewing the existing project structure -- adding or changing pages and features -- updating theme and styling -- refining code in the current codebase - -## Step 7: Use MCP to Ask Documentation Questions - -You can also use chat to ask questions about Angular documentation while working in the existing project. - -The `igniteui` MCP server can help you continue working in the current codebase, make project and component changes, and ask documentation questions about Angular components, features, and API members. - -Typical documentation questions include: - -- which component fits a specific scenario -- how to configure a feature in a component -- which properties, events, or methods are available -- how a specific API member is used -- what examples or patterns are recommended for a component - -You can ask in plain language and continue the conversation based on the answers the assistant gives you. - -Example questions: - -> _"What properties does the grid support for filtering?"_ - -> _"What events does this component expose?"_ - -> _"Show me the available methods for this component."_ - -## Troubleshooting - -**`npx` does not work** - -Make sure Node.js is installed and available in the terminal. - -**The MCP tools do not appear** - -Reload the workspace, reopen the editor, or restart the AI client after creating the MCP configuration file. - -**One server does not start** - -Check that the MCP configuration content matches the example exactly. - -**The project is very large** - -Start with a narrow request so the assistant can inspect the relevant area of the codebase first. - -## Next Steps - -Now that MCP is connected to your existing Angular project, you can use chat to continue building, refactoring, and asking product questions without starting from scratch. - -Typical next actions include: - -- asking the assistant to inspect and explain the current codebase -- changing features in the existing app -- asking for component and API guidance from the documentation -- applying theming changes with the theming MCP server - -## Related Topics - -If you want to start from a completely empty folder instead, see [Start from an Empty Folder with MCP](general-how-to-start-mcp.md). - -If you want to create the Angular project with Ignite UI CLI first and continue after that, see [Create a Project with Ignite UI CLI, then Continue with MCP](general-how-to-start-mcp-cli-project.md). - -If you want a short overview of the available MCP setup paths first, see [Ignite UI MCP Overview](general-how-to-mcp-overview.md). - -For more information about AI skills and theming workflows, see [Angular Agent Skills](../../ai/skills.md) and [Ignite UI Theming MCP](../../ai/theming-mcp.md). diff --git a/en/components/toc.yml b/en/components/toc.yml index 914bc13bbd..9e28512a86 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -61,17 +61,8 @@ - name: Use Standalone Components href: general/how-to/how-to-use-standalone-components.md updated: false - - name: Ignite UI CLI MCP Overview - href: general/how-to/general-how-to-mcp-overview.md - new: true - - name: Start from an Empty Folder with MCP - href: general/how-to/general-how-to-start-mcp.md - new: true - - name: Create a Project with Ignite UI CLI, then Continue with MCP - href: general/how-to/general-how-to-start-mcp-cli-project.md - new: true - - name: Use MCP in an Existing Project - href: general/how-to/general-how-to-use-mcp-existing-project.md + - name: Build App with CLI MCP and Theming MCP + href: general/how-to/general-how-to-mcp-e2e.md new: true - name: Angular Schematics & Ignite UI CLI href: general/cli-overview.md From c4cbcfbee15e9e9a05e81278f350e3a6be876dec Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Mon, 6 Apr 2026 15:37:14 +0300 Subject: [PATCH 23/28] feat: list available tools --- .../general/how-to/general-how-to-mcp-e2e.md | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/en/components/general/how-to/general-how-to-mcp-e2e.md b/en/components/general/how-to/general-how-to-mcp-e2e.md index 06c14c1f69..2482ff9f3a 100644 --- a/en/components/general/how-to/general-how-to-mcp-e2e.md +++ b/en/components/general/how-to/general-how-to-mcp-e2e.md @@ -37,6 +37,28 @@ This walkthrough works best with a **CLI-first** setup because Ignite UI CLI sca If you still need the detailed setup reference for each client, see [Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md) and [Ignite UI Theming MCP](~/components/ai/theming-mcp.md). +## Available Tools + +The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never call these tools directly. Describe what you want in chat, and the assistant picks the right one. This table is here so you know what's available before you start. + +To get the live list with current parameters, ask: + +> _"What tools does the Ignite UI CLI MCP provide?"_ + +Here is a brief overview of each tool: + +| Tool | Description | +| :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). | | +| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | +| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | +| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | +| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. | +| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. | + +> [!NOTE] +> Framework detection uses component prefixes: `Igx` for Angular, `Igr` for React, `Igc` for Web Components, `Igb` for Blazor. The assistant picks up the right framework automatically from your open files or prompt context. + ## Step 1: Start with Ignite UI CLI The recommended starting point is to create the project with Ignite UI CLI first. From 822698f070f63fca532ded1b580f6b4dab64295d Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Mon, 6 Apr 2026 15:41:35 +0300 Subject: [PATCH 24/28] docs(mcp): remove available tools section from end-to-end workflow topic --- .../general/how-to/general-how-to-mcp-e2e.md | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/en/components/general/how-to/general-how-to-mcp-e2e.md b/en/components/general/how-to/general-how-to-mcp-e2e.md index 2482ff9f3a..06c14c1f69 100644 --- a/en/components/general/how-to/general-how-to-mcp-e2e.md +++ b/en/components/general/how-to/general-how-to-mcp-e2e.md @@ -37,28 +37,6 @@ This walkthrough works best with a **CLI-first** setup because Ignite UI CLI sca If you still need the detailed setup reference for each client, see [Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md) and [Ignite UI Theming MCP](~/components/ai/theming-mcp.md). -## Available Tools - -The MCP server exposes a set of tools that the AI uses automatically based on your prompts. You never call these tools directly. Describe what you want in chat, and the assistant picks the right one. This table is here so you know what's available before you start. - -To get the live list with current parameters, ask: - -> _"What tools does the Ignite UI CLI MCP provide?"_ - -Here is a brief overview of each tool: - -| Tool | Description | -| :------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `list_components` | Lists available Ignite UI component docs for a framework. Accepts an optional keyword filter (case-insensitive substring match against name, keywords, and summary). | | -| `get_doc` | Gets the full markdown content of a specific component doc by kebab-case name (e.g., `grid-editing`, `combo-overview`). Includes code samples, tables, and links. | -| `search_docs` | Full-text search across Ignite UI docs for a framework. Returns up to 20 ranked results with excerpts. | -| `get_project_setup_guide` | Returns the project setup guide for creating a new project in a specific framework, including CLI steps and install instructions. | -| `search_api` | Searches API entries by keyword or component name across Angular, React, and Web Components. | -| `get_api_reference` | Returns the full API reference for a specific component or class, including properties, methods, and events. Supports Angular, React, and Web Components. | - -> [!NOTE] -> Framework detection uses component prefixes: `Igx` for Angular, `Igr` for React, `Igc` for Web Components, `Igb` for Blazor. The assistant picks up the right framework automatically from your open files or prompt context. - ## Step 1: Start with Ignite UI CLI The recommended starting point is to create the project with Ignite UI CLI first. From e591a6d4052db472cae3ad9c8c119d1f166a01ad Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Mon, 6 Apr 2026 17:21:06 +0300 Subject: [PATCH 25/28] docs(how-to): enhance end-to-end workflow topic --- .../general/how-to/general-how-to-mcp-e2e.md | 46 ++++++++++--------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/en/components/general/how-to/general-how-to-mcp-e2e.md b/en/components/general/how-to/general-how-to-mcp-e2e.md index 06c14c1f69..3379fbb431 100644 --- a/en/components/general/how-to/general-how-to-mcp-e2e.md +++ b/en/components/general/how-to/general-how-to-mcp-e2e.md @@ -6,23 +6,25 @@ _keywords: "Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ign # Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP -

Ignite UI CLI MCP and Ignite UI Theming MCP work together to let an AI assistant scaffold, extend, and theme a Ignite UI for Angular application through chat prompts. CLI MCP handles project creation, component work, and documentation questions. Theming MCP handles palettes, themes, tokens, and styling workflows. This topic shows the full process in one clear flow.

+

Ignite UI CLI MCP and Ignite UI Theming MCP work together to let an AI assistant scaffold, extend, and theme an Ignite UI for Angular application through chat prompts. CLI MCP handles project creation, component work, and documentation questions. Theming MCP handles palettes, themes, tokens, and styling workflows. This topic shows the full process in one clear flow.

-## Overview - -This topic is the main end-to-end workflow topic for MCP. - -It shows how the process works from start to finish: - -- begin with a CLI-first project setup -- connect CLI MCP and Theming MCP -- continue in chat to build the app -- ask documentation and API questions during development -- apply and refine a custom theme - -Neither server executes steps autonomously. The AI assistant invokes the MCP tools in response to your prompts. Both servers require MCP clients that support STDIO transport. +## How CLI MCP and Theming MCP Divide Responsibilities + +CLI MCP and Theming MCP are two separate STDIO-transport MCP servers with distinct, non-overlapping responsibilities in an Ignite UI for Angular development workflow. + +| Concern | Server | +| ------------------------------------------------ | ----------- | +| Create and scaffold project structure | CLI MCP | +| Add or update Ignite UI for Angular components | CLI MCP | +| Query component APIs and documentation | CLI MCP | +| Generate color palettes and shade variations | Theming MCP | +| Create and apply global theme configurations | Theming MCP | +| Generate component-level design tokens | Theming MCP | +| Adjust spacing, sizing, and border-radius | Theming MCP | + +Neither server executes steps autonomously - the AI assistant invokes MCP tools only in response to your prompts. CLI MCP does not generate or modify theme or Sass files. Theming MCP does not scaffold components, modify application logic, or answer documentation questions. Both servers require an MCP client that supports STDIO transport; they cannot be used from a browser-only chat interface. ## What You Need @@ -153,7 +155,7 @@ After the project structure is clear, ask for a concrete feature. Example prompt: -> _"Add an Orders page with a Ignite UI for Angular grid. Include columns for Order ID, Customer Name, Order Date, and Total Amount, and bind the grid to sample data."_ +> _"Add an Orders page with an Ignite UI for Angular grid. Include columns for Order ID, Customer Name, Order Date, and Total Amount, and bind the grid to sample data."_ Follow-up prompt: @@ -230,15 +232,15 @@ What happens next: ## Topic Takeaways -The main pattern in this workflow is simple: +This workflow works well when you want to keep project setup, component work, documentation lookups, and theming in one chat session. + +Use it when: -- start with Ignite UI CLI first -- connect both MCP servers -- use CLI MCP to scaffold and extend the app -- use CLI MCP documentation queries when you need API clarity -- use Theming MCP to generate and refine the visual design +- you want to start from a real project scaffold instead of isolated code snippets +- you expect to alternate between implementation and documentation questions +- you want project structure and visual styling to evolve together -This keeps project creation, component work, documentation lookups, and theming in one chat session instead of splitting them across multiple tools. +In practice, the most effective pattern is to use CLI MCP for project and component changes, pause for documentation questions when needed, and then use Theming MCP to refine the result without leaving the same conversation. ## Related Topics From 1e9e20bb998f53548b09e3b487d9467fe41627ed Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Mon, 6 Apr 2026 17:25:24 +0300 Subject: [PATCH 26/28] docs(how-to): clean up formatting --- en/components/general/how-to/general-how-to-mcp-e2e.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/components/general/how-to/general-how-to-mcp-e2e.md b/en/components/general/how-to/general-how-to-mcp-e2e.md index 3379fbb431..a55b18b919 100644 --- a/en/components/general/how-to/general-how-to-mcp-e2e.md +++ b/en/components/general/how-to/general-how-to-mcp-e2e.md @@ -11,9 +11,9 @@ _keywords: "Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ign
## How CLI MCP and Theming MCP Divide Responsibilities - + CLI MCP and Theming MCP are two separate STDIO-transport MCP servers with distinct, non-overlapping responsibilities in an Ignite UI for Angular development workflow. - + | Concern | Server | | ------------------------------------------------ | ----------- | | Create and scaffold project structure | CLI MCP | @@ -23,7 +23,7 @@ CLI MCP and Theming MCP are two separate STDIO-transport MCP servers with distin | Create and apply global theme configurations | Theming MCP | | Generate component-level design tokens | Theming MCP | | Adjust spacing, sizing, and border-radius | Theming MCP | - + Neither server executes steps autonomously - the AI assistant invokes MCP tools only in response to your prompts. CLI MCP does not generate or modify theme or Sass files. Theming MCP does not scaffold components, modify application logic, or answer documentation questions. Both servers require an MCP client that supports STDIO transport; they cannot be used from a browser-only chat interface. ## What You Need From 4f270ccec98769e02aaf8cd83a0183a90f2267db Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Tue, 7 Apr 2026 09:38:55 +0300 Subject: [PATCH 27/28] docs(how-to): remove quotes from title, description, and keywords --- en/components/general/how-to/general-how-to-mcp-e2e.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/en/components/general/how-to/general-how-to-mcp-e2e.md b/en/components/general/how-to/general-how-to-mcp-e2e.md index a55b18b919..9f75dacd36 100644 --- a/en/components/general/how-to/general-how-to-mcp-e2e.md +++ b/en/components/general/how-to/general-how-to-mcp-e2e.md @@ -1,7 +1,7 @@ --- -title: "Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP - Ignite UI for Angular" -_description: "Follow an end-to-end Ignite UI for Angular workflow with Ignite UI CLI MCP and Ignite UI Theming MCP: start CLI-first, connect both MCP servers, create or extend the app through chat, ask documentation questions, and apply a custom theme." -_keywords: "Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, workflow, theming, prompt" +title: Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP - Ignite UI for Angular +_description: Follow an end-to-end Ignite UI for Angular workflow with Ignite UI CLI MCP and Ignite UI Theming MCP: start CLI-first, connect both MCP servers, create or extend the app through chat, ask documentation questions, and apply a custom theme. +_keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, workflow, theming, prompt --- # Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP From ddc816bab8cc048e5c8a8a186117540a8b6b96f5 Mon Sep 17 00:00:00 2001 From: georgianastasov Date: Tue, 7 Apr 2026 09:51:29 +0300 Subject: [PATCH 28/28] docs(how-to): remove colon from description for clarity --- en/components/general/how-to/general-how-to-mcp-e2e.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/how-to/general-how-to-mcp-e2e.md b/en/components/general/how-to/general-how-to-mcp-e2e.md index 9f75dacd36..53bde96967 100644 --- a/en/components/general/how-to/general-how-to-mcp-e2e.md +++ b/en/components/general/how-to/general-how-to-mcp-e2e.md @@ -1,6 +1,6 @@ --- title: Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP - Ignite UI for Angular -_description: Follow an end-to-end Ignite UI for Angular workflow with Ignite UI CLI MCP and Ignite UI Theming MCP: start CLI-first, connect both MCP servers, create or extend the app through chat, ask documentation questions, and apply a custom theme. +_description: Follow an end-to-end Ignite UI for Angular workflow with Ignite UI CLI MCP and Ignite UI Theming MCP start CLI-first, connect both MCP servers, create or extend the app through chat, ask documentation questions, and apply a custom theme. _keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignite UI Theming MCP, MCP, Model Context Protocol, AI, workflow, theming, prompt ---