React 向け Ignite UI CLI

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

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

Ignite UI CLI は、Vite やその他の React ツールを置き換えるものではありません。CLI で作成されたプロジェクトは標準の Vite ベースの React アプリケーションであり、スキャフォールディング後も npm スクリプトおよび Vite コマンドと完全な互換性を維持します。

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 を使用したステップバイステップ ガイドを参照してください。

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

React プロジェクトを非対話的に作成するには、フレームワークとして react、プロジェクト タイプとして igr-ts を指定します。

ig new <project-name> --framework=react --template=side-nav

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

インタラクティブなウィザードを使用する場合、side-nav または side-nav-mini を選択すると認証を追加するかどうかを確認する追加のプロンプトが表示されます。empty を選択すると認証プロンプトはスキップされます。以下のテンプレート ID が生成され、非対話的な作成に ig new で直接使用することもできます。これらはウィザードのテンプレート一覧には表示されません。

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

プロジェクト作成時の 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 を使用したステップバイステップ ガイドを参照してください。

現在のプロジェクトで使用可能なすべてのコンポーネント テンプレートを確認するには、ig list を実行します。この一覧はプロジェクトを認識し、選択したフレームワークとタイプを反映します。

アプリケーションの実行

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

ig start

Vite の使用

Ignite UI CLI によって生成された React アプリケーションは、ビルド ツールとして Vite を使用し、高速な開発ビルドとホット モジュール交換 (HMR) をサポートします。CLI ラッパーを使用せずに Vite 開発サーバーを直接起動するには、次のコマンドを実行します。

npm run dev

Vite 開発サーバーは、デフォルトで http://localhost:5173 で起動します。CLI に 1 つのコマンドでビルドと起動を処理させたい場合は、ig start を使用します。

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

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

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 を参照してください。

両方の MCP サーバーを使用したエンドツーエンドの手順については、Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルドを参照してください。

Ignite UI CLI コマンド

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