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	설명
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	별명	설명
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:

이름	구성 요소 템플릿
아코디언	accordion
화신	화신
배지	배지
배너	banner
단추	단추
버튼 그룹	button-group
달력	달력
카드	카드
체크박스	체크박스
칩	chip
순환 진행	circular-progress
날짜 선택기	date-picker
날짜 시간 입력	date-time-input
분할기	divider
도크 관리자	부두 관리자
쓰러지 다	dropdown
확장 패널	expansion-panel
Financial Chart	financial-chart
형태	형태
그리드	grid
상	상
아이콘 버튼	아이콘 버튼
입력	입력
선형 계기	linear-gauge
선형 진행	linear-progress
목록	목록
내브바	탐색 모음
파이 차트	파이 차트
방사형 게이지	radial-gauge
라디오 그룹	라디오 그룹
평가	rating
리플	리플
Slider	slider
스위치	스위치
탭	tabs
텍스트 영역	text-area
나무	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:

명령	별명	설명
ig 시작		Builds the application, starts a web server, and opens it in the default browser.
ig 빌드		Builds the application into an output directory.
ig 생성	g	Generates a new custom template for supported frameworks and project types.
ig 도움말	-시간	Lists available commands with brief descriptions.
ig 구성		Reads and writes Ignite UI CLI configuration settings.
ig 문서		Searches the Infragistics knowledge base for a given term.
ig 목록	엘	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.
ig 테스트		현재 프로젝트에 대한 테스트를 실행합니다.
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.