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 framework, project type, template, and theme, then scaffolds and commits the project automatically.

To activate the wizard, run:

ig

or:

ig new

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 a Web Components project non-interactively, provide webcomponents as the framework and igc-ts as the project type:

ig new <project-name> --framework=webcomponents --type=igc-ts --template=side-nav

The following project templates are available for Web Components:

Template ID	Descrição
empty	Minimal project structure with no predefined views
base	Project structure with a home page
side-nav	Project structure with a side navigation drawer

The following arguments are available when creating a project:

Argument	Cognome	Descrição
name	-n	The name of the application. The application is created inside a directory with the same name.
--framework	-f	The framework for the generated project. Default: jquery. Supported: jquery, angular, react, webcomponents.
--type	-t	The project type for the selected framework. Use igr-ts for React or igc-ts for Web Components.
--template		The project template to use. See the template tables above for available options per framework.
--skip-git	--sg	Skips automatic Git repository initialization. Uses the global skip-git config value if omitted.
--skip-install	--si	Skips npm package installation on project creation.

Add a Component Template

Once you have created a project, you can add additional component views at any point. Running ig add without arguments launches an interactive template browser:

ig add

To add a specific component template directly, provide the template ID and a name for the new component:

ig add [component-template] [component-name]

For example, to add a data grid component named MyGrid:

ig add grid MyGrid

To list all available templates in the current project:

ig list

For a guided walkthrough of the component addition wizard, see Step-by-Step Guide Using Ignite UI CLI.

Note

Your routing file will be updated with the path to the newly generated page. For example, a component named MyGrid will be navigable at /my-grid.

The following component templates are available for Web Components:

Nome	Modelo de componente
Acordeão	accordion
Avatar	avatar
Distintivo	distintivo
Estandarte	banner
Botão	botão
Grupo de botões	button-group
Calendário	calendário
Cartão	cartão
Caixa de seleção	caixa de seleção
Cavaco	chip
Progresso circular	circular-progress
Seletor de data	date-picker
Entrada de data e hora	date-time-input
Divisor	divider
Gerenciador de docas	gerente de doca
Lista suspensa	dropdown
Painel de expansão	expansion-panel
Financial Chart	financial-chart
Forma	forma
Grade	grid
Ícone	ícone
Botão de ícone	botão-ícone
Entrada	entrada
Bitola Linear	linear-gauge
Progresso linear	linear-progress
Lista	lista
Barra de navegação	barra de navegação
Gráfico de pizza	gráfico de pizza
Medidor Radial	radial-gauge
Grupo de Rádio	grupo de rádio
Classificação	rating
Ondulação	ondulação
Slider	slider
Interruptor	trocar
Guias	tabs
Área de texto	text-area
Árvore	tree

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, and others - directly to Ignite UI for Web Components component documentation and API references. Once configured, your AI assistant can scaffold projects, add and modify components, search docs, look up API details, and generate accurate Ignite UI for Web Components code without leaving your editor.

The CLI MCP server starts via npx without requiring a global install:

npx -y igniteui-cli mcp

Or, if you have Ignite UI CLI installed globally:

ig mcp

Quick Setup with ig ai-config

To configure Ignite UI for Web Components Agent Skills and both MCP servers in a single step, run the following from your project root after installing Ignite UI for Web Components packages:

npx igniteui-cli ai-config

If you have the CLI installed globally:

ig ai-config

This copies Ignite UI for Web Components Agent Skills into .claude/skills/ and rites the full Ignite UI MCP server configuration, including the CLI and Theming servers, to .vscode/mcp.json. If the files already exist and are up-to-date, the command is a no-op. For AI clients other than VS Code, use the manual configuration below.

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

Configure your AI client to use the CLI MCP server manually. Most teams connect both the CLI MCP and the Theming MCP together - CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, and design tokens.

VS Code - create or edit .vscode/mcp.json in your project root:

{
  "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:

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

For per-client setup guides (VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains) and a full description of available tools, see Ignite UI CLI MCP. For an end-to-end walkthrough using both MCP servers, see Build an App End-to-End with CLI MCP and Theming MCP.

Ignite UI CLI Commands

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

Comando	Cognome	Descrição
início do jogo		Builds the application, starts a web server, and opens it in the default browser.
construção do ig		Builds the application into an output directory.
ig gerar	g	Generates a new custom template for supported frameworks and project types.
ajuda do ig	-h	Lists available commands with brief descriptions.
configuração do ig		Reads and writes Ignite UI CLI configuration settings.
ig doc		Searches the Infragistics knowledge base for a given term.
lista ig	l	Lists available templates for the project's framework and type. When run inside a project folder, uses the project's framework and type regardless of provided arguments.
Teste de IG		Executa os testes para o projeto atual.
ig upgrade-packages		Upgrades Ignite UI packages in the project from Trial to Licensed.
ig mcp		Starts the built-in MCP server for connecting AI coding assistants to Ignite UI for Web Components component documentation.
ig ai-config		Copies Ignite UI for Web Components Agent Skills into .claude/skills/ and writes Ignite UI MCP server configuration to .vscode/mcp.json. Run once per project.
ig version	-v	Shows the Ignite UI CLI version installed locally, or globally if no local installation is found.