Ignite UI CLI MCP

Ignite UI CLI MCP は、AI アシスタントが Ignite UI for React アプリケーションのプロジェクトのスキャフォールディング、既存アプリの変更、コンポーネントの作成と更新、ドキュメントの質問に回答できるようにする Model Context Protocol (MCP) サーバーです。Ignite UI CLI MCP をエディター、GitHub リポジトリ、またはデスクトップ AI クライアントに接続し、やりたいことを伝えると、アシスタントが CLI ツールを使用します。

概要

Ignite UI CLI MCP は、チャットまたはエージェント モードを通じて、Ignite UI CLI プロジェクトのスキャフォールディング、コンポーネント生成、プロジェクト変更、ドキュメント対応ワークフローへの直接アクセスを AI アシスタントに提供します。サーバーは Ignite UI Theming MCP と連携して動作します。CLI MCP がプロジェクトとコンポーネントのワークフローを処理し、Theming MCP がパレット、テーマ、トークン、スタイリングを処理します。ほとんどのチームは、両方のサーバーを同じ AI クライアント セッションに接続させます。

推奨セットアップ手順は、最初に Ignite UI CLI から始めることです。この手順では、Ignite UI CLI がプロジェクトを作成し、必要なパッケージをインストールし、VS Code 用の MCP 構成を初期設定します。また、空のフォルダーでアシスタントが MCP を通じてプロジェクトを作成するところから開始することも、既存のプロジェクトに MCP を接続することもできます。

セットアップ後の完全なビルド フローを確認したい場合は、Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルドを参照してください。

接続後に試すプロンプトの例:

「このフォルダーに新しい Ignite UI for React プロジェクトを作成し、推奨されるデフォルトを使用して、サンプル データを含むスターター ダッシュボード ページを追加して」

「このプロジェクトに新しいグリッド ページを追加し、サンプル データに接続して、現在のナビゲーション構造を維持して」

「コンボ コンポーネントが公開するプロパティとイベントは何ですか? 検索可能なドロップダウンに最も役立つものはどれですか?」

「既存のプロジェクトを更新してサイド ナビゲーション レイアウトを追加し、現在のページとルートを維持して」

前提条件

MCP サーバーを構成する前に、以下の前提条件が満たされていることを確認してください。

• Node.js (v18 以降) がインストールされていること — これにより、サーバーの起動に使用される npx コマンドが提供されます。
• MCP サポートを備えた AI クライアント — 例: VS Code と GitHub Copilot、GitHub Copilot クラウド エージェント、Cursor、Claude Desktop、Claude Code、または AI Assistant プラグインを備えた JetBrains IDE。
• 最初にサーバーが起動するときの npx パッケージ解決のためのインターネット アクセス。
• 以下のいずれかの開始点:
  • 新しいプロジェクト用の空のフォルダー
  • Ignite UI CLI で作成したプロジェクト
  • 引き続き作業する既存の Ignite UI for React プロジェクト

同じクライアント セッションでテーマ ツールも使用したいが、igniteui-theming がまだプロジェクトで利用できない場合は、次のコマンドを実行します。

npm install igniteui-theming

AI クライアント用の Ignite UI CLI MCP の構成

MCP サーバーは npx を通じて起動されます。Node.js と igniteui-cli パッケージへのアクセス以外に追加のインストールは必要ありません。

正規の起動コマンドは次のとおりです。

npx -y igniteui-cli mcp

セットアップ手順を選択する

Ignite UI CLI MCP を開始するには 3 つの方法があります。

推奨 - CLI ファースト 最初に ig new または npx --package igniteui-cli igniteui new コマンドにより Ignite UI CLI を使ってプロジェクトを作成します。Ignite UI CLI がプロジェクトをスキャフォールディングし、必要なパッケージをインストールし、構成する AI クライアントとエージェントを選択するプロンプトを表示するため、これが最も簡単なセットアップです。その後、生成された MCP 構成を確認し、AI クライアントでプロジェクトを開くだけです。

空のフォルダー 完全に空のフォルダーから始め、MCP 構成を手動で追加してから、アシスタントにチャットを通じてプロジェクトを作成するよう依頼します。このパスは、最初に CLI を自分で実行するのではなく、MCP でプロジェクト作成フローを最初から動かしたい場合に便利です。

既存プロジェクト 既存のプロジェクトに MCP 構成を追加し、現在のコードベースで作業を続けます。ig ai-config (Angular プロジェクトの場合は ng generate @igniteui/angular-schematics:ai-config) をプロジェクト ルートから実行して、選択した AI クライアント向けに MCP 構成を書き込み、エージェント スキルをプロジェクトにコピーします。コマンドはどのクライアントとエージェントを構成するかを選択するプロンプトを表示します。

3 つのパスはすべて同じ MCP サーバーを使用します。違いは、プロンプトを開始する前にプロジェクトがどのように準備されるかだけです。

• CLI ファーストの手順では、Ignite UI CLI がプロジェクトを作成し、最初の MCP 構成を準備します
• 空のフォルダーの手順では、最初に MCP 構成を作成し、その後アシスタントにプロジェクトを作成させます
• 既存プロジェクトの手順では、ig ai-config を実行して選択したクライアント向けに MCP 構成を書き込み、エージェント スキルを自動的にコピーします

いずれの場合も、MCP サーバーが接続されて AI クライアントで表示されたら、アシスタントは同じセッションで作業を続けることができます。

最初に Ignite UI CLI でプロジェクトを作成する場合は、次のいずれかの方法で CLI を実行できます。

• グローバル インストール

  npm install -g igniteui-cli

  これにより、任意のターミナル セッションで ig コマンドが使用できるようになります。定期的にプロジェクトの作成あるいはスキャフォールディングを行う場合は、最も明確なオプションです。

• グローバル インストールなし

  npx --package igniteui-cli igniteui new

  グローバルな ig コマンドの代わりに npx を通じて CLI を実行します。

CLI ファーストの手順の場合、ガイド モードまたは直接コマンドでプロジェクトを作成できます。

CLI に利用可能なオプションを案内させたい場合はガイド モードを使用します。

ig new

npx で実行する場合:

npx --package igniteui-cli igniteui new

プロジェクト設定を既に知っている場合は直接コマンドを使用します。

ig new my-app --framework=react --type=igr-ts --template=side-nav

npx で実行する場合:

npx ig new my-app --framework=react --template=side-nav

ガイド モードでは、Ignite UI CLI は、プロジェクト名、フレームワーク、テンプレート、テーマ、コンポーネントを追加するか、セットアップを完了するか、を対話形式で聞いてきます。直接モードでは、フレームワークとサポートされているオプションをコマンド自体に指定します。

プロジェクト テンプレート、CLI コマンド オプション、ig add などのコンポーネント スキャフォールディング コマンドの詳細については、Ignite UI CLI を参照してください。

VS Code

VS Code の GitHub Copilot は、ワークスペース レベルの構成ファイルを介して MCP サーバーをサポートします。プロジェクト ルートから ig ai-config (Angular の場合は ng generate @igniteui/angular-schematics:ai-config) を実行するとこのファイルを自動的に生成できます。手動で構成する場合は、プロジェクト ルートの .vscode/mcp.json を作成または編集します。

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

最初に Ignite UI CLI でプロジェクトを作成した場合は、生成された .vscode/mcp.json を確認し、両方のエントリが存在することを確認してください。

保存したら、GitHub Copilot チャット パネルを開き、Agent モードに切り替えると、Ignite UI CLI MCP ツールが利用できるようになります。

Cursor

Cursor はプロジェクト スコープの MCP 構成をサポートします。プロジェクト ルートに .cursor/mcp.json を作成または編集します。

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

サーバーは、新しい Cursor チャット セッションを開くと自動的に選択されます。

Claude Desktop

サーバーを Claude Desktop 構成ファイルに追加します。

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

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

保存後に Claude Desktop を再起動します。チャット入力エリアに MCP サーバー インジケーター (スライダー アイコン) が表示され、MCP ツールがアクティブであることが確認されます。

Claude Code

Claude Code は、CLI とプロジェクト スコープの .mcp.json ファイルを介して MCP サーバーをサポートします。チームと構成を共有するには、プロジェクト ルートに .mcp.json を作成または編集します。

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

または、ローカル環境専用にコマンド ラインでサーバーを追加できます。

claude mcp add igniteui-cli -- npx -y igniteui-cli mcp
claude mcp add igniteui-theming -- npx -y igniteui-theming igniteui-theming-mcp

Claude Code 内で /mcp コマンドを使用して、サーバーが接続されていることを確認します。

JetBrains IDE

JetBrains AI Assistant は、IDE 設定を介して MCP サーバーをサポートします。

1. Settings (macOS では Preferences) を開きます。

2. Tools → AI Assistant → Model Context Protocol (MCP) に移動します。

3. + Add をクリックし、As JSON を選択するかフォーム フィールドを使用します。

4. 次の構成を入力します。

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

5. OK をクリックして AI Assistant を再起動します。

その他の MCP クライアント

他の MCP 互換クライアントの場合は、次の起動コマンドで STDIO トランスポートを使用します。

npx -y igniteui-cli mcp
npx -y igniteui-theming igniteui-theming-mcp

GitHub

GitHub Copilot クラウド エージェントはリポジトリ レベルの MCP 構成をサポートします。リポジトリで次の操作を行います。

1. メインのリポジトリ ページを開きます。
2. Settings をクリックします。
3. サイドバーで Copilot → Cloud agent に移動します。
4. MCP configuration セクションに JSON を貼り付けます。
5. Save をクリックします。

次のようなリポジトリ構成を使用します。

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

このセットアップは、GitHub クラウド エージェントがリポジトリ コンテキストから直接同じ CLI MCP と Theming MCP ツールを使用する場合に便利です。

利用可能なツール

MCP サーバーは、AI がプロンプトに基づいて自動的に使用するツールのセットを公開しています。これらのツールを直接呼び出す必要はありません。チャットで必要なものを説明すれば、アシスタントが適切なツールを選択します。このテーブルは、開始前に何が利用可能かを把握するためのものです。

現在のパラメーターを含むライブ リストを取得するには、次のように質問します。

「Ignite UI CLI MCP が提供するツールは何ですか?」

各ツールの概要を以下に示します。

まとめると、CLI MCP ツールは以下を支援します。

• 新しいプロジェクトの作成
• 既存プロジェクトでの作業
• コンポーネントの追加と変更
• プロジェクト構造と構成の更新
• ドキュメントと API の質問への回答

テーマ サーバーは、同じクライアント セッションにスタイリング、テーマ、パレット、トークン ワークフローを追加します。

主要なハンズオン ワークフローについては、Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルドを参照してください。

一般的なワークフロー

以下のセットアップ シナリオは、各開始点を使用するタイミングを示します。

CLI ファーストセットアップ

最も速いガイド付きセットアップが必要な場合は、最初に Ignite UI CLI でプロジェクトを作成します。ig new は、MCP 向けに構成する AI クライアントとスキル ファイルをセットアップするエージェントを選択するプロンプトを表示します。

シナリオの例:

• 「最初に Ignite UI CLI で新しいプロジェクトを作成し、生成されたプロジェクトを VS Code で開き、そこから MCP で続ける」
• 「React プロジェクトが必要なので、CLI で作成してから MCP を使用してページとコンポーネントを追加する」

空のフォルダーのセットアップ

自分で MCP 構成を追加した後、アシスタントにチャットからプロジェクトを作成させたい場合は、空のフォルダーから始めます。

シナリオの例:

• 「完全に空のフォルダーがあり、MCP が接続された後にアシスタントにチャットからプロジェクト全体を作成させる」
• 「最初に Ignite UI CLI を手動で実行したくない。MCP で最初のプロジェクト作成ステップを動かしたい」

既存プロジェクトのセットアップ

現在のコードベースを維持してアシスタントにプロジェクトの変更、コンポーネント作業、ドキュメントの質問を支援させたい場合は、MCP を既存のプロジェクトに接続します。

シナリオの例:

• 「プロジェクトは既にあり、アシスタントにページとコンポーネントの更新を支援させるためだけに MCP を追加したい」
• 「プロジェクトは既に存在し、主に現在のコードベースで作業しながらドキュメントと API の質問をしたい」

トラブルシューティング

npx が認識されない

Node.js がインストールされていないか、現在のターミナル環境で利用できません。nodejs.org から Node.js をインストールし、node --version で確認します。

ig が認識されない

グローバルな ig コマンドを使用したい場合は、最初に npm install -g igniteui-cli で Ignite UI CLI をインストールします。グローバル インストールが不要な場合は、代わりに npx --package igniteui-cli igniteui ... 形式を使用します。

構成を保存した後に MCP ツールが表示されない

ワークスペースをリロードし、エディターを再起動するか、AI クライアントを再起動します。一部のクライアントでは、新しい MCP 構成ファイルを検出するために完全な再起動が必要です。

一方のサーバーが起動しない

構成コンテンツがキー名と引数の順序を含めて例と正確に一致していることを確認します。

プロジェクトは作成されたが、MCP がいずれかの AI クライアント用に構成されていない

ig new はどのクライアントを構成するか選択するプロンプトを表示します。プロジェクト作成時にクライアントをスキップした場合は、ig ai-config を実行して、プロンプトが表示されたときに欠けているクライアントを選択します。

アシスタントが間違ったフォルダーで作業しているか、プロジェクト ファイルが見つからない

AI クライアントがプロジェクト ルートを指していることを確認します。エディター ベースのクライアントを使用している場合は、プロジェクト ルート フォルダーを開きます。デスクトップまたはチャット ファーストのクライアントを使用している場合は、正しいプロジェクト フォルダーをセッション コンテキストとして使用できるようにします。

空のフォルダーのセットアップが期待通りに動作しない

開始前にフォルダーが実際に空であることを確認します。フォルダーに既にプロジェクト ファイルが含まれている場合は、新しい空のワークスペースとして扱う代わりに、既存プロジェクトの手順を使用します。

GitHub MCP 構成が拒否される

JSON が mcpServers 構造を使用していること、および各ローカル サーバー エントリに type、command、args が含まれていることを確認します。tools フィールドを含める場合は、有効なツール名または ["*"] を使用します。

その他のリソース

• Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド

• Ignite UI を使った AI 支援開発

• Ignite UI for React スキル

• Ignite UI Theming MCP

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for React フォーラム (英語)
• Ignite UI for React GitHub (英語)