Ignite UI CLI

Быстрое создание проектов, в том числе на базе Ignite UI for Angular и Ignite UI for Web Components, для различных фреймворков.

Обзор

Возможности:

Создание структуры проекта
Добавление представлений с компонентами Ignite UI (например, Combo, Grid или Chart)
Добавление сценарных шаблонов с несколькими компонентами (например, дашборд)
Сборка и установка npm-пакетов
Выбор темы; поддержка пользовательских тем появится в ближайшее время
Пошаговое руководство

Поддерживаемые фреймворки

Angular
React
Web Components
Blazor
jQuery

Предварительные требования

Репозиторий содержит несколько пакетов и управляет их сборкой и публикацией с помощью lerna и yarn workspaces.

Для локальной сборки репозитория на вашей машине должен быть установлен yarn.

Инструкции по установке приведены на их официальной странице.

Пакеты

Этот монорепозиторий включает несколько пакетов, которые вместе образуют igniteui-cli:

Пакет	Описание	Расположение
@igniteui/cli-core	Содержит базовую функциональность CLI-инструмента	packages/core
@igniteui/angular-templates	Содержит определения шаблонов для компонентов Angular	packages/igx-templates
@igniteui/angular-schematics	Реализация IgniteUI CLI для использования с движком schematics Angular CLI	packages/ng-schematics
igniteui-cli	Автономный инструмент IgniteUI CLI для React, Blazor, Angular, jQuery и Web Components	packages/cli
@igniteui/mcp-server	MCP-сервер, предоставляющий AI-ассистентам документацию Ignite UI и справочник по API	packages/igniteui-mcp/igniteui-doc-mcp

Содержание

Установка
Использование
- Пошаговое руководство
- Список доступных команд
- Создание проектов и добавление компонентов
- Создание проекта Ignite UI for Angular
- Создание проекта Ignite UI for React
- Добавление компонентов
- Сборка и запуск
Настройка AI-инструментов
MCP-сервер
- Использование с AI-ассистентами
- Тестирование с MCP Inspector
Schematics
- Определения schematics
Участие в разработке

Установка

Установите npm-пакет как глобальный модуль:

npm install -g igniteui-cli

Использование

Основная точка входа — igniteui; она также доступна под псевдонимом ig. Оба варианта взаимозаменяемы при вызове доступных команд. Подробности см. в документации Wiki.

Пошаговое руководство

Чтобы воспользоваться пошаговым мастером по доступным параметрам, просто выполните:

ig

После создания проект автоматически откроется в браузере по умолчанию.

ПРИМЕЧАНИЕ: Если этого не произошло, возможно, порт уже занят. Порты различаются для разных типов проектов — подробнее о портах по умолчанию см. в описании команды ig start.

Список доступных команд.

ig help

Создание проектов и добавление компонентов

Создайте новый проект, указав имя, фреймворк и тему оформления.

--type= --theme=">

ig new <project name> --framework=<framework> --type=<proj-type> --theme=<theme>

Команда создаст проект и установит необходимые зависимости.

Все параметры, кроме имени, необязательны. По умолчанию фреймворк — "angular", тип проекта — первый доступный для выбранного фреймворка, а тема — первая доступная для проекта. Дополнительную информацию см. на странице Wiki ig new.

Создание проекта Ignite UI for Angular

Чтобы создать новый проект с Ignite UI for Angular, воспользуйтесь командой ig new, указав angular в качестве фреймворка и, при необходимости, igx-ts в качестве типа проекта, а также выбрав один из шаблонов проектов:

ig new "IG Project" --framework=angular --type=igx-ts --template=side-nav

Создание проекта Ignite UI for React

Чтобы создать новый проект с Ignite UI for React, воспользуйтесь командой ig new, указав react в качестве фреймворка и igr-ts в качестве типа проекта:

ig new "IG Project" --framework=react --type=igr-ts

Создание проекта Ignite UI for Web Components

Чтобы создать новый проект с Ignite UI for Web Components, воспользуйтесь командой ig new, указав webcomponents в качестве фреймворка:

ig new "IG Project" --framework=webcomponents

Добавление компонентов

После создания проекта вы в любой момент можете добавить дополнительные шаблоны компонентов с помощью команды ig add. Запуск команды без параметров проведёт вас по доступным шаблонам:

ig add

Добавьте новый компонент или шаблон в проект, указав ID компонента и выбрав имя.

ig add <component/template> <component_name>

ID соответствует либо компоненту ("grid", "combo", "text-editor" и т. д.), либо предопределённому шаблону. Предопределённые шаблоны зависят от фреймворка и проекта и могут предоставлять готовые представления либо с несколькими компонентами, либо реализующие конкретный сценарий, например "form-validation", "master-detail" и т. д.

Полный список поддерживаемых шаблонов в текущем проекте можно получить, просто выполнив команду ig list:

ig list

Сборка и запуск

ig build
ig start

Настройка AI-инструментов

Ignite UI предоставляет обширный набор инструментов для разработки с использованием AI. Чтобы настроить AI-инструменты Ignite UI — MCP-серверы и навыки AI-программирования — выполните:

ig ai-config

Вам будет предложено два варианта выбора:

AI-агенты — для каких инструментов создавать файлы навыков и инструкций (по умолчанию выбраны Generic и Claude)
Ассистенты программирования — для каких ассистентов настроить MCP-серверы (по умолчанию выбран общий .mcp.json, совместимый с Claude Code, VS Code и другими)

Также можно передать параметры напрямую:

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

Команда создаёт или обновляет конфигурационный файл MCP для конкретного ассистента (например, .mcp.json, .vscode/mcp.json, .cursor/mcp.json), добавляя в него записи для MCP-серверов Ignite UI и igniteui-theming MCP (существующие серверы сохраняются), копирует файлы навыков AI-программирования из установленных пакетов Ignite UI и генерирует файлы инструкций для конкретных агентов (например, CLAUDE.md, AGENTS.md).

Команда ig new также предлагает настроить AI-инструменты в рамках создания проекта.

MCP-сервер

CLI включает встроенный MCP (Model Context Protocol)-сервер, который предоставляет AI-ассистентам поиск по документации Ignite UI, справочник по API и подсказки по созданию структуры проектов для Angular, React, Blazor и Web Components.

Запустите MCP-сервер:

ig mcp

Сервер работает через stdio и поддерживает следующие параметры:

Use a remote backend instead of the local SQLite database

ig mcp --debug # Enable debug logging to mcp-server.log">

ig mcp --remote <url>   # Use a remote backend instead of the local SQLite database
ig mcp --debug          # Enable debug logging to mcp-server.log

Использование с AI-ассистентами

Для VS Code конфигурация выполняется автоматически командой ig ai-config (см. выше). Для других MCP-клиентов (например, Claude Desktop, Cursor) настройку нужно выполнить вручную:

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

MCP-сервер предоставляет AI-ассистентам следующие инструменты:

Инструмент	Описание
`list_components`	Выводит список доступных документов по компонентам Ignite UI. Поддерживает фильтрацию по фреймворку и опциональный поиск по ключевому слову в имени файла, названии компонента, ключевых словах или кратком описании.
`get_doc`	Возвращает полное содержимое в формате markdown для указанного документа по компоненту — по его имени (например, `grid-editing`, `accordion`).
`search_docs`	Полнотекстовый поиск по документации Ignite UI в рамках конкретного фреймворка. Поддерживает сопоставление по префиксу (например, `grid*`).
`search_api`	Ищет записи API Ignite UI по ключевому слову, названию функциональности или части имени компонента.
`get_api_reference`	Возвращает полную справку по API для указанного компонента или класса Ignite UI по точному имени.
`get_project_setup_guide`	Возвращает руководства по настройке для создания нового проекта Ignite UI. Для Angular/React/Web Components — инструкции по генерации проекта через CLI. Для Blazor — руководство по настройке с `dotnet new` и NuGet.

Тестирование с помощью MCP Inspector

Для интерактивного тестирования и отладки инструментов MCP-сервера:

npx @modelcontextprotocol/inspector ig mcp

Schematics

Добавлять компоненты Ignite UI for Angular в свои проекты можно также с помощью пакета igniteui/angular-schematics. Он содержит определения схем для большей части логики, реализованной в igniteui-cli. Схемы можно вызывать в любом существующем Angular-проекте или непосредственно при его создании. Подробнее о пакете схем можно узнать в его readme.

Вклад в проект

Чтобы начать, ознакомьтесь с руководством для контрибьюторов.

Локальный запуск

Склонируйте репозиторий
Установите зависимости командой yarn install
Соберите MCP-сервер и упакуйте его в CLI:

cd packages/igniteui-mcp/igniteui-doc-mcp
npm install
npm run build
cd ../../..
npm run build:mcp

Соберите пакеты монорепозитория: npm run build
Откройте проект в Visual Studio Code

В корневой папке есть заранее подготовленный файл launch.config для VS Code, поэтому можно открыть окно View/Debug в VS Code и выбрать одно из предопределённых действий. К ним относятся запуск пошагового руководства, создание нового проекта для конкретного фреймворка или добавление компонентов.

Нажмите Start Debugging/F5

Smoke-тест шаблонов

Скрипт scripts/smoke-test.sh прогоняет локально собранный CLI от начала до конца: генерирует проект, добавляет в него каждый шаблон компонента, устанавливает зависимости и выполняет сборку. Jasmine-спеки в spec/ подменяют PackageManager.installPackages, поэтому они проверяют лишь то, что файлы попали на диск, но не то, что результат устанавливается и компилируется — этот скрипт закрывает данный пробел.

npm run build                 # required: the script runs your local build, not the published CLI
scripts/smoke-test.sh         # angular, react and webcomponents (~20-30 min)

Параметры:

Параметр	Описание
`-f, --frameworks LIST`	список через запятую; по умолчанию `angular,react,webcomponents`
`-p, --project ID`	шаблон проекта для генерации (по умолчанию — стандартный для выбранного фреймворка)
`--all-projects`	сгенерировать и собрать все шаблоны проектов, пропустив добавление компонентов
`--templates LIST`	только указанные идентификаторы шаблонов компонентов — быстрый путь при итеративной доработке
`--isolate`	отдельный проект на каждый шаблон компонента; медленно, используйте для локализации сбоя
`--skip-build`	только генерация и добавление, без сборки
`--keep`	сохранять сгенерированные проекты, даже если все проверки прошли успешно
`-o, --out DIR`	рабочая директория (по умолчанию `output/smoke`, игнорируется git) — очищается при каждом запуске, см. ниже
`-j, --jobs N`	количество фреймворков, выполняемых параллельно (по умолчанию 1)

scripts/smoke-test.sh -f angular --templates grid,combo    # quick check, ~2 min
scripts/smoke-test.sh -f angular --all-projects            # every Angular project template
scripts/smoke-test.sh -f webcomponents --isolate           # bisect which template broke

Логи каждого шага сохраняются в /logs/, а /results.tsv содержит машиночитаемую таблицу со столбцами framework / step / template / status / seconds. Если хотя бы один шаг завершился с ошибкой, скрипт возвращает ненулевой код выхода и выводит сводку сбоев.

Рабочая директория при каждом запуске удаляется и создаётся заново, поэтому скрипт отказывается работать с тем, что не может однозначно считать своим: корнем файловой системы, домашней директорией, репозиторием и любой содержащей его директорией, а также с любой непустой директорией, в которой нет ни оставляемого скриптом маркера .smoke-test-workdir, ни results.tsv от предыдущего запуска. Если вы столкнулись с этим, укажите для --out другое расположение или удалите директорию вручную.

Если вы будете изменять скрипт, учтите два момента:

Все вызовы ig должны выполняться до npm install. Скрипт packages/cli/bin/execute.js делегирует выполнение в node_modules/igniteui-cli, когда такой пакет разрешается внутри текущей директории, а каждый шаблон проекта указывает igniteui-cli в качестве devDependency — поэтому после установки зависимостей сгенерированного проекта команда ig add незаметно переключается на опубликованный CLI и его встроенные шаблоны. Генерация с флагом --skip-install не даёт PackageManager.queuePackage запускать установку, поэтому зависимости лишь записываются в package.json и устанавливаются один раз в конце.
Кодов выхода недостаточно. Util.error записывает сообщение в лог и возвращается, не устанавливая код, поэтому ig add does-not-exist x завершается с кодом 0. Каждый шаг оценивается по коду выхода и по результату анализа лога на ошибки и по проверке артефактов.

jQuery и Blazor подключаются опционально через -f. У jQuery нет скрипта сборки, а 13 его шаблонов загружают ignite-ui-full из фида Infragistics ProGet, для которого требуются учётные данные; Blazor требует .NET SDK и не содержит шаблонов компонентов, поэтому для него выполняется только dotnet build.

Разработка MCP-сервера

MCP-сервер в packages/igniteui-mcp/igniteui-doc-mcp имеет собственный конвейер сборки, отдельный от монорепозитория. Он использует ESM (ES2022, модули Node16), тогда как остальная часть монорепозитория построена на CommonJS. Полное руководство по разработке MCP-сервера см. в DEVELOPMENT.md.

Сборка MCP-сервера:

cd packages/igniteui-mcp/igniteui-doc-mcp
npm install          # Install MCP-specific dependencies (separate from yarn workspaces)
npm run build        # Compile TypeScript + copy SQLite DB to dist/

Сборка справочной документации по API:

MCP-сервер включает справочные материалы по API для Angular, React и Web Components. Документация для Angular и Web Components генерируется из сабмодулей соответствующих фреймворков с помощью TypeDoc (сабмодули автоматически инициализируются скриптами сборки). Для React используется заранее собранная JSON-модель TypeDoc, хранящаяся в git.

cd packages/igniteui-mcp/igniteui-doc-mcp
npm run build:docs:angular         # Angular: init submodule → TypeDoc → markdown + index.json
npm run build:docs:webcomponents   # Web Components: init submodule → build lib → TypeDoc → markdown + index.json
npm run build:docs:all             # Build both

Примечание: перед запуском TypeDoc для Web Components требуется однократная сборка библиотеки (npm run build:publish в сабмодуле). Скрипт сборки выполняет её автоматически.

Сборка MCP-сервера (из корня репозитория):

npm run build:mcp    # Compiles MCP server TypeScript and copies SQLite DB into dist/

Локальное тестирование MCP-сервера:

npm run build:mcp
npm run build
node packages/cli/lib/cli.js mcp          # Start via CLI
# or directly:
node packages/cli/mcp/dist/index.js       # Start the bundled server

Сборка CLI-пакета со встроенным MCP-сервером

CLI-пакет включает MCP-сервер в виде встроенного артефакта сборки (а не npm-зависимости). Чтобы получить полноценный CLI-пакет со всей функциональностью MCP, выполните следующие шаги:

# 1. Install monorepo dependencies
yarn install

# 2. Build the MCP server
cd packages/igniteui-mcp/igniteui-doc-mcp
npm install
npm run build                              # Compile TypeScript + copy SQLite DB

# 3. Build API reference docs (optional but recommended for full functionality)
npm run build:docs:all                     # Init submodules + generate Angular + WC API docs via TypeDoc

# 4. Bundle MCP into CLI (from repo root)
cd ../../..
npm run build:mcp                      # Build MCP server

# 5. Build all packages for publishing
npm run build-pack

После шага 5 команда npm pack, выполненная из корня репозитория или из каталога packages/cli/, создаст tarball, в который войдут MCP-сервер, база данных документации и справочная документация по API.

Пропуск документации API: если пропустить шаг 3, MCP-сервер по-прежнему будет работать с инструментами list_components, get_doc, search_docs и get_project_setup_guide, опираясь на встроенную базу данных SQLite. Документация по API требуется только для инструментов get_api_reference и search_api.

Сбор данных

Инструмент Ignite UI CLI использует Google Analytics для анонимной передачи статистики использования функций и базовых отчётов о сбоях. Эти данные помогают со временем улучшать инструменты Ignite UI CLI. Отказаться от аналитики до отправки каких-либо данных можно с помощью команды

ig config set disableAnalytics true -g

при работе с CLI. Ознакомиться с политикой конфиденциальности Infragistics можно по адресу https://www.infragistics.com/legal/privacy.