Getting Started with Ignite UI for Angular Schematics

The Ignite UI for Angular Schematics collection is a set of Angular CLI schematics for scaffolding Angular projects and component views pre-configured for Ignite UI for Angular. It integrates into the native Angular CLI workflow - use it with ng new for project creation and ng g for component scaffolding, without installing a separate global tool. The collection is distributed as the @igniteui/angular-schematics package and is added automatically when you run ng add igniteui-angular on an existing Angular project.

The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via npx -y igniteui-cli mcp, where -y avoids the interactive npx confirmation prompt. The ai-config schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the Getting Started guide.

Install the Schematics Collection

Install @igniteui/angular-schematics globally using npm:

npm i -g @igniteui/angular-schematics

Or, using yarn:

yarn global add @igniteui/angular-schematics

After a global install, the collection is available as the --collection argument to ng new. If you already have an Angular project and want to add Ignite UI for Angular without scaffolding a new one, use:

ng add igniteui-angular

This installs the igniteui-angular package, registers the @igniteui/angular-schematics collection, and configures dependencies, styles, and theme imports automatically.

Create a New Project

The Schematics collection provides two modes for project creation: a guided interactive wizard and a direct ng new command with explicit arguments.

Use the guided wizard

The guided wizard is the recommended starting point for new projects. Activate it with:

ng new --collection="@igniteui/angular-schematics"

For a step-by-step walkthrough of the wizard options, see Step-by-Step Guide Using Ignite UI for Angular Schematics.

Create a project directly

To create an Angular project non-interactively, provide the collection and template arguments to ng new:

ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav

By default, the project uses standalone components. To use NgModule-based bootstrapping instead, add --type=igx-ts-legacy:

ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy

The project is created in a directory named after the project. The following base project templates are available:

When using the interactive wizard, selecting side-nav or side-nav-mini triggers an additional prompt asking whether to add authentication. The following template IDs are generated and can also be used directly with ng new for non-interactive creation - they are not shown in the wizard’s template list:

The following arguments are available when creating a project:

Add a Component Template

To add an available Ignite UI for Angular template to an existing project, use ng generate with the Ignite UI for Angular collection and the component schematic, providing the template ID and a name for the new component:

ng g @igniteui/angular-schematics:component grid newGrid

Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with ng add. For the guided component wizard, see Step-by-Step Guide Using Ignite UI for Angular Schematics.

The following arguments are available when adding a template:

Run the Application

The start schematic builds the application, starts a local web server, and opens it in your default browser:

ng g @igniteui/angular-schematics:start

AI Assistant Integration

The Ignite UI for Angular Schematics collection includes an ai-config schematic that sets up AI coding assistant integration for your project. In a single command, it:

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

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

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

Flags Reference

Supported Coding Assistants

Supported AI Agents

Usage Examples

Interactive - prompts for coding assistants, then agents:

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

Non-interactive - specify both assistants and agents:

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

Skip MCP configuration only:

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

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

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

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

MCP Server Configuration

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

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

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

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

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

Skill Files

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

Using the Ignite UI CLI Instead

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

ig ai-config

For full setup instructions across all AI clients and Agent Skills wiring, see Ignite UI CLI MCP.