Blazor 向け Ignite UI CLI

Ignite UI CLI (igniteui-cli) は、Ignite UI for Blazor を使用した Blazor アプリケーションを作成およびスキャフォールディングするためのスタンドアロンのグローバル コマンド ライン ツールです。Ignite UI for Blazor 用に事前構成されたプロジェクト テンプレート、初回セットアップのためのガイド付きステップバイステップ ウィザード、スクリプト化されたワークフロー用の非インタラクティブな new および add コマンド、開発サーバー、そして AI コーディング アシスタントを最新の Ignite UI for Blazor ドキュメントに接続するための組み込み MCP サーバーを提供します。

Ignite UI CLI は、使用するフレームワークのビルド ツールを置き換えるものではありません。CLI が作成するプロジェクトは標準の Blazor アプリケーションであり、スキャフォールディング後もネイティブのビルド コマンドおよび構成と完全な互換性を維持します。

Ignite UI CLI のインストール

npm を使用して Ignite UI CLI をグローバルにインストールします。

npm install -g igniteui-cli

または、yarn を使用する場合:

yarn global add igniteui-cli

インストールを確認します。

ig version

新しいプロジェクトの作成

Ignite UI CLI には、プロジェクト作成のための 2 つのモードがあります。ガイド付きのインタラクティブ ウィザードと、引数を指定する直接コマンドです。

ガイド付きウィザードを使用する

ガイド付きウィザードは、新しいプロジェクトの出発点として推奨されています。フレームワーク、プロジェクト タイプ、テンプレート、テーマの選択を求めるプロンプトを表示し、その後プロジェクトを自動的にスキャフォールディングしてコミットします。

ウィザードを起動するには、次のコマンドを実行します。

ig

または:

ig new

ウィザード オプションのステップバイステップの手順については、Ignite UI CLI を使用したステップバイステップ ガイドを参照してください。

直接プロジェクトを作成する

Blazor プロジェクトは .NET CLI を通じてスキャフォールディングされるため、.NET SDK 10.0 以降が必要です。初回使用時に、IgniteUI.Blazor.Templates パッケージがまだ存在しない場合、CLI が自動的にインストールします。

Blazor プロジェクトを非対話的に作成するには、フレームワークとして blazor を指定し、ホスティング モデルを選択します。

ig new <project-name> --framework blazor --hosting Server

テーマとテーマ バリアントも設定し、パッケージの復元をスキップする、より完全な例を次に示します。

ig new MyApp --framework blazor --hosting Auto --theme material --variant dark --skip-install

Blazor のオプション

[!NOTE] --hosting および --variant は Blazor フレームワークでのみ有効であり、他のフレームワークでは無視されます。

基本プロジェクト テンプレート

Blazor で使用できる基本プロジェクト テンプレートは次のとおりです。

プロジェクトが作成されたら、標準の .NET ツールで実行します。

cd <project-name>
dotnet run

プロジェクトの作成時には、次の引数を使用できます。

プロジェクト作成時の AI 構成

--agents および --assistants フラグが指定されていない場合、ig new はプロジェクト作成フローの一部として AI ツールを構成するよう求めるプロンプトを表示します。プロジェクトのスキャフォールディング後、ウィザードには次のプロンプトが表示されます。

? 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

矢印キーでオプションを移動し、SPACE で選択を切り替え、ENTER で確定します。

プロジェクト作成時に AI 構成のプロンプトを完全にスキップするには、--assistants none --agents none を渡します。

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

プロンプトを表示せずに AI ツールを自動構成するには、目的の値を指定します。

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

コンポーネント テンプレートの追加

プロジェクトを作成した後は、いつでもコンポーネント ビューを追加できます。引数を指定せずに ig add を実行すると、インタラクティブなテンプレート ブラウザーが起動します。

ig add

特定のコンポーネント テンプレートを直接追加するには、テンプレート ID と新しいコンポーネントの名前を指定します。

ig add [component-template] [component-name]

たとえば、MyGrid という名前のデータ グリッド コンポーネントを追加するには、次のコマンドを実行します。

ig add grid MyGrid

現在のプロジェクトで使用可能なすべてのテンプレートを一覧表示するには、次のコマンドを実行します。

ig list

コンポーネント追加ウィザードのガイド付きの手順については、Ignite UI CLI を使用したステップバイステップ ガイドを参照してください。

アプリケーションの実行

start コマンドは、アプリケーションをビルドし、ローカル Web サーバーを起動して、デフォルト ブラウザーでアプリケーションを開きます。

ig start

AI アシスタント統合 (MCP)

Ignite UI CLI には、AI コーディング アシスタント (GitHub Copilot、Claude、Cursor など) を Ignite UI for Blazor のコンポーネント ドキュメントおよび API リファレンスに直接接続する組み込みの MCP (Model Context Protocol) サーバーが含まれています。構成が完了すると、AI アシスタントはエディターを離れることなく、プロジェクトのスキャフォールディング、コンポーネントの追加と変更、ドキュメントの検索、API の詳細の参照、正確な Ignite UI for Blazor コードの生成を行うことができます。

CLI MCP サーバーは、グローバル インストールを必要とせずに npx を介して起動します。

npx -y igniteui-cli mcp

または、Ignite UI CLI をグローバルにインストールしている場合:

ig mcp

ig ai-config によるクイック セットアップ

ai-config コマンドは、MCP サーバーの構成、フレームワーク固有のスキル ファイルの各エージェントのスキル ディレクトリへのコピー、および指示ファイルの設定を、すべて 1 つの手順で実行します。プロジェクト ルートから実行します。

npx igniteui-cli ai-config

CLI をグローバルにインストールしている場合:

ig ai-config

インタラクティブ モード

パラメーターが指定されていない場合、コマンドはインタラクティブ モードになります。まず、MCP サーバー構成を受け取る AI コーディング アシスタントを選択するよう求められます。

? 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

次に、スキル ファイルを受け取る AI エージェントを選択するよう求められます。

? 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

矢印キーでオプションを移動し、SPACE で選択を切り替え、ENTER で確定します。

非インタラクティブ モード

--assistants で MCP 構成を受け取るコーディング アシスタントを選択し、--agents でスキル ファイルを受け取るエージェントを選択します。

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

1 回の実行で複数のアシスタントとエージェントを対象にすることもできます。

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

サーバーの起動

コマンドが完了したら、AI クライアントで MCP サーバーを起動します。サーバーは構成されていますが、まだ実行されていません。エージェントがツールを利用できるようになるには、クライアントが各サーバーを起動する必要があります。

GitHub Copilot を使用する VS Code: .vscode/mcp.json を開きます。VS Code では、各サーバー エントリの上にインラインの Start ボタンが表示されます。igniteui と igniteui-theming の両方で Start をクリックします。起動すると、VS Code は各サーバーの横に使用可能なツール数を表示します (例: 「13 tools | 1 prompt」)。または、コマンド パレット (Ctrl+Shift+P / Cmd+Shift+P) から MCP: List Servers を実行し、各サーバーを選択して Start を選択します。

すべての AI クライアントにわたる完全なセットアップ手順とエージェント スキルの連携については、エージェント スキルおよび Ignite UI CLI MCP を参照してください。

CLI MCP サーバーを使用するように AI クライアントを手動で構成します。ほとんどのチームは、CLI MCP と Theming MCP の両方を一緒に接続します。CLI MCP はプロジェクトとコンポーネントのワークフローを処理し、Theming MCP はパレット、テーマ、デザイン トークンを処理します。

VS Code - プロジェクト ルートに .vscode/mcp.json を作成または編集します。

{
  "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、およびその他の MCP クライアント:

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

クライアントごとのセットアップ ガイド (VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains) と使用可能なツールの詳細な説明については、Ignite UI CLI MCP を参照してください。

Ignite UI CLI コマンド

使用可能な Ignite UI CLI コマンドの完全なリストは、Ignite UI CLI wiki で管理されています。