Ignite UI MCP Server

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	Angular CLI の schematics エンジンで使用する IgniteUI CLI の実装です	packages/ng-schematics
igniteui-cli	React、Blazor、Angular、jQuery、Web Components 向けのスタンドアロン IgniteUI CLI ツールです	packages/cli
@igniteui/mcp-server	AI アシスタントに Ignite UI のドキュメントと API リファレンスを提供する MCP サーバーです	packages/igniteui-mcp/igniteui-doc-mcp

目次

• インストール
• 使い方
  • ステップバイステップ
  • 利用可能なコマンドの一覧
  • プロジェクトの生成とコンポーネントの追加
    • Ignite UI for Angular プロジェクトの生成
    • Ignite UI for React プロジェクトの生成
    • コンポーネントの追加
  • ビルドと実行
• AI ツールの設定
• MCP サーバー
  • AI アシスタントでの使用
  • MCP Inspector でのテスト
• Schematics
  • Schematic の定義
• 貢献

インストール

npm パッケージをグローバルモジュールとしてインストールします。

npm install -g igniteui-cli

使い方

メインのエントリーポイントは igniteui で、ig という別名でも利用できます。どちらも利用可能なコマンドの呼び出しに同じように使用できます。詳しくはWiki のドキュメントをご覧ください。

手順

利用可能なオプションについてガイドを見ながら進めるには、次のコマンドを実行します。

ig

プロジェクトの作成後、デフォルトのブラウザーで自動的に読み込まれます。 注：読み込まれない場合は、ポートがすでに使用中の可能性があります。ポートはプロジェクトの種類によって異なります。デフォルトのポートについて詳しくは、ig start コマンドの説明をご覧ください。

利用可能なコマンドを一覧表示します。

ig help

プロジェクトの生成とコンポーネントの追加

名前、フレームワーク、スタイルテーマを指定して新しいプロジェクトを作成します。

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

これによりプロジェクトが作成され、必要な依存関係がインストールされます。

名前以外のパラメーターは省略可能です。フレームワークのデフォルトは「angular」、プロジェクトの種類のデフォルトはそのフレームワークで最初に利用可能なもの、テーマのデフォルトはそのプロジェクトで最初に利用可能なものです。詳しくは、Wiki ページの ig new をご覧ください。

Ignite UI for Angular プロジェクトの生成

Ignite UI for Angular の新しいプロジェクトを作成するには、フレームワークとして angular を指定し、必要に応じてプロジェクトの種類として igx-ts を指定して、プロジェクトテンプレートからいずれかを選択し、ig new を使用します。

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

Ignite UI for React プロジェクトの生成

Ignite UI for React の新しいプロジェクトを作成するには、フレームワークとして react、プロジェクトの種類として igr-ts を指定し、ig new を使用します。

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

Ignite UI for Web Components プロジェクトの生成

Ignite UI for Web Components の新しいプロジェクトを作成するには、フレームワークとして webcomponents を指定し、ig new を使用します。

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 支援開発ツールチェーンを提供します。Ignite UI の AI ツール（MCP サーバーと AI コーディングスキル）を設定するには、次のコマンドを実行します。

ig ai-config

次の 2 つの項目を選択するよう求められます。

• AI エージェント — スキルファイルと指示ファイルを生成するツールを選択します（デフォルトでは Generic と Claude が選択されています）
• コーディングアシスタント — MCP サーバーを設定するアシスタントを選択します（Claude Code、VS Code などと互換性のある汎用の .mcp.json がデフォルトで選択されています）

オプションを直接指定することもできます。

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

これにより、アシスタント固有の MCP 設定ファイル（例：.mcp.json、.vscode/mcp.json、.cursor/mcp.json）に、Ignite UI MCP および igniteui-theming MCP サーバーのエントリーが作成または更新されます（既存のサーバーは保持されます）。また、インストール済みの Ignite UI パッケージから AI コーディングスキルファイルをコピーし、エージェント固有の指示ファイル（例：CLAUDE.md、AGENTS.md）を生成します。

ig new コマンドでも、プロジェクト作成の一環として AI ツールの設定が求められます。

MCP サーバー

CLI には、AI アシスタントに Ignite UI のドキュメント検索、API リファレンスの参照、Angular、React、Blazor、Web Components のスキャフォールディングに関するガイダンスを提供する MCP（Model Context Protocol） サーバーがバンドルされています。

MCP サーバーを起動します：

ig mcp

サーバーは stdio 経由で動作し、以下のオプションに対応しています：

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	キーワード、機能名、またはコンポーネント名の一部を使って、Ignite UI の API エントリを検索します。
get_api_reference	正確な名前を指定して、特定の Ignite UI コンポーネントまたはクラスの API リファレンス全文を返します。
get_project_setup_guide	新しい Ignite UI プロジェクトを作成するためのセットアップガイドを返します。Angular／React／Web Components の場合は CLI によるスキャフォールディング手順、Blazor の場合は dotnet new と NuGet のセットアップガイドを提供します。

MCP Inspector でのテスト

MCP サーバーのツールを対話形式でテストおよびデバッグするには：

npx @modelcontextprotocol/inspector ig mcp

Schematics

igniteui/angular-schematics パッケージを使用して、プロジェクトに Ignite UI for Angular コンポーネントを追加することもできます。このパッケージには、igniteui-cli に含まれるロジックの大部分に対応した schematic 定義が含まれています。既存の Angular プロジェクトでも、新規作成時でも呼び出すことができます。schematics パッケージの詳細は、readmeをご覧ください。

貢献

Contribution guideを参照して、始め方をご確認ください。

ローカルで実行

1. リポジトリをクローンします

2. yarn install で依存関係をインストールします

3. MCP サーバーをビルドし、CLI にバンドルします：

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

4. モノレポのパッケージをビルドします：npm run build

5. Visual Studio Code で開きます

   ルートフォルダーには VS Code 用の定義済み launch.config ファイルがあるため、VS Code の［表示］／［デバッグ］ウィンドウから、定義済みのアクションを選択できます。これには、ステップバイステップガイドの起動、特定のフレームワーク用の新しいプロジェクトの作成、コンポーネントの追加が含まれます。

6. ［デバッグの開始］／F5 を押します

テンプレートのスモークテスト

scripts/smoke-test.sh はローカルでビルドした CLI をエンドツーエンドで実行します。プロジェクトを生成し、すべてのコンポーネントテンプレートを追加してから、インストールしてビルドします。spec/ 配下の Jasmine 仕様では 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	これらのコンポーネントテンプレート ID のみ。反復作業向けの高速パスです
--isolate	コンポーネントテンプレートごとにプロジェクトを1つ作成します。時間がかかりますが、失敗箇所の切り分けに使用します
--skip-build	生成と追加のみを行います
--keep	すべて成功した場合も、生成されたプロジェクトを保持します
-o, --out DIR	作業ディレクトリ（デフォルトは output/smoke。gitignore 対象です）。実行のたびに消去されます。詳しくは下記を参照してください
-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

各ステップのログは <out>/logs/ に保存され、<out>/results.tsv は機械可読な framework / step / template / status / seconds テーブルです。いずれかのステップが失敗すると、スクリプトはゼロ以外の終了コードを返し、失敗の概要を出力します。

作業ディレクトリは実行のたびに削除され、再作成されます。そのため、スクリプトは自分のものだと確認できない場所には触れません。対象には、ファイルシステムのルート、ホームディレクトリ、リポジトリまたはそれを含むディレクトリ、そしてスクリプトが配置する .smoke-test-workdir マーカーか前回実行時の results.tsv のどちらも存在しない空でないディレクトリが含まれます。この制限に該当する場合は、--out で別の場所を指定するか、自分でディレクトリを削除してください。

変更する際に知っておくべきことが2つあります。

• すべての 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個のテンプレートが認証情報を必要とする Infragistics ProGet フィードから ignite-ui-full を取得します。Blazor には .NET SDK が必要で、コンポーネントテンプレートがないため、dotnet build のみが実行されます。

MCP サーバーの開発

packages/igniteui-mcp/igniteui-doc-mcp の MCP サーバーには、モノレポとは別の独自のビルドパイプラインがあります。モノレポのほかの部分が CommonJS を使用しているのに対し、こちらは ESM（ES2022、Node16 モジュール）を使用します。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 サーバーには、Angular、React、Web Components の API リファレンスドキュメントが含まれています。Angular と Web Components のドキュメントは、TypeDoc を使ってフレームワークのサブモジュールから生成されます（サブモジュールはビルドスクリプトによって自動的に初期化されます）。React では、git にチェックイン済みのビルド済み TypeDoc JSON モデルを使用します。

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

注： Web Components では、TypeDoc を実行する前にライブラリを一度ビルドする必要があります（サブモジュールで 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

MCP サーバーをバンドルした CLI パッケージのビルド

CLI パッケージには、MCP サーバーがバンドルされたビルド成果物として含まれています（npm の依存関係ではありません）。MCP の全機能を備えた完全な CLI パッケージを作成するには、次の手順に従ってください。

# 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 の後、リポジトリのルートまたは packages/cli/ から npm pack を実行すると、MCP サーバー、ドキュメントデータベース、API リファレンスドキュメントがすべて含まれた tarball が作成されます。

API ドキュメントを省略する場合： 手順 3 を省略しても、バンドルされた SQLite データベースを使用して、list_components、get_doc、search_docs、get_project_setup_guide ツールは引き続き動作します。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）を確認できます。