Ignite UI CLI MCP

Ignite UI CLI

Crie projetos rapidamente, incluindo Ignite UI for Angular e Ignite UI for Web Components, para uma variedade de frameworks.

Visão Geral

Recursos:

• Estrutura de projeto
• Adicione views com componentes Ignite UI (ex.: Combo, Grid ou Chart)
• Adicione templates baseados em cenários com múltiplos componentes (ex.: um dashboard)
• Compile e instale pacotes npm
• Selecione um tema, com suporte para temas personalizados em breve
• Guia passo a passo

Frameworks suportados

• Angular
• React
• Web Components
• Blazor
• jQuery

Pré-requisitos

O repositório abriga múltiplos pacotes e orquestra a compilação e publicação deles com lerna e yarn workspaces.

Para compilar o repositório localmente, você precisa ter o yarn instalado na sua máquina. Para instruções de instalação, visite a página oficial

Pacotes

Este monorepo contém vários pacotes que se combinam no igniteui-cli:

Pacote	Descrição	Localização
@igniteui/cli-core	Contém a funcionalidade principal da ferramenta CLI	packages/core
@igniteui/angular-templates	Contém as definições de templates para componentes Angular	packages/igx-templates
@igniteui/angular-schematics	Implementação do IgniteUI CLI para uso com o mecanismo de schematics do Angular CLI	packages/ng-schematics
igniteui-cli	Ferramenta CLI IgniteUI autônoma para React, Blazor, Angular, jQuery e Web Components	packages/cli
@igniteui/mcp-server	Servidor MCP que fornece aos assistentes de IA documentação do Ignite UI e referência de API	packages/igniteui-mcp/igniteui-doc-mcp

Sumário

• Instalação
• Uso
  • Passo a passo
  • Listar comandos disponíveis
  • Gerando projetos e adicionando componentes
    • Gerar projeto Ignite UI for Angular
    • Gerar projeto Ignite UI for React
    • Adicionando componentes
  • Compilar e executar
• Configurar Ferramentas de IA
• Servidor MCP
  • Uso com Assistentes de IA
  • Testando com o MCP Inspector
• Schematics
  • Definições de Schematic
• Contribuição

Instalação

Instale o pacote npm como um módulo global:

npm install -g igniteui-cli

Uso

O ponto de entrada principal é igniteui e também é aliased como ig. Ambos podem ser usados de forma intercambiável para chamar os comandos disponíveis. Consulte nossa documentação Wiki para mais detalhes.

Passo a passo

Para ter uma experiência guiada pelas opções disponíveis, basta executar:

ig

Após a criação, o projeto será carregado automaticamente no navegador padrão. NOTA: Se isso não acontecer, a porta pode já estar em uso. As portas variam para diferentes tipos de projeto; veja a descrição do comando ig start para detalhes sobre as portas padrão.

Listar os comandos disponíveis.

ig help

Gerando projetos e adicionando componentes

Crie um novo projeto informando nome, framework e tema de estilo.

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

Isso criará o projeto e instalará as dependências necessárias.

Os parâmetros além do nome são opcionais. O framework padrão é "angular", o tipo de projeto padrão é o primeiro disponível no framework e o tema é o primeiro disponível para o projeto. Para mais informações, visite a página Wiki do ig new.

Gerar projeto Ignite UI for Angular

Para criar um novo projeto com Ignite UI for Angular, use ig new especificando angular como framework e, opcionalmente, igx-ts como tipo de projeto, selecionando um dos templates de projeto:

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

Gerar projeto Ignite UI for React

Para criar um novo projeto com Ignite UI for React, use ig new especificando react como framework e igr-ts como tipo de projeto:

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

Gerar projeto Ignite UI for Web Components

Para criar um novo projeto com Ignite UI for Web Components, use ig new especificando webcomponents como framework:

ig new "IG Project" --framework=webcomponents

Adicionando componentes

Depois de criar um projeto, você pode adicionar templates de componentes adicionais a qualquer momento usando ig add. Executar o comando sem parâmetros guiará você pelos templates disponíveis:

ig add

Adicione um novo componente ou template ao projeto informando o ID do componente e escolhendo um nome.

ig add <component/template> <component_name>

O ID corresponde a um componente ("grid", "combo", "text-editor", etc.) ou a um template predefinido. Templates predefinidos são específicos do framework/projeto e podem fornecer views predefinidas com múltiplos componentes ou atender a um caso de uso específico, como "form-validation", "master-detail" e assim por diante.

Para a lista completa de templates suportados no projeto atual, basta executar o comando ig list:

ig list

Compilar e executar

ig build
ig start

Configurar Ferramentas de IA

O Ignite UI fornece um rico toolchain de desenvolvimento assistido por IA. Para configurar as ferramentas de IA do Ignite UI — servidores MCP e habilidades de codificação de IA — execute:

ig ai-config

Você será solicitado a fazer duas seleções:

• Agentes de IA — para quais ferramentas gerar arquivos de habilidades e instruções (Generic e Claude são selecionados por padrão)
• Assistentes de codificação — para quais assistentes configurar servidores MCP (o .mcp.json geral é selecionado por padrão, compatível com Claude Code, VS Code e outros)

Você também pode passar opções diretamente:

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

Isso cria ou atualiza o arquivo de configuração MCP específico do assistente (ex.: .mcp.json, .vscode/mcp.json, .cursor/mcp.json) com entradas para o Ignite UI MCP e os servidores MCP igniteui-theming (os servidores existentes são preservados), copia os arquivos de habilidades de codificação de IA dos pacotes Ignite UI instalados e gera arquivos de instrução específicos do agente (ex.: CLAUDE.md, AGENTS.md).

O comando ig new também solicita a configuração de ferramentas de IA como parte da criação do projeto.

Servidor MCP

O CLI inclui um servidor MCP (Model Context Protocol) integrado que fornece aos assistentes de IA pesquisa de documentação do Ignite UI, consulta de referência de API e orientação de scaffolding para Angular, React, Blazor e Web Components.

Inicie o servidor MCP:

ig mcp

O servidor executa via stdio e suporta as seguintes opções:

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

Uso com Assistentes de IA

Para VS Code, o comando ig ai-config lida com a configuração automaticamente (veja acima). Para outros clientes MCP (ex.: Claude Desktop, Cursor), configure-os manualmente:

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

O servidor MCP expõe as seguintes ferramentas aos assistentes de IA:

Ferramenta	Descrição
list_components	Lista a documentação de componentes Ignite UI disponível. Filtre por framework e correspondência opcional de palavra-chave contra nome de arquivo, nome do componente, palavras-chave ou resumo.
get_doc	Retorna o conteúdo markdown completo de um documento de componente específico pelo nome (ex.: grid-editing, accordion).
search_docs	Pesquisa de texto completo na documentação do Ignite UI para um framework específico. Suporta correspondência de prefixo (ex.: grid*).
search_api	Pesquisa entradas de API do Ignite UI por palavra-chave, recurso ou nome parcial do componente.
get_api_reference	Retorna a referência completa de API para um componente ou classe específica do Ignite UI pelo nome exato.
get_project_setup_guide	Retorna guias de configuração para criar um novo projeto Ignite UI. Para Angular/React/Web Components: instruções de scaffolding via CLI. Para Blazor: guia de configuração dotnet new + NuGet.

Testando com o MCP Inspector

Para testar e depurar interativamente as ferramentas do servidor MCP:

npx @modelcontextprotocol/inspector ig mcp

Schematics

Você também pode adicionar componentes Ignite UI for Angular aos seus projetos usando o pacote igniteui/angular-schematics. Ele inclui definições de schematic para a maior parte da lógica presente no igniteui-cli. Elas podem ser chamadas em qualquer projeto Angular existente ou até mesmo ao criar um. Você pode aprender mais sobre o pacote de schematics no readme.

Contribuição

Consulte o Guia de Contribuição para começar.

Executar localmente

1. Clone o repositório

2. Instale as dependências com yarn install

3. Compile o servidor MCP e agrupe-o no CLI:

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

4. Compile os pacotes do monorepo: npm run build

5. Abra no Visual Studio Code

   Há um arquivo launch.config predefinido para VS Code na pasta raiz, então você pode usar a janela View/Debug do VS Code e escolher uma das ações predefinidas. Elas incluem iniciar o guia passo a passo, criar um novo projeto para um framework específico ou adicionar componentes.

6. Pressione Start Debugging/F5

Teste de fumaça de template

scripts/smoke-test.sh executa o CLI compilado localmente de ponta a ponta: ele cria um projeto, adiciona cada template de componente nele, instala e compila. As especificações Jasmine em spec/ simulam PackageManager.installPackages, então elas verificam que os arquivos são gravados no disco, mas nunca que o resultado instala ou compila — este script cobre essa lacuna.

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)

Opções:

Opção	Significado
-f, --frameworks LIST	separados por vírgula; padrão angular,react,webcomponents
-p, --project ID	template de projeto para criar (padrão: o padrão do próprio framework)
--all-projects	criar e compilar todos os templates de projeto, pular adições de componentes
--templates LIST	apenas esses IDs de template de componente — o caminho rápido ao iterar
--isolate	um projeto por template de componente; lento, use para dividir uma falha
--skip-build	criar e adicionar apenas
--keep	manter os projetos gerados mesmo quando tudo passa
-o, --out DIR	diretório de trabalho (padrão output/smoke, que é gitignored) — apagado a cada execução, veja abaixo
-j, --jobs N	frameworks para executar em paralelo (padrão 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

Os logs por etapa ficam em <out>/logs/, e <out>/results.tsv é uma tabela framework / step / template / status / seconds legível por máquina. O script sai com código não zero se qualquer etapa falhar e imprime um resumo das falhas.

O diretório de trabalho é excluído e recriado a cada execução, então o script se recusa a tocar em qualquer coisa que não possa mostrar que é dele: a raiz do sistema de arquivos, seu diretório inicial, o repositório ou qualquer diretório que o contenha, e qualquer diretório não vazio que não tenha o sentinela .smoke-test-workdir que ele cria ou o results.tsv de uma execução anterior. Aponte --out para outro lugar, ou remova o diretório você mesmo, se encontrar isso.

Duas coisas para saber se você modificar:

• Todas as chamadas ig devem acontecer antes de npm install. packages/cli/bin/execute.js delega para node_modules/igniteui-cli sempre que um resolve dentro do diretório atual, e cada template de projeto lista igniteui-cli como devDependency — então, uma vez que um projeto gerado foi instalado, ig add silenciosamente muda para o CLI publicado e seus templates integrados. Criar com --skip-install impede que PackageManager.queuePackage inicie instalações, então as dependências são gravadas em package.json e instaladas uma vez no final.
• Códigos de saída não são suficientes. Util.error registra e retorna sem definir um, então ig add does-not-exist x sai com 0. Cada etapa é julgada pelo código de saída e por uma varredura de erros do log e por uma verificação de artefato. jQuery e Blazor são opcionais via -f. jQuery não tem script de build e 13 de seus templates puxam ignite-ui-full do feed ProGet da Infragistics, que exige credenciais; Blazor precisa do .NET SDK e não tem templates de componentes, então apenas dotnet build é executado.

Desenvolvimento do servidor MCP

O servidor MCP em packages/igniteui-mcp/igniteui-doc-mcp tem seu próprio pipeline de build, separado do monorepo. Ele usa ESM (ES2022, módulos Node16) enquanto o restante do monorepo usa CommonJS. Consulte DEVELOPMENT.md para o guia completo de desenvolvimento do servidor MCP.

Compilar o servidor 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/

Compilar a documentação de referência da API:

O servidor MCP inclui documentação de referência da API para Angular, React e Web Components. A documentação de Angular e Web Components é gerada a partir de submódulos de frameworks via TypeDoc (os submódulos são inicializados automaticamente pelos scripts de build). React usa um modelo JSON do TypeDoc pré-compilado, versionado no 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

Nota: Web Components exige uma compilação única da biblioteca (npm run build:publish no submódulo) antes que o TypeDoc possa ser executado. O script de build lida com isso automaticamente.

Compilar o servidor MCP (a partir da raiz do repositório):

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

Testar o servidor MCP localmente:

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

Compilando o pacote CLI com o servidor MCP integrado

O pacote CLI inclui o servidor MCP como um artefato de build empacotado (não uma dependência npm). Para produzir um pacote CLI completo com funcionalidade MCP total, siga estes passos:

# 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

Após o passo 5, npm pack a partir da raiz do repositório ou packages/cli/ produzirá um tarball com o servidor MCP, o banco de dados de documentação e a documentação de referência da API, tudo incluído.

Ignorando a documentação da API: Se você pular o passo 3, o servidor MCP ainda funcionará para as ferramentas list_components, get_doc, search_docs e get_project_setup_guide usando o banco de dados SQLite integrado. Apenas as ferramentas get_api_reference e search_api exigem a documentação da API.

Coleta de Dados

A ferramenta Ignite UI CLI usa o Google Analytics para relatar anonimamente estatísticas de uso de recursos e relatórios básicos de falhas. Esses dados são usados para ajudar a melhorar as ferramentas Ignite UI CLI ao longo do tempo. Você pode desativar a análise antes que qualquer dado seja enviado usando

ig config set disableAnalytics true -g

ao usar a CLI. Você pode ler a política de privacidade da Infragistics em https://www.infragistics.com/legal/privacy.