Close
Angular React Web Components Blazor

AI-Assisted Development
Agent Workflow
Ignite UI for Angular Skills
CLI MCP
Theming MCP
Maker Framework
General
Angular: A Complete Guide
Angular Schematics & Ignite UI CLI
Overview
Getting Started with Ignite UI for Angular Schematics
Step by Step guide using Ignite UI for Angular Schematics
Getting Started with Ignite UI CLI
Step by Step guide using Ignite UI CLI
Templates
Authentication Project Template
Data Analysis
Data Visualization Changelog
Getting started
How to
Build Real-time SignalR App with .NET Core
Angular Reactive Forms
Build CRUD operations with IgxGrid
Customize and Optimize Themes
Use Standalone Components
Build App with CLI MCP and Theming MCP
Licensing
Localization (i18n)
Multiple Entry Points
Open-Source vs Premium
Server-side rendering (SSR)
Update guide
WPF to Angular guide
Overview
Create your first Angular app
Create your UI with Angular components
One-Way Binding
Two-Way Binding
Angular Events
Transforming Data with Angular Pipes
Structural Directives in Angular
Layout Elements
Interactivity
RTL Support
Accessibility Compliance
Grids & Lists
Overview
Data Grid
Overview
Cell Merging
Clipboard Interactions
Collapsible Column Groups
Column Data Types
Column Hiding
Column Moving
Column Pinning
Column Resizing
Conditional Styling
Editing
Overview
Cell Editing
Row Editing
Row Adding
Batch Editing
Validation
Grid with Cascading combos
Export services
Filtering
Overview
Excel Style Filtering
Advanced Filtering
Group By
Keyboard navigation
Live Data / Real-Time
Master-Detail Grid
Multi-column Headers
Multi-row Layout
Paging
Paste from Excel
Remote Data Operations
Row Actions
Row Drag
Row Pinning
Searching
Selection
Overview
Row selection
Cell selection
Selection-based Aggregates
Column Selection
Size
Sizing
Sorting
State Persistence
Summaries
Toolbar
Virtualization and performance
Tree Grid
Overview
Cell Merging
Clipboard Interactions
Collapsible Column Groups
Column Data types
Column Hiding
Column Moving
Column Pinning
Column Resizing
Conditional Styling
Editing
Overview
Cell Editing
Row Editing
Row Adding
Batch Editing
Validation
Export services
Filtering
Overview
Excel Style Filtering
Advanced Filtering
Group By
Keyboard navigation
Live Data / Real-Time
Load On Demand
Multi-column Headers
Paging
Remote Data Operations
Row Actions
Row Drag
Row Pinning
Searching
Selection
Overview
Row selection
Cell selection
Column Selection
Size
Sizing
Sorting
State Persistence
Summaries
Toolbar
Virtualization and performance
Hierarchical Grid
Overview
Cell Merging
Collapsible Column Groups
Column Data types
Column Hiding
Column Moving
Column Pinning
Column Resizing
Conditional Styling
Editing
Overview
Cell Editing
Row Editing
Row Adding
Batch Editing
Validation
Export services
Filtering
Overview
Excel Style Filtering
Advanced Filtering
Keyboard navigation
Load on Demand
Multi-column Headers
Paging
Remote Data Operations
Row Actions
Row Drag
Row Pinning
Selection
Overview
Row selection
Cell selection
Column Selection
Size
Sizing
Sorting
State Persistence
Summaries
Toolbar
Virtualization and performance
Pivot Grid
Overview
Export services
Pivot Grid Features
Pivot Grid Remote Operations
State Persistence
Grid Lite
Overview
Column Configuration
Overview
Cell Template
Header Template
Data Binding
Filtering Overview
Sorting
Styling & Theming
Tree
List View
Combo
Overview
Features
Remote Binding
Templates
Single Select ComboBox
Spreadsheet
Overview
Activation
Chart Adapter
Clipboard
Conditional Formatting
Configuring Spreadsheet
Commands
Data Validation
Hyperlinks
Excel Utility
Dashboards
Dashboard Tile
Charts
Overview
Area Chart
Bar Chart
Bubble Chart
Column Chart
Composite Chart
Data Pie Chart
Donut Chart
Financial / Stock Chart
Line Chart
Pie Chart
Point Chart
Polar Chart
Radial Chart
Scatter Chart
Shape Chart
Spline Chart
Sparkline Chart
Stacked Chart
Step Chart
Treemap
Chart API
Chart Features
Overview
Axis Gridlines
Axis Layouts
Axis Options
Axis Types
Chart Animations
Chart Annotations
Charting in Dashboards
Chart Data Aggregations
Chart Data Filtering
Chart Data Legend
Chart Data Annotations
Chart Data Tooltip
Chart Data Selection
Chart Highlight Filter
Chart Highlighting
Chart Markers
Chart Navigation
Chart Overlays
Chart Performance
Chart Synchronization
Chart Tooltips
Chart Trendlines
Chart User Annotations
Zoom Slider
Maps
Overview
Geographic Area Map
Geographic Contour Map
Geographic High Density Map
Geographic Bubble Map
Geographic Symbol Map
Geographic Polygon Map
Geographic Polyline Map
Geographic Map API
Geographic Map Features
Overview
Binding CSV File
Binding JSON File
Binding Data Model
Binding Shape File
Binding Multiple Shapes
Binding Multiple Sources
Displaying Azure Imagery
Displaying Bing Imagery
Displaying Esri Imagery
Displaying Heat Imagery
Displaying OSM Imagery
Navigating Map Content
Shape Files Reference
Shape Styling
Shape Styling Utility
World Connections
World Locations
World Utility
Frameworks
Excel Library
Overview
Using Cells
Using Tables
Using Workbooks
Using Worksheets
Working with Charts
Working with Sparklines
Excel Utility
Gauges
Bullet Graph
Linear Gauge
Radial Gauge
Styling & Themes
Overview
Palettes
Elevations
Typography
Roundness
Size
Spacing
Sass
Overview
Configuration
Palettes
Elevations
Typography
Schemas
Animations
Roundness
Global Themes
Component Themes
Predefined Themes
Material
Fluent
Bootstrap
Indigo
Misc
Using Tailwind Custom Classes
Printing styles
Angular Material Theming
Bootstrap Theming
Data Entry & Display
Autocomplete
Badge
Button
Button Group
Checkbox
Chip
Circular Progress
Color Editor
Divider
Drop Down
Overview
Virtual Drop Down
Multi-select Hierarchical Drop Down
Icon
Overview
Icon Service
Material Icons Extended
Icon Button
Input Group
Label & Input
Linear Progress
Mask
Paginator
Query Builder
Overview
Using Query Builder Model
Radio & Radio Group
Rating
Select
Switch
Text Highlight
Virtual For Directive
Interactions
Action Strip
Chat
Dialog Window
Drag and Drop
Overlay
Overview
Positioning Strategies
Scrolling Strategies
Styling
Ripple
Slider
Toggle
Tooltip
Zoom Slider
Menus
Navbar
Navigation Drawer
Toolbar
Layouts
Accordion
Avatar
Bottom Navigation
Card
Carousel
Dock Manager
Expansion Panel
Layout Manager
Splitter
Stepper
Tabs
Tile Manager
Notifications
Banner
Snackbar
Toast
Scheduling
Calendar
Date Picker
Date Range Picker
Date Time Editor
Month Picker
Time Picker
Services
CSV Exporter
Excel Exporter
PDF Exporter
Transaction Service
Overview
Transaction Service class hierarchy
How to use the Transaction Service

Getting Started with Ignite UI CLI

The Ignite UI CLI is a standalone global command-line tool for scaffolding Angular, React, and jQuery projects pre-configured for Ignite UI components. It provides a guided step-by-step wizard for first-time setup, non-interactive new and add commands for scripted workflows, a development server, and a built-in MCP server for connecting AI coding assistants to live Ignite UI documentation.

The CLI does not replace the Angular CLI - it works alongside it. Projects created with the Ignite UI CLI are standard Angular workspaces and are fully compatible with ng commands after scaffolding.

Install the Ignite UI CLI

Install the Ignite UI CLI globally using npm:

npm install -g igniteui-cli

Or, using yarn:

yarn global add igniteui-cli

Verify the installation:

ig version

Create a New Project

The Ignite UI CLI provides two modes for project creation: a guided interactive wizard and a direct command with arguments.

Use the guided wizard

The guided wizard is the recommended starting point for new projects. It prompts you to choose a project type, name, template, and theme, then scaffolds and commits the project automatically.

To activate the wizard:

ig

or:

ig new
Play video: Building Your First Ignite UI CLI App

Building Your First Ignite UI CLI App

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

Create a project directly

To create an Angular project non-interactively, provide angular as the framework and igx-ts as the project type:

ig new my-app --framework=angular --type=igx-ts --template=side-nav

You can also specify AI assistant and agent configuration during project creation:

ig new my-app --framework=angular --type=igx-ts --template=side-nav --assistants generic --agents claude copilot

To skip AI configuration entirely:

ig new my-app --framework=angular --type=igx-ts --assistants none --agents none

Sequence during ig new:

  1. Project files are generated
  2. AI configuration runs inside the new project directory (prompts for assistants and agents unless flags are provided)
  3. Git is initialized (unless --skip-git)
  4. Dependencies are installed (unless --skip-install)

As of Ignite UI CLI v13.1.0, the igx-ts project type generates a project with standalone components by default. To use NgModule-based bootstrapping instead, set --type=igx-ts-legacy.

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

Template IDDescription
emptyProject structure with routing and a home page. Authentication is not available for this template.
side-navProject structure with a side navigation drawer. Supports authentication as an add-on (see below).
side-nav-miniProject structure with a compact side navigation drawer. Supports authentication as an add-on (see below).

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 ig new for non-interactive creation - they are not shown in the wizard’s template list:

Template IDDescription
side-nav-authSide navigation extended with a user authentication module. See Angular Authentication Project Template for details.
side-nav-mini-authSide navigation mini extended with a user authentication module. See Angular Authentication Project Template for details.

The following arguments are available when creating a project:

name

name (alias: -n)

The name of the application. The application is created inside a directory with the same name.

framework (Ignite UI CLI only)

—framework (alias: -f) default value: “jquery”

Framework to set up the project for. Supported values are: jquery, angular, react.

type (Ignite UI CLI only)

—type (alias: -t)

The available project types depend on the selected framework.

theme

—theme (alias: -th)

Project theme (depends on project type).

skip-git

—skip-git (alias: —sg)

Skips automatic Git repository initialization. If omitted, the global skip-git configuration property is used.

skip-install

—skip-install (alias: —si)

Skips the initial npm package installation on project creation.

template

—template

Specifies the project template when multiple templates exist for a framework type. Currently available for Ignite UI for Angular igx-ts project types.

Add a Component Template

To add an available Ignite UI for Angular template to an existing project, provide the template ID and a name for the new component:

ig add grid newGrid

To list all available templates in your project directory:

ig list

Template addition is supported in projects created with the Ignite UI CLI, Angular Schematics, 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 CLI.

The following arguments are available when adding a template:

module

—module (alias: -m)

Applicable only in Angular projects.

Path to the module.ts file, relative to /src/app/, where the new component should be registered:

ig add combo newCombo —module=myModule/myModule.module.ts
skip-route

—skip-route (alias: -srk)

Skips auto-generation of an app navigation route for the new component.

Run the Application

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

ig start

AI Assistant Integration (MCP)

The Ignite UI CLI includes a built-in MCP (Model Context Protocol) server that connects AI coding assistants - GitHub Copilot, Claude, Cursor - to live Ignite UI component documentation and API references. Once configured, your AI assistant can query component APIs, retrieve setup guides, and generate accurate Ignite UI for Angular code without switching context.

If your project was created with ig new, the MCP configuration and Agent Skills are already generated during scaffolding. If you are working with an existing project, run ig ai-config from the project root to set up MCP servers, skill files, and instruction files in one step:

ig ai-config

The command supports multiple coding assistants and AI agents:

ig ai-config --assistants generic vscode --agents claude copilot
FlagValuesDefault
--assistantsgeneric, vscode, cursor, gemini, junie, nonePrompted interactively; generic in non-interactive mode
--agentsgeneric, claude, copilot, cursor, codex, windsurf, gemini, junie, nonePrompted interactively; generic + claude in non-interactive mode

When run without flags, ig ai-config enters interactive mode and prompts you to select coding assistants and agents using SPACE to toggle and ENTER to confirm. The prompts mirror the wizard steps during ig new:

  1. Choose coding assistants - select one or more targets for MCP server configuration (Generic, VS Code, Cursor, Gemini, Junie), or None to skip.
  2. Choose AI agents - select one or more agents for skill files and instruction files (Generic, Claude, Copilot, Cursor, Codex, Windsurf, Gemini, Junie), or None to skip.

Defaults in interactive mode are Generic for assistants and Generic + Claude for agents. For details on the wizard prompts, see Step-by-Step Guide Using Ignite UI CLI - Configure AI assistants.

If you want to configure your AI client manually, or use a client other than VS Code, start the MCP server directly:

ig mcp

For client configuration (VS Code, Claude Desktop, Cursor, and others) and a full description of available tools, see Ignite UI CLI MCP.

Ignite UI CLI Commands

A complete list of available Ignite UI CLI commands is maintained on the Ignite UI CLI wiki:

CommandAliasDescription
ig startBuilds the application, starts a web server, and opens it in the default browser.
ig buildBuilds the application into an output directory.
ig generategGenerates a new custom template for supported frameworks and project types.
ig help-hLists available commands with brief descriptions.
ig configReads and writes Ignite UI CLI configuration settings.
ig docSearches the Infragistics knowledge base for a given term.
ig listlLists all templates for the specified framework and type. When run inside a project folder, lists templates for the project’s framework and type even if different values are provided as arguments.
ig testExecutes the tests for the current project.
ig version-vShows the Ignite UI CLI version installed locally, or globally if no local installation is found.
ig mcpStarts the Ignite UI MCP server, providing component documentation search and API reference tools to connected AI assistants. See Ignite UI CLI MCP.
ig ai-configSets up AI coding assistant integration - configures MCP servers, copies skill files, and populates instruction files for your chosen assistants and agents.