AI支援アプリ開発 開発者とAIエージェントのための1つのプレイブック
Ignite UIは、Angular、React、Web Components、BlazorへのAI支援アプリ開発をもたらします。GitHub Copilot、Cursor、Claude CodeなどのAIコーディングアシスタントは高速ですが、お使いのコンポーネント、API、デザインシステムは把握していません。Agent Skills、Ignite UI CLI MCP、Theming MCPがそのコンテキストを提供することで、既に使用しているツールの中で、本番環境に対応したUIを生成できるようになります。
導入企業：
Pick a prompt to see Agent Skills, the CLI MCP and the Theming MCP working together.
Build an Angular sales dashboard with a paged data grid, in our brand purple #7B2D8B
Agent Skillを読み込みました：igniteui-angular-grids
get_project_setup_guide(framework: "angular")ig new · base template
search_docs(query: "grid paging", framework: "angular")grid-paging
create_palette(primary: "#7B2D8B", secondary: "#F97316", surface: "#FAFAFA", name: "brand", platform: "angular", output: "sass")$brand-palette
セットアップとドキュメント用のCLI MCP、パレット用のTheming MCP。アシスタントはig newコマンドを自ら実行します
npm install -g igniteui-cli
ig new SalesDashboard --framework=angular --type=igx-ts --template=base
// styles.scss
@use "igniteui-angular/theming" as *;
$brand-palette: palette(
$primary: #7B2D8B,
$secondary: #F97316,
$surface: #FAFAFA
);
@include palette($brand-palette);Make our React app compact and put the primary buttons in our brand purple
Agent Skillを読み込みました：igniteui-react-customize-theme
get_component_design_tokens(component: "contained-button")primary tokens: background, foreground
create_component_theme(component: "contained-button", platform: "react", output: "css", tokens: {"background": "#7B2D8B"})igc-button[variant="contained"]
set_size(size: "small", platform: "react")--ig-size: 1
Theming MCPのみで、スキャフォールドは不要です
igc-button[variant=contained] {
--ig-contained-button-background: #7B2D8B;
/* hover, focus, active and text colours derive from it */
}
:root {
--ig-size: 1;
}Start a Blazor app with a sortable data grid
Agent Skillを読み込みました：igniteui-blazor-grids
get_project_setup_guide(framework: "blazor")dotnet new and NuGet steps
search_docs(query: "grid sorting", framework: "blazor")grid-sorting
get_api_reference(platform: "blazor", component: "IgbColumn", member: "Sortable")Sortable: bool
同じツールチェーン、.NETの手順、Blazor APIを使用
dotnet new blazor -n SalesApp
cd SalesApp
dotnet add package IgniteUI.Blazor
<IgbGrid Data="sales">
<IgbColumn Field="Region" Sortable="true" />
<IgbColumn Field="Revenue" Sortable="true" />
</IgbGrid>See It Work
その背後にあるツールチェーン the Playbook
開発者とAIエージェントが、ようやく同じ手引きに沿って作業できるようになりました。Agent Skillsはアシスタントに、Ignite UIの正しい使い方を伝えます。CLI MCPは最新のドキュメント、API、セットアップ手順を提供し、Theming MCPはスタイルを生成します。これにより、アシスタントが構築するUIは、最初の生成から、すべての開発者、IDE、フレームワークにまたがってお客様の規約に一致したものになります。
プロンプトを選択して、リクエストが必要とするレイヤーをどのように使うかをご覧ください。
手引きはお客様のものです。APIは当社のものです
3つのレイヤーはそれぞれ個別に設定でき、すべてig ai-configという1つのコマンドでセットアップします。Skillsはお客様が所有し、ご自身の標準で拡張できます。MCPサーバーは、エージェントに最新のIgnite UI APIとテーマエンジンを提供します。
CLI MCPサーバー
アシスタントに最新のIgnite UIドキュメント、APIリファレンス、プロジェクトセットアップ手順を提供します。これにより、記憶に頼ったAPIではなく、Ignite UI CLIを使ってアプリを構築・拡張できます。
- 読み取り専用のツールが6つ：ドキュメント、APIリファレンス、セットアップガイド
- Angular、React、Web Components、Blazor
npx -y igniteui-cli mcpCLI MCPサーバーについてAIエージェントスキル
SKILL.mdファイルは、Ignite UIコンポーネントが実際にどのように使われるか（プロパティ、パターン、落とし穴）をアシスタントに教えます。リポジトリに追加し、独自の規約で拡張できます。
- フレームワークごとのコンポーネント、グリッド、テーマ設定、画像からのデザインからコードへの変換
- igniteui-angular、igniteui-react、igniteui-webcomponentsに含まれています。BlazorスキルはGitHubからインストールされます。
- Copilot、Claude Code、Cursor、Windsurf、Codex、Gemini CLI、JetBrains Junieと連携
Theming MCPサーバー
Ignite UI Theming Engineを通じてパレット、テーマ、コンポーネントスタイルを生成します。アシスタントは推測した値ではなく、実際のトークンでテーマを設定できます。
- Material、Bootstrap、Fluent、Indigo、ライトまたはダーク
- すべての色合いに対するWCAG AA準拠のコントラスト色
npx -y igniteui-theming igniteui-theming-mcpTheming MCPサーバーについて設計段階からの標準化
Angular、React、Blazor、Web Componentsの正確なインポートパス、コンポーネントパターン、プロパティバインディング、意思決定フローを、Copilot、Cursor、Claudeなどに直接組み込みます。エージェントは推測をやめ、お客様の標準に従うようになります。
単一のプロンプトからのダッシュボード
単一のプロンプトから、正しいコンポーネントレイアウトとデータバインディングを備えたデータ駆動型の画面やダッシュボードを作成します。手動によるセットアップを削減し、開発を加速します。
ブランドを一貫して適用
Theming MCPを使って新しい画面にブランドを適用します。近似値を使わず、実際のパレットとデザイントークンの値を用いて、コンポーネント全体で一貫したスタイルを確保します。
デフォルトでグリッド、チャート、フォーム
データ駆動型のグリッド、チャート、フォームをデフォルトで組み合わせ、アプリに必要な機能を追加できるため、強力でインタラクティブなUIコンポーネントを即座に作成できます。
お使いのマシン上で、プライベートに
MCPサーバーはローカルで実行され、同梱のドキュメントから回答します。ローカルLLMと組み合わせれば、すべてのクエリ、データセット、やり取りを非公開に保てます。
---
component: IgrGrid, IgrColumn
toc_name: Column Pinning
keywords: grid, column-pinning, frozen-columns, toolbar, scrolling,
column-order, pinning-position, custom-ui, column-selection
summary: Learn how to pin React Grid columns, control their position,
reorder pinned columns, and build custom pinning interfaces.
Includes toolbar, API, styling, and limitation examples.
premium: true
---
# React Grid Column Pinning
⋮
This example pins columns to the left side of the
[`IgrGrid`](mcp:get_api_reference?platform=react&component=IgrGrid)
and exposes the integrated toolbar UI.
⋮
<IgrColumn field="Company" header="Company" pinned={true} />
<IgrColumn field="ContactName" header="Contact Name" />
<IgrColumn field="ContactTitle" header="Contact Title" />
{/* ... additional columns */}
The Foundation
AI最適化ドキュメント - The Quality Ceiling of the System
Ignite UIのドキュメントはエージェントが利用しやすいように再構成されました。これは単なるリフレッシュではなく、アーキテクチャの変更です。以下は、アシスタントがCLI MCPにトピックを要求したときに受け取る内容です：
- すべてのトピックに要約とキーワードを付与（4つのフレームワークにわたる1,230件すべて）。これにより、エージェントがサイト全体を読まなくても、検索で適切なページを見つけられます。
- ほとんどのトピックでAPI名がAPIツールへ直接リンクされており、正確なプロパティ、メソッド、イベントまでワンクリックで到達できます。
- ほぼすべてのトピックにコードサンプルを掲載。重複する部分は削減されているため、サンプルは短く、トークンの消費も少なくなっています。
数分でAI支援アプリ開発を始める
既存のIDEとワークフローのままで、4つのステップでIgnite UIプロジェクトから、フレームワークに対応した正しいIgnite UIコードを書くAIアシスタントまで進めます。新規で始める場合は、ig newで作成したプロジェクトに、これらがすべて設定済みで付属しています。
プロジェクトにIgnite UIを追加
お使いのフレームワーク用のライブラリをインストールすると、ai-configがそれに合ったAgent Skillsを追加できます。MCPサーバーは、その前からでも動作します。
コマンドを1つ実行：ai-config
選択したAIクライアント向けにCLI MCPとTheming MCPを設定し、フレームワーク用のAgent Skillsを、エージェントが読み取るフォルダにコピーします。
AIクライアントでサーバーを起動
ai-configはサーバーを設定し、クライアントがそれを起動します。VS CodeまたはCursorではワンクリック、Claude Codeでは自動です。
アシスタントに指示
平易な言葉で依頼します。アシスタントはSkillsに従い、最新のAPIとテーマエンジンを参照して、実際のIgnite UIコンポーネントで構築します。
Angular
React
Web Components
Blazor# 1 · Add Ignite UI to your project
ng add igniteui-angular
npm install igniteui-react
npm install igniteui-webcomponents
dotnet add package IgniteUI.Blazor
# 2 · Configure the whole toolchain in one command
npx igniteui-cli@latest ai-config
# 3 · Start the servers in your AI client
# VS Code .vscode/mcp.json → Start
# Cursor Settings → MCP → enable
# Claude Code starts them on first use
# 4 · Ask for what you want
> Build a sales dashboard with a paged data grid
よくある質問
Ignite UI Agent Skillsとは？
Agent Skillsは、AIアシスタントのコンテキストに読み込まれる構造化されたMarkdownファイルです（懸念事項ごと、フレームワークごとに1つ）。正しいインポートパス、コンポーネントパターン、プロパティバインディング、およびAngular、React、Web Components、Blazorの意思決定フローを定義します。Skillが有効になると、CopilotやCursorは一般的な学習データに頼るのをやめます。その学習データは、特定のライブラリのバージョンには古い、または誤っていることがよくあるためです。代わりにSkillに従います。出力はコンパイルされやすく、正しいインポートと慣用的なパターンを備えたものになります。
Ignite UI CLI MCPサーバーとは？
CLI MCP（Model Context Protocol）サーバーは、Ignite UIの最新ドキュメント、APIリファレンス、プロジェクトセットアップガイドを、Angular、React、Web Components、Blazor向けに照会可能なコンテキストとして提供します。エージェントはコーディングセッション中にこれを呼び出し、コンポーネントAPIを調べたり、CLIに基づくセットアップやスキャフォールドの手順に従ったりします。デザイントークンとテーマ設定は、別のTheming MCPから提供されます。エージェントはドキュメントサイト全体を読むのではなく、必要な、バージョンが一致した対象エントリだけを取得します。CLIのリリースごとに更新されます。
Copilotにドキュメントを渡すだけの場合と、これはどう違いますか？
ドキュメントは、AIエージェントが読んで解釈するテキストです。MCPサーバーは、エージェントが呼び出して構造化された応答を受け取るツールです。出力品質の差は大きく、特にコンテキスト上限の端では、テキストが多いドキュメントは、対象を絞ったツールの応答よりも速く劣化します。Agent Skillsは第2のレイヤーを追加します。明示的な意思決定フローとパターンにより、エージェントがAPIを照会する前に誤った選択をすることを防ぎます。SkillsとMCPを組み合わせることで、推測を仕組みに置き換えます。
プロジェクト用にSkillsをカスタマイズできますか？
はい、それが設計上の方針です。Skillはmarkdownファイルです。チームの規約に合わせて編集し、プロジェクト固有のコンポーネントパターンを追加し、アーキテクチャ上の決定を徹底できます。コードベースと一緒にバージョン管理してください。
SkillsとMCPサーバーの両方が必要ですか、それとも個別に使えますか？
どちらも単独で機能し、それぞれに価値があります。MCPサーバーをまだ導入していないチームでは、Skillsだけでもエージェントの出力が大きく改善します。Skillsがなくても、MCPサーバーだけでエージェントはライブAPIにアクセスできます。両方を組み合わせると、完全なコンテキストスタックになります。
Ignite UIはAIの幻覚を減らしますか？
SkillsとMCPサーバーは、幻覚を発生源から解消します。Skillsは、誤ったインポートパス、不正確なAPIシグネチャ、古いコンポーネント名といった最も一般的な失敗モードを対象とし、学習データからの推測を明示的な指示に置き換えます。MCPサーバーは、学習データの古いスナップショットではなく、現在のライブラリAPIにエージェントを結び付けます。その結果、書き直しサイクルの原因となるエラーが大幅に減ります。幻覚を完全になくす仕組みはありませんが、お客様の規約と現在のライブラリAPIの両方にエージェントを基づかせることで、現在のツールで可能な限り近づけます。
Theming MCPはすべてのフレームワークで利用できますか？
はい。Theming MCPは本番環境で稼働しており、現在Angular、React、Web Components、Blazorをサポートしています。
Ignite UI AIツールは、エンタープライズの本番環境に適していますか？
AIツールチェーン（Agent Skillsと、画像デザインからのアプリ生成を含む、およびCLIとTheming MCPサーバー）は、35年以上にわたりエンタープライズ向けUIコンポーネントを提供してきたインフラジスティックスのIgnite UI上に構築されています。Skillsはライブラリとともにバージョン管理されます。MCPサーバーは現在のリリースを反映します。別途のAI向けティアはなく、従量課金もなく、事前の通知なしに変更されうるサードパーティのAIインフラへの依存もありません。
Ignite UIはGitHub Copilot、Cursor、Windsurfで動作しますか？
はい。Agent Skillsは、GitHub Copilot（VS Code Agent Modeを含む）、Cursor、Windsurf、Claude Code、Codex、Gemini CLI、JetBrains Junieで動作します。それぞれに永続的なセットアップ経路があります。ig ai-configがプロジェクトごとに一度それを書き込み、以降はすべてのセッションがお客様の標準に従います。MCPサーバーは、STDIOに対応するあらゆるMCPクライアントで動作します。
Ignite UIに含まれる
含まれるAI機能 No New Pricing
お客様とチームがすでに使用しているAIツールを拡張します。AIエージェントはすでにチームの一員となっているため、ツールチェーンはライブラリの一部として提供されます。
- No usage-based AI tier
- No separate billing model
- No new IDE to learn
Select a framework to get started for free:
Angular
React
Web Components
Blazor