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

Ignite UI CLI MCP と Ignite UI Theming MCP を組み合わせることで、AI アシスタントがチャット プロンプトを通じて Ignite UI for Angular アプリケーションのスキャフォールド、拡張、テーマ設定を行えるようになります。CLI MCP はプロジェクトの作成、コンポーネント作業、およびドキュメントの質問を処理します。Theming MCP はパレット、テーマ、トークン、およびスタイリング ワークフローを処理します。このトピックでは、全体のプロセスをわかりやすい 1 つのフローで示します。

CLI MCP と Theming MCP の役割分担

CLI MCP と Theming MCP は、Ignite UI for Angular 開発ワークフローにおいて、それぞれ異なる役割を担う、機能が重複しない 2 つの独立した STDIO トランスポート MCP サーバーです。

どちらのサーバーも自律的に手順を実行することはありません。AI アシスタントはプロンプトへの応答としてのみ MCP ツールを呼び出します。CLI MCP はテーマまたは Sass ファイルを生成または変更しません。Theming MCP はコンポーネントのスキャフォールド、アプリケーション ロジックの変更、またはドキュメントに関する質問への回答を行いません。両方のサーバーには STDIO トランスポートをサポートする MCP クライアントが必要です。ブラウザーのみのチャット インターフェースからは使用できません。

必要なもの

開始する前に、以下を確認してください:

• npx が使用可能な Node.js がインストールされていること
• MCP サポートがある対応 AI クライアント
• 初回使用時の npx パッケージ解決のためのインターネット アクセス
• プロジェクト用のフォルダー

この手順は、Ignite UI CLI がプロジェクトをスキャフォールドし、VS Code の最初の MCP 構成を自動的に準備する CLI ファースト のセットアップで最も効果的に機能します。

各クライアントの詳細なセットアップ リファレンスが必要な場合は、「Angular Schematics & Ignite UI CLI」および「Ignite UI Theming MCP」を参照してください。

手順 1: Ignite UI CLI から開始する

推奨される開始点は、まず Ignite UI CLI でプロジェクトを作成することです。

Ignite UI CLI は次のいずれかの方法で実行できます:

グローバル インストール

npm install -g igniteui-cli

これにより、任意のターミナル セッションで ig コマンドが使用可能になります。

グローバル インストールなしで実行

npx ig new

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

オプションを案内してもらいたい場合はガイド モードを使用できます:

ig new

npx での同等形式:

npx ig new

プロジェクト設定がわかっている場合は、直接コマンドを使用することもできます。

Angular の場合:

ig new my-app --framework=angular

npx での同等形式:

npx ig new my-app --framework=angular

次に行われること:

• Ignite UI CLI がプロジェクト構造を作成する
• 必要なプロジェクト パッケージがインストールされる
• CLI ファースト の場合、VS Code が初期 .vscode/mcp.json を取得する

手順 2: CLI MCP と Theming MCP を接続する

プロジェクトが作成されたら、AI クライアントで両方の MCP サーバーが使用可能であることを確認します。

VS Code

{
  "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"]
    }
  }
}

構成を保存した後、AI クライアントを再起動して、igniteui-cli と igniteui-theming の両方が利用可能であることを確認します。

手順 3: アシスタントにプロジェクトを確認させる

両方の MCP サーバーが実行中になったら、新しいチャットを開き、プロジェクトレベルのコンテキストを提供することから始めます。

有用なプロンプト:

「このプロジェクトを確認して、機能を追加する前に現在の構造を説明してください。」

「何が作成されたか、メイン エントリ ポイントはどこか、新しいページをどこに追加すべきかを教えてください。」

次に行われること:

• CLI MCP が生成済みまたは既存のプロジェクトを分析する
• アシスタントが構造を要約する
• 次のステップに向けた共通の基盤が整う

手順 4: チャットを通じて実際の機能を追加する

プロジェクト構造が明確になったら、具体的な機能を要求します。

プロンプト例:

「Ignite UI for Angular グリッドを含む Orders ページを追加してください。Order ID、Customer Name、Order Date、Total Amount の列を含め、グリッドをサンプル データにバインドしてください。」

フォローアップ プロンプト:

「Orders グリッドのフィルタリング、ソート、ページングを有効にし、ページのレイアウトをアプリの他の部分と一致させてください。」

次に行われること:

• CLI MCP が適切なページを追加または更新する
• アシスタントがコンポーネント コードを作成または更新する
• 機能が既存のアプリ構造に統合される

小さな改善を続けることもできます:

「グリッドの上にシンプルなツールバーを追加し、レイアウトをコンパクトに保ってください。」

手順 5: 同じセッションでドキュメントの質問をする

コンポーネント API を調べるために会話を離れる必要はありません。

プロンプト例:

「Angular グリッドではどのようなフィルタリング オプションがサポートされていて、シンプルな Orders テーブルに最適なものはどれですか?」

「コンボコンポーネントはどのようなイベントを公開しており、選択変更にはどのイベントを使用すればよいですか?」

「サイド ナビゲーション レイアウトに最適な Ignite UI for Angular コンポーネントはどれですか、その理由は?」

次に行われること:

• CLI MCP がドキュメント対応ツールを使用して質問に回答する
• その直後に実装依頼を行うことができます

例えば:

「現在の Orders グリッドに推奨されるフィルタリング アプローチを適用してください。」

手順 6: カスタム テーマを適用する

アプリ構造とメイン機能が整ったら、同じチャットで Theming MCP に切り替えます。

プロンプト例:

「アプリにプロフェッショナルなテーマを適用してください。ディープ ブルーのプライマリ カラー、ウォーム アンバーのセカンダリ カラーを使用し、スペーシングはコンパクトに保ってください。」

次に行われること:

• Theming MCP がパレットとテーマ構成を生成する
• アシスタントが適切なテーマまたはスタイル ファイルを更新する
• アプリのスタイリングが現在の構造と整合性を保つ

より的を絞ったプロンプトでテーマをさらに改良できます:

「グリッド ヘッダーにプライマリ カラーを使用し、行の高さを少し高くして、ページの他の部分は視覚的にすっきりとした印象を保ってください。」

「グリッドのスタイリングを改良する前に、生成されたプライマリとセカンダリのパレット シェードを表示してください。」

手順 7: 繰り返し改善する

このワークフローの最も強力な部分は、1 つの会話の中でプロジェクト作業、ドキュメントの質問、テーマ設定を行き来できることです。

プロンプト例:

「現在の Orders ページ構造を維持しながら、レイアウトを簡素化し、フィルター エリアをよりコンパクトにしてください。」

「現在のテーマを使用しながら、ダッシュボード カードとグリッドの間隔をアプリの他の部分とより統一感のあるものにしてください。」

「生成されたファイルを確認し、プロジェクト、コンポーネント、およびテーマに対して行った主な変更点について説明してください。」

次に行われること:

• CLI MCP がプロジェクトとコンポーネントを改良する
• Theming MCP がテーマとトークンを改良する
• アシスタントがワークフロー全体をエンド ツー エンドで接続し続ける

トピックのまとめ

このワークフローは、プロジェクトのセットアップ、コンポーネント作業、ドキュメントの検索、テーマ設定を 1 つのチャット セッションにまとめたい場合に効果的です。

以下の場合に使用してください:

• 孤立したコード スニペットではなく、実際のプロジェクト スキャフォールドから開始したい場合
• 実装とドキュメントに関する質問を交互に行うことが予想される場合
• プロジェクト構造と視覚的なスタイルを一緒に発展させたい場合

実際には、最も効果的なパターンは、プロジェクトとコンポーネントの変更にはCLI MCPを使用し、必要に応じてドキュメントに関する質問のために一時停止し、その後、同じ会話を離れることなく Theming MCP を使用して結果を改良することです。

関連トピック

• Angular Schematics & Ignite UI CLI
• Ignite UI Theming MCP
• Ignite UI for Angular スキル

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

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