Ignite UI CLI for Web Components

The Ignite UI CLI (igniteui-cli) is a standalone global command-line tool for creating and scaffolding Web Components applications with Ignite UI for Web Components. It provides project templates pre-configured for Ignite UI for Web Components, 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 for Web Components documentation.

The Ignite UI CLI does not replace the build tooling for your framework - projects it creates are standard Web Components applications that remain fully compatible with their native build commands and configuration 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 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 base project templates are available for Web Components:

When using the interactive wizard, selecting side-nav or side-nav-mini triggers an additional prompt asking whether to add authentication. Selecting empty skips the authentication prompt. 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:

The following arguments are available when creating a project:

AI Configuration During Project Creation

When --agents and --assistants flags are not provided, ig new prompts you to configure AI tooling as part of the project creation flow. After scaffolding the project, the wizard displays the following prompts:

? Which AI coding assistants do you want to configure MCP servers for? (Press <space> to select)
❯◉ VS Code (GitHub Copilot)
 ◉ Cursor
 ◯ Generic (.mcp.json)
 ◯ Gemini CLI
 ◯ JetBrains (AI Assistant)
 ◯ None

? Which AI agents should receive skill files? (Press <space> to select)
❯◉ GitHub Copilot (.agents/skills/)
 ◉ Claude (.claude/skills/)
 ◉ Cursor (.cursor/rules/)
 ◯ Codex (.codex/)
 ◯ Windsurf (.windsurfrules)
 ◯ Gemini CLI (.gemini/)
 ◯ JetBrains Junie (.junie/guidelines/)
 ◯ None

Navigate through the options using the arrow keys, toggle selections with SPACE, and confirm with ENTER.

To skip the AI configuration prompts entirely during project creation, pass --assistants none --agents none:

ig new my-app --framework=react --template=side-nav --assistants none --agents none

To auto-configure AI tools without prompting, specify the desired values:

ig new my-app --framework=react --template=side-nav --assistants vscode --agents copilot claude

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.

The following component templates are available for Web Components:

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

The ai-config command configures MCP servers, copies framework-specific skill files into each agent’s skills directory, and sets up instruction files - all in a single step. Run it from your project root:

npx igniteui-cli ai-config

If you have the CLI installed globally:

ig ai-config

Interactive Mode

If no parameters are provided, the command enters interactive mode. You are first prompted to select which AI coding assistants should receive MCP server configuration:

? Which AI coding assistants do you want to configure MCP servers for? (Press <space> to select)
❯◉ VS Code (GitHub Copilot)       - writes .vscode/mcp.json
 ◉ Cursor                          - writes .cursor/mcp.json
 ◯ Generic (.mcp.json)             - writes .mcp.json
 ◯ Gemini CLI                      - writes .gemini/settings.json
 ◯ JetBrains (AI Assistant)        - writes .junie/mcp.json
 ◯ None

Next, you are prompted to select which AI agents should receive skill files:

? Which AI agents should receive skill files? (Press <space> to select)
❯◉ GitHub Copilot (.agents/skills/) - copies skills to .agents/skills/
 ◉ Claude (.claude/skills/)          - copies skills to .claude/skills/
 ◉ Cursor (.cursor/rules/)           - copies skills to .cursor/rules/
 ◯ Codex (.codex/)                   - copies skills to .codex/
 ◯ Windsurf (.windsurfrules)         - copies skills to .windsurfrules/
 ◯ Gemini CLI (.gemini/)             - copies skills to .gemini/
 ◯ JetBrains Junie (.junie/)         - copies skills to .junie/guidelines/
 ◯ None

Navigate through the options using the arrow keys, toggle selections with SPACE, and confirm with ENTER.

Non-Interactive Mode

Use --assistants to choose which coding assistants receive MCP config and --agents to choose which agents receive skill files:

ig ai-config --assistants vscode --agents copilot

Target multiple assistants and agents in a single run:

ig ai-config --assistants generic vscode --agents claude copilot cursor

Start the Servers

After the command finishes, start the MCP servers in your AI client. The servers are configured but not yet running - the client needs to launch each server before its tools are available to the agent.

VS Code with GitHub Copilot: Open .vscode/mcp.json. VS Code displays an inline Start button above each server entry. Click Start for both igniteui and igniteui-theming. Once started, VS Code shows the available tool count next to each server (for example, “13 tools | 1 prompt”). Alternatively, run MCP: List Servers from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), select each server, and choose Start.

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: