Step-by-Step Guide Using Ignite UI CLI

The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for Ignite UI CLI-based Angular projects. It covers the same operations as the non-interactive ig new and ig add commands but prompts you at each step rather than requiring all arguments upfront.

The step-by-step mode does not support scripted or non-interactive use - for that, use the direct ig new and ig add commands with explicit arguments. The wizard relies on Inquirer.js; see supported terminals for compatibility.

To activate the wizard, run:

ig

or:

ig new

Building Your First Ignite UI CLI App

Create new project

First you will be prompted to enter a name for your application:

After selecting Angular as a framework, you will be prompted to choose the type of the project to be generated:

Then you will be guided to choose one of the available project templates. Three base templates are available: Empty Project, Side Navigation, and Side Navigation Mini. Navigate through the available options using the arrow keys and press ENTER to confirm the selection:

If you select Side Navigation or Side Navigation Mini, the wizard will prompt you with an additional step asking whether to add an authentication module to the project. Answering yes generates the corresponding auth variant (side-nav-auth or side-nav-mini-auth). If you select Empty Project, the authentication prompt is skipped.

The next step is to choose a theme for your application. Selecting the default option includes a pre-compiled CSS file (igniteui-angular.css) with the default Ignite UI for Angular theme in your project’s angular.json. The custom option generates a color palette and theme configuration using the Theming API in app/styles.scss.

After completing the above steps, the application structure is generated. The wizard then prompts you to configure AI coding assistants. Once AI configuration is complete, a Git repository is initialized, the project is committed, and you are asked whether to complete the process or add a new view to your application:

Add view

The Ignite UI CLI supports multiple component templates and scenario templates that can be added to a project. This mode can be activated either as a continuation of project creation or inside an existing project using the command below.

ig add

You will be provided with a list of the available templates, grouped by category.

Use the arrow keys to navigate through the options and ENTER to select. For some templates, such as Custom Grid, you will be provided with a list of optional features that can be toggled with the SPACE key:

If you choose to add a scenario to your application, you will also get a list of the available scenario templates:

After adding a template, you will be asked whether to add more views or complete the process. On completion, any remaining package dependencies are installed and the application is served and opened in your default browser.

To add more Ignite UI for Angular views to a project later without the wizard, use the direct add command:

ig add [template] [name]

Configure AI assistants

After choosing your framework, project type, template, and theme, the wizard prompts you to configure AI coding assistant integration. This step runs the same logic as ig ai-config but is embedded in the project creation flow.

Choose coding assistants

You will be prompted to select which coding assistants to configure MCP servers for. Use the SPACE key to toggle selections and ENTER to confirm:

• Generic (Claude Code, VS Code, and others) - writes .mcp.json
• VS Code (GitHub Copilot) - writes .vscode/mcp.json
• Cursor - writes .cursor/mcp.json
• Gemini - writes .gemini/settings.json
• JetBrains Junie - writes .junie/mcp/mcp.json
• None - skips MCP configuration

The default selection is Generic. Selecting None skips MCP server configuration entirely.

Choose AI agents

Next, you will be prompted to select which AI agents to configure skill files and instructions for:

• Generic - .agents/skills/ and AGENTS.md
• Claude - .claude/skills/ and .claude/CLAUDE.md
• Copilot - .github/skills/ and .github/copilot-instructions.md
• Cursor - .cursor/skills/ and .cursor/rules/cursor.mdc
• Codex - .codex/skills/ and .codex/instructions.md
• Windsurf - .windsurf/skills/ and .windsurf/rules/guidelines.md
• Gemini - .gemini/skills/ and .gemini/GEMINI.md
• Junie - .junie/skills/ and .junie/guidelines.md
• None - skips skill files and instructions

The default selections are Generic and Claude. Selecting None skips agent configuration entirely.