Ignite UI を使った AI 支援開発

Ignite UI for Angular、React、Web Components は、3 つのパーツで構成される AI ツールチェーン (エージェント スキル、Ignite UI CLI MCP サーバー、Ignite UI Theming MCP サーバー) を提供します。これにより、AI コーディング アシスタントに正しいコンポーネント API、インポート パス、デザイン トークンを提供します。エージェント スキルは、AI エージェントが特定のプロジェクトで Ignite UI を使用する方法を定義する、開発者が管理する命令パッケージです。CLI MCP サーバーは、Model Context Protocol を介してアクティブな AI エージェント セッションに Ignite UI CLI スキャフォールディング、コンポーネント管理、ドキュメント ツールを公開します。Theming MCP サーバーは、Ignite UI テーマ エンジンをクエリ可能なエージェント コンテキストとして公開します。3 つのコンポーネントはすべて、GitHub Copilot、Cursor、Claude Desktop、Claude Code、JetBrains AI Assistant と連携します。

AI ツールチェーンは、現在、CLI MCP およびエージェント スキル レイヤーで Blazor をサポートしていません。Blazor の対応は Theming MCP のみで提供されます。CLI MCP サーバーには STDIO トランスポートが必要であり、HTTP ベースの MCP クライアントはサポートされていません。エージェント スキルと CLI MCP サーバーは、プロジェクト ファイルを自律的に変更することはなく、アクティブな AI エージェントにツールと命令を公開し、開発者のプロンプトに応じてエージェントが動作します。

AI ツールチェーンの概要

Ignite UI の AI ツールチェーンは、独立して使用可能な 3 つのレイヤーで構成されています。各レイヤーは単独で有効にすることができ、連携して動作するように設計されています。

CLI MCP サーバーと Theming MCP サーバーはどちらも npx を通じて起動され、STDIO トランスポートを介して任意の MCP 互換クライアントに接続します。エージェント スキルは、AI クライアントがディスクから読み取る、プロジェクトに配置されたローカル ファイルです。

エージェント スキル

エージェント スキルは、特定のフレームワークにおける Ignite UI の使用方法を、AI コーディング アシスタントに正確に伝えるための、開発者が管理する構造化されたパッケージです。スキル パッケージには、コンポーネント パターン、インポート パス、デシジョン フローを含む SKILL.md 命令ファイル、Ignite UI 公式ドキュメントへの参照、スキーマ ファイルや図などのアセットを含めることができます。スキルが AI クライアントでアクティブになると、エージェントは、古い API シグネチャやインポート パスを引用する恐れのある一般的な学習データに依存する代わりに、スキルに従います。

Ignite UI は、Angular、React、Web Components、Blazor 向けの専用スキル パッケージを提供しています。スキル パッケージは開発者が管理するものであり、チームの規約に合わせて SKILL.md を編集したり、プロジェクト固有のパターンの追加や内部デザイン システムを参照するなどして、コードベースとともにパッケージをバージョン管理できます。

完全なセットアップ手順と IDE の設定については、エージェント スキルを参照してください。

CLI MCP サーバー

Ignite UI CLI MCP サーバー (igniteui-cli) は、Infragistics が管理する MCP サーバーで、Ignite UI CLI スキャフォールディングとドキュメント ツールをアクティブな AI エージェント セッションに公開します。接続すると、AI アシスタントはチャット セッションの自然言語プロンプトを通じて、Angular、React、または Web Components プロジェクトの作成、Ignite UI コンポーネントの追加と変更、ドキュメントと API の質問への回答を行うことができます。

CLI MCP サーバーはグローバル インストールなしで npx 経由で起動します。

npx -y igniteui-cli mcp

サーバーは、GitHub Copilot を使用した VS Code、Cursor、Claude Desktop、Claude Code、JetBrains AI Assistant、および STDIO トランスポートをサポートするその他の MCP 互換クライアントに接続します。クライアントによって構成形式が異なります。以下の CLI MCP セットアップ ガイドを参照してください。

CLI MCP サーバーは Blazor をサポートしていません。また、CLI MCP サーバーはコードを自律的に生成することはなく、AI エージェントにツールを公開するのみです。開発者のプロンプトに応じてエージェントがツールを呼び出します。

Theming MCP サーバー

Ignite UI Theming MCP サーバー (igniteui-theming) は、Ignite UI テーマ エンジンをクエリ可能なエージェント コンテキストとして公開する別の MCP サーバーです。デザイン トークン アクセス、パレット定義、CSS カスタム プロパティ生成、WCAG AA コントラスト検証をカバーします。CLI MCP サーバーとはアーキテクチャ的に分離されており、プロジェクト スキャフォールディング ツールを公開せずに AI エージェントにテーマ ツールへのアクセスを提供するために、独立して接続できます。

Theming MCP サーバーは npx 経由で起動します。

npx -y igniteui-theming igniteui-theming-mcp

Theming MCP サーバーは Angular、React、Web Components、Blazor をサポートしています。Ignite UI のリリースごとに更新されるため、エージェントは常に最新のトークン サーフェスに対して動作します。

構成の詳細については、Theming MCPを参照してください。

サポートされている AI クライアント

CLI MCP サーバーと Theming MCP サーバーは、STDIO トランスポートで MCP をサポートする任意のエディターまたは AI クライアントと連携します。

エージェント スキルは、.github/copilot-instructions.md を介した GitHub Copilot、.cursorrules または .cursor/rules/ を介した Cursor、.windsurfrules を介した Windsurf、プロジェクト レベルのプロンプト設定を介した JetBrains AI Assistant と互換性があります。

AI ツールチェーンのセットアップ

Ignite UI AI ツールチェーンのセットアップには 3 つのステップがあります。フレームワークのエージェント スキルをロードし、CLI MCP サーバーを接続し、オプションで Theming MCP サーバーを接続します。3 つのステップはすべて独立しており、任意の順序で実行できます。

ステップ 1 - エージェント スキルをロードする

フレームワークの Ignite UI スキル パッケージをプロジェクトのエージェント検出パスにコピーします。スキル パッケージは node_modules/igniteui-{framework}/skills/ のライブラリに付属しています。IDE との連携設定はクライアントに応じてその構成ファイルに保存してください。

完全なセットアップについては、エージェント スキルを参照してください。

ステップ 2 - CLI MCP サーバーを接続する

AI クライアントの構成ファイルに igniteui-cli MCP サーバー エントリを追加します。クライアントに合った JSON 構造を使用してください。

VS Code (.vscode/mcp.json):

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

Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP クライアント:

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

VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、CLI MCPを参照してください。

ステップ 3 - Theming MCP サーバーを接続する (オプション)

igniteui-cli と並んで、同じ MCP 構成ファイルに igniteui-theming エントリを追加します。

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

構成の詳細とテーマ ワークフローについては、Theming MCPを参照してください。

その他のリソース

• エージェント スキル
• Ignite UI CLI MCP
• Ignite UI Theming MCP

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

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