diff --git a/cspell.json b/cspell.json index 92337f7824..612c528ec5 100644 --- a/cspell.json +++ b/cspell.json @@ -260,6 +260,7 @@ "batchediting", "updateparameters", "alldata", - "subtag" + "subtag", + "Underinvest" ] } diff --git a/en/components/ai/agentic-workflow.md b/en/components/ai/agentic-workflow.md new file mode 100644 index 0000000000..c2f8eb179b --- /dev/null +++ b/en/components/ai/agentic-workflow.md @@ -0,0 +1,291 @@ +--- +title: AI-Assisted Development with Ignite UI — Agent Skills & MCP Server for Every Framework +description: Ignite UI provides Agent Skills, an MCP server, and a Design-to-Code pipeline that ground AI coding assistants in correct component APIs, import paths, and design tokens for Angular, React, Blazor, and Web Components. +keywords: ignite ui agent skills, ignite ui mcp server, ai-assisted ui development, copilot angular components, cursor blazor ui library, ai component library angular react blazor, mcp server ui components, design-to-code figma angular +--- + +# AI-Assisted Development with Ignite UI — Agent Skills & MCP Server for Every Framework + +Ignite UI is the only UI component library with published Agent Skills and a live MCP server across Angular, React, Blazor, and Web Components. It grounds AI coding assistants — GitHub Copilot, Cursor, Windsurf, VS Code Agent Mode — in correct component APIs, import paths, and design tokens, so agents generate production-ready code without hallucination or rework cycles. + +> **At a glance:** Agent Skills (developer-owned, project-customizable) + Ignite UI MCP Server (Infragistics-maintained, always current) + Theming MCP (design tokens, all 4 frameworks, live) + Design-to-Code pipeline (Figma Design Kit → Angular/React code). + +--- + +## Contents + +1. [Hero — The Core Problem and Solution](#hero) +2. [Standardization by Design](#standardization) +3. [The Two-Layer Toolchain](#toolchain) +4. [MCP Server Architecture](#mcp-architecture) +5. [Competitive Comparison](#competitive) +6. [Getting Started](#getting-started) +7. [FAQ](#faq) + +--- + + + Your Developers and AI Agents, Finally Working from the Same Playbook + +AI coding assistants are fast but uninformed — they don't know your components, your APIs, or your design system. Without the right context, Copilot and Cursor generate plausible-looking code that references wrong import paths, outdated API signatures, and components that don't exist in your version. The result is a rework cycle that eliminates the productivity gain the tools were supposed to deliver. + +Ignite UI fixes this. Agent Skills, an MCP server, and a Design-to-Code pipeline give your agents the exact context they need to generate scalable, production-ready UI inside the tools your team already uses. No new IDE, no new process, no new library — your team keeps its workflow, and the agent earns its place in it. + +**Works with:** GitHub Copilot · Cursor · Windsurf · VS Code Agent Mode · JetBrains AI · Claude Code + +**Frameworks covered:** Angular · React · Blazor · Web Components + +--- + + +## Standardization by Design + +AI agents generate correct UI code when they have a standard to follow — and Ignite UI provides it. Agent Skills embed the exact import paths, component patterns, property bindings, and decision flows for Angular, React, Blazor, and Web Components directly into Copilot, Cursor, and Windsurf. The agent stops approximating and starts following a defined standard. + +The result: UI that aligns with your enterprise conventions from the first generation — consistent across every developer, every IDE, and every framework your team runs — without manual review cycles to catch what the agent got wrong. + +--- + + +## The Two-Layer Toolchain + +Two layers. One gives developers control. One gives agents authority. Together, they replace guesswork with a system. + +### Layer 1 — Agent Skills (Developer-Owned) + +**What an Agent Skill is:** A Skill is a structured, developer-owned package that tells AI coding assistants exactly how to use Ignite UI for a specific framework. A Skill can contain: + +- **`SKILL.md`** — the primary instruction file: correct import paths, component patterns, property bindings, and decision flows +- **References** — links to authoritative documentation, API specs, and usage examples the agent can fetch +- **Assets** — diagrams, schema files, or structured data that support agent understanding +- **Scripts** — automation helpers for Skill setup, discovery configuration, or IDE wiring + +Skills are framework-specific. Angular, React, Blazor, and Web Components each have their own Skill — because each has its own import paths, component API signatures, and idiomatic patterns. + +**What makes Skills different from documentation:** A Skill is structured for agent consumption, not human reading. It defines decision flows, not narratives. An agent resolving "which grid API handles server-side pagination" gets a structured instruction, not a paragraph to interpret. + +**Developer control:** The Skill package is yours. Edit the `SKILL.md` to match your team's conventions. Add project-specific component patterns. Reference your internal design system. Include scripts for your CI environment. Enforce your architectural decisions. Version the entire package alongside your codebase. No build step, no approval process — your team owns what it becomes. + +_We don't hide enterprise UI standards behind human-only tools. We expose them directly to agents — and then hand the controls to you._ + +### Layer 2 — The Ignite UI MCP Server (Infragistics-Owned) + +**What the MCP server is:** The Ignite UI MCP (Model Context Protocol) server is Infragistics-maintained infrastructure that exposes the complete Ignite UI component API, design tokens, and usage patterns as live, queryable context. It is not a documentation wrapper — it is a structured tool server that agents call and receive machine-readable responses from. + +**Key distinction from Skills:** Skills define _your_ standard — your conventions, your customizations, your project rules. The MCP server enforces _the library's_ standard — the authoritative, current API surface that Infragistics maintains. The agent gets both in context simultaneously. + +**Always current:** The MCP server updates with every Ignite UI release. Agents never work from a stale training snapshot. Developers don't maintain it — Infragistics does. + +**What the two layers produce together:** Developer flexibility at the Skills layer. Library authority at the MCP layer. Output that is correct against the Ignite UI API _and_ consistent with your team's conventions — not one or the other. + +Concretely: + +- Add filtering and Excel export to an existing grid — correct imports, correct API, no manual lookup +- Generate a date picker with validation and custom theming — complete and importable, no placeholders +- Apply corporate design tokens across a new screen — against your actual token values, not approximations +- Scaffold a dashboard with correct component layout and data bindings from a single prompt + +### Design-to-Code — The Pipeline That Starts Before the Agent + +Skills and MCP ground the agent during development. Design-to-Code eliminates the gap before development starts. + +Designers work in Figma with the Ignite UI Design Kit. The pipeline reads that output and maps each component to correct Angular or React code — property bindings, variants, and layout included. It works because Infragistics owns both ends: the Design Kit and the component library. The mapping is exact, not approximated. + +The agent then iterates on that starting point — grounded by Skills and MCP — from correct code, not from scratch. + +> **Scope:** Design-to-Code works with Ignite UI Design Kit files specifically. This is a feature — the pipeline knows exactly which Figma component maps to which Ignite UI component and what each property means in code. Generic Figma-to-code tools guess. This pipeline knows. + +### AI Capabilities Included + +Agent Skills, the MCP server, and the Design-to-Code pipeline extend the tools your team already uses — Copilot, Cursor, Windsurf. No usage-based AI tier. No separate billing model. No new IDE. The toolchain is part of the library because agents are already part of your team. + +--- + + +## MCP Server Architecture + +### One MCP Server, Every Framework, One Standard + +The Ignite UI MCP server is a single, unified tool server — not a separate implementation per framework. Connect it once. It understands Angular, React, Blazor, and Web Components natively, and serves the correct component APIs, usage patterns, and schemas for whichever framework your project runs. + +This is a deliberate architectural decision. A per-framework MCP means per-framework maintenance, per-framework configuration, and per-framework inconsistency. One MCP means every developer on every framework gets the same depth, the same authority, and the same currency of context. + +### Core Tools — Available Across All Frameworks + +| Tool | What it does | +|---|---| +| `get_started` | Bootstraps correct project configuration — module imports, theming setup, peer dependency alignment — adapted to the target framework | +| `list_components` | Returns the full component catalogue with metadata: selector names, input/output signatures, supported variants — in framework-correct syntax | +| `scaffold_grid` | Generates a fully configured data grid with correct column definitions, data bindings, and feature flags for the active framework | +| `get_component_docs` | Retrieves structured usage documentation for any component — token-efficient, pattern-dense, framework-specific | + +The agent queries the server, declares its framework context, and gets the right answer for the right framework — from a single connected source. + +### Web Components — Multi-Host Aware + +Web Components run in Angular, React, Vue, and plain HTML host environments. The MCP reflects that. Agents provide host framework context when querying — and receive usage patterns correct for that host. No `CUSTOM_ELEMENTS_SCHEMA` confusion in Angular. No missing `defineComponents()` call in React. No incorrect property binding syntax. Host-aware output from a single query. + +### The Theming MCP — A Separate Server for Your Design System + +**What it is:** The Theming MCP is architecturally separate from the component API server. It exposes the Ignite UI Theming Engine exclusively — design tokens, theme configuration, palette definitions, and visual standards as queryable agent context. + +**Frameworks:** Angular · React · Blazor · Web Components — all four, in production today. + +**Why separate:** A team that wants to give agents access to theming without exposing the full component API surface connects the Theming MCP alone. A team that wants both connects both. The separation gives you control over what the agent has access to. + +**What it exposes:** + +- Full design token surface — color palettes, typography scales, spacing units, elevation values +- Programmatic theme application — correct token references, correct CSS variable output, no manual Theming Engine configuration +- Accessibility validation — WCAG AA contrast enforcement before output is committed +- Design system switching — Material to Fluent, or to a custom enterprise theme, without manual token remapping + +The Theming MCP updates with every library release. Agents always work against the current token surface across every framework. + +### AI-Optimized Documentation — The Quality Ceiling of the System + +The MCP server is only as good as the knowledge it draws from. Ignite UI's documentation has been restructured for agent consumption — an architectural change, not a documentation refresh: + +- **Token-efficient** — content density optimized for agent context windows. More signal per token means fewer hallucinations at context limit edges +- **Runnable examples** — code samples that compile against the current library version, not illustrative pseudocode +- **Agent-readable patterns** — structured decision flows, not narrative prose. Agents get structured answers, not paragraphs to interpret + +This is the foundation both the MCP and the Skills layer draw from. Underinvest here and every layer above degrades. + +### The Complete Context Stack + +| Layer | Owner | What it provides | +|---|---|---| +| Agent Skills | Developer | Your conventions, your project rules, fully customizable — SKILL.md, references, assets, scripts | +| Ignite UI MCP | Infragistics | One server, all frameworks, live component APIs — always current | +| Theming MCP | Infragistics | Separate server, design tokens, visual standards — all 4 frameworks, production | +| AI-Optimized Docs | Infragistics | Structured knowledge base all layers draw from | + + +## Getting Started — Four Steps, No New Tooling + +### Step 1 — Install Ignite UI for Your Framework + +Add the Ignite UI package for Angular, React, Blazor, or Web Components to your project. If you're already running Ignite UI, skip this step — the AI toolchain works with your existing installation. + +→ [Angular installation] · [React installation] · [Blazor installation] · [Web Components installation] + +### Step 2 — Load the Agent Skill for Your Framework + +Each framework has a dedicated Skill package. A Skill package is a structured, developer-owned directory that can include a `SKILL.md` instruction file, references, assets, and scripts — not just a single file. + +**Angular — three Skill packages, load what you need:** + +| Skill | What it covers | +|---|---| +| `igniteui-angular-components` | Standalone components, form controls, overlays, layout | +| `igniteui-angular-grids` | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, paging, remote data | +| `igniteui-angular-theming` | Palettes, typography, elevations, component themes | + +**Four ways to get them:** + +- **`ng update`** — fastest path for existing projects. Updating to Ignite UI for Angular 21.1.0+ includes an optional migration that places Skill packages in the correct agent discovery path automatically. Zero manual steps. +- **`npx skills add IgniteUI/igniteui-angular`** — interactive CLI. Select which Skill packages to install and where to place them. No manual file copying. +- **From `node_modules`** — Skill packages ship with the library. Copy from `node_modules/igniteui-angular/skills/` into `.agents/skills/`. Your agent discovers them automatically. +- **Direct download** — pull individual Skill packages from the GitHub repository and place them wherever your IDE expects them. + +**Wiring into your IDE:** + +| IDE | Persistent setup | On-demand | +|---|---|---| +| GitHub Copilot (VS Code) | `.github/copilot-instructions.md` | `#file:path/to/SKILL.md` in chat | +| Cursor | `.cursorrules` or `.cursor/rules/` | Drag `SKILL.md` into chat or `@file` | +| Windsurf | `.windsurfrules` | + button in Cascade panel | +| JetBrains AI | Settings → AI Assistant → Project-level prompt | Paperclip icon in AI chat | + +The persistent setup is recommended — wire the Skill packages once per project and every agent session follows your standards automatically. The packages are yours to customize, extend, and version alongside your codebase. + +→ [Full Skills setup guide] + +### Step 3 — Connect the Ignite UI MCP Server + +Connect the MCP server to your AI development environment. Your agent can now query live component APIs, retrieve usage patterns, scaffold grids, and validate configurations against the actual library — not training data. + +Optionally connect the Theming MCP separately to give your agent direct access to design tokens and visual standards across all four frameworks. + +→ [MCP Server setup guide] · [Theming MCP setup guide] + +### Step 4 — Generate + +Prompt your agent to build pages, dashboards, CRUD flows, or individual components. The Skill enforces your conventions. The MCP enforces the library standard. The output compiles. + +**Example prompts:** + +``` +Scaffold a dashboard with an IgxGrid showing server-side paginated data and an Excel export button +``` + +``` +Generate a date picker with validation and apply the corporate Fluent theme +``` + +``` +Add a column chooser to the existing grid and enable filtering +``` + +--- + + +## FAQ — Agent Skills, MCP Server, and AI-Assisted Development with Ignite UI + +### What are Ignite UI Agent Skills? + +Agent Skills are structured, developer-owned packages that tell AI coding assistants — Copilot, Cursor, Windsurf — exactly how to use Ignite UI for a specific framework. A Skill package can contain a `SKILL.md` instruction file (import paths, component patterns, property bindings, decision flows), references to authoritative documentation, assets such as schema files or diagrams, and scripts for automation or setup. When a Skill is active, the agent stops relying on general training data — which is often outdated or wrong for your library version — and follows the Skill instead. Output compiles. Imports are correct. Patterns are idiomatic. + +### What is the Ignite UI MCP Server? + +The MCP (Model Context Protocol) server exposes Ignite UI's component APIs, design tokens, and usage patterns as live, queryable context — not static documentation. Agents call it directly during a coding session to resolve component APIs, scaffold grids, and validate configurations against the actual current library. Unlike a documentation wrapper, the MCP gives agents structured tools to execute and structured responses to act on. It updates with every library release — agents always work against the current API surface, not a training snapshot. + +### How is an MCP server different from giving Copilot the documentation? + +Documentation is text an agent reads and interprets. An MCP server is a tool an agent calls and receives a structured, machine-readable response from. Output quality difference is significant — especially at context limit edges, where text-heavy documentation degrades and structured tool responses don't. Agent Skills add a second layer: explicit decision flows that prevent the agent from making the wrong choice before it even queries the API. Together, Skills and MCP replace approximation with a system. + +### What is the difference between Agent Skills and the MCP server? + +Agent Skills are developer-owned. You customize them, version them, and adapt them to your team's conventions. The Skill enforces _your_ standard. The MCP server is Infragistics-owned. It is always authoritative, always current, and reflects the actual library API. It enforces _the library's_ standard. Both load into the agent's context simultaneously — Skills for your conventions, MCP for library authority. Together they produce output that is correct on both dimensions. + +### What files does an Ignite UI Agent Skill package contain? + +A Skill package is a structured directory — not just a single markdown file. It can include: a `SKILL.md` instruction file with component patterns, import paths, and decision flows; references to external documentation or API specs; assets such as schema files, structured data, or diagrams; and scripts for setup or IDE configuration automation. The full package is developer-owned and can be extended with project-specific content. + +### Can I customize Agent Skills for my project? + +Yes — and that's by design. The Skill package is yours. Edit `SKILL.md` to match your team's conventions. Add project-specific component patterns. Reference your internal design system. Include scripts for your environment. Version the entire package alongside your codebase. No build step, no configuration, no approval process. Infragistics provides the starting point. Your team owns what it becomes. + +### Do I need both Skills and the MCP server, or can I use them independently? + +Both work independently. Skills alone significantly improve agent output for teams not yet running an MCP server. The MCP server alone gives agents live API access without Skills-level convention enforcement. Together they form the complete context stack. For teams starting out: load the Skill package for your framework first — it's the fastest path to better agent output. Add the MCP server as the next step. + +### Which AI coding assistants does Ignite UI support? + +Ignite UI Agent Skills are compatible with GitHub Copilot, Cursor, Windsurf, VS Code Agent Mode, JetBrains AI, and Claude Code. The MCP server connects to any MCP-compatible client. Framework coverage: Angular and Web Components Skills are live now. React Skills are available this week. Blazor Skills launch March 14. + +### Does Ignite UI work with GitHub Copilot for Angular development? + +Yes. Ignite UI ships dedicated Agent Skills for Angular that load into GitHub Copilot via `.github/copilot-instructions.md`. When active, Copilot generates correct Ignite UI for Angular code — right imports, right component API, right patterns for Angular 21.1+. The Angular MCP server launches March 14 and extends this with live, queryable component API context. + +### Does Ignite UI have AI support for Blazor development? + +Yes. Ignite UI Blazor Agent Skills launch March 14, 2026 — the first dedicated agent Skills for any Blazor UI library. They cover Razor syntax, correct property bindings, and Blazor component patterns. The Blazor MCP server follows in Q3 2026. + +### Does Ignite UI reduce AI hallucinations when generating UI code? + +Skills and the MCP server address hallucination at the source. Skills eliminate the most common failure modes — wrong import paths, incorrect API signatures, outdated component names — by replacing training-data guesses with explicit instructions. The MCP server grounds the agent in the current library API, so it's never working from a stale snapshot. The result is a significant reduction in errors that cause rework cycles. No system eliminates hallucination entirely — but grounding the agent in both your conventions and the live library API gets as close as current tooling allows. + +### Is the Theming MCP available for all frameworks? + +Yes. The Theming MCP is in production and supports Angular, React, Blazor, and Web Components today. It exposes the full Ignite UI Theming Engine — design tokens, palette definitions, typography scales, component themes — as queryable agent context across all four frameworks. It is a separate MCP server from the component API server, connectable independently to give agents design system access without exposing the full component surface. + +### What is the Ignite UI Design-to-Code pipeline? + +The Design-to-Code pipeline reads Figma files built with the Ignite UI Design Kit and generates correct Angular or React component code — property bindings, variants, and layout included. It works because Infragistics maintains both ends: the Design Kit and the component library. The mapping between Figma components and code is exact. A working POC is available today. The full solution ships in approximately two weeks. It works with Ignite UI Design Kit files specifically — not arbitrary Figma files. + +### Is Ignite UI AI tooling suitable for enterprise production? + +The AI toolchain — Skills, MCP servers, and Design-to-Code pipeline — is built on top of Ignite UI, which has been in enterprise production for 30+ years under Infragistics. Skills are versioned alongside the library. The MCP server reflects the current release. There is no separate AI tier, no usage-based pricing, and no dependency on third-party AI infrastructure that could change without notice. The toolchain extends what your team already runs — it doesn't replace it. + diff --git a/en/components/ai/igniteui-mcp-doc.md b/en/components/ai/igniteui-mcp-doc.md new file mode 100644 index 0000000000..cd23163f96 --- /dev/null +++ b/en/components/ai/igniteui-mcp-doc.md @@ -0,0 +1,247 @@ +--- +title: Agentic Workflows with Ignite UI — Agent Skills & MCP Server for Every Framework +description: Learn how to set up the Ignite UI MCP server, register agent skills for GitHub Copilot, Claude, and Cursor, and ground AI coding assistants in correct component APIs, import paths, and scaffolding workflows for Angular, React, Blazor, and Web Components. +keywords: ignite ui mcp server, ignite ui agent skills, ai-assisted ui development, copilot angular components, cursor blazor ui library, ai component library angular react blazor, mcp server ui components, ignite ui scaffolding, github copilot ignite ui, claude code ignite ui +--- + +# Agentic Workflows with Ignite UI — Best Practices + +This guide explains how to set up the Ignite UI MCP server, register the skill for your AI agent, and get the most out of agentic workflows across GitHub Copilot, Claude, and Cursor. + +--- + +## Table of Contents + +1. [Overview](#overview) +2. [Prerequisites](#prerequisites) +3. [Configure the MCP Server](#configure-the-mcp-server) +4. [How the Agent Workflow Operates](#how-the-agent-workflow-operates) +5. [Example Prompts](#example-prompts) +6. [Tool Reference Quick Card](#tool-reference-quick-card) + +--- + +## Overview + +The Ignite UI MCP server gives AI agents direct access to accurate, up-to-date Ignite UI component documentation — preventing hallucinations on API names, inputs, outputs, and component structures that commonly occur with custom UI libraries. + +| Server | Purpose | +|--------|---------| +| `igniteui-cli` MCP | Component docs: `list_components`, `get_doc`, `search_docs`, `get_project_setup_guide`, `search_api`, `get_api_reference` | + +--- + +## Prerequisites + +### Node.js ≥ 18 + +The MCP server uses ES modules and the native `fetch` API. Verify with: + +```bash +node --version +``` + +## Configure the MCP Server + +Use the config below to set up the MCP server for your client. The server must be configured before the agent can use any Ignite UI tools. + +> **Note:** VS Code uses `"servers"` as the top-level key. All other clients use `"mcpServers"`. + +### VS Code (GitHub Copilot) + +Create or edit `.vscode/mcp.json` in your project root: + +```json +{ + "servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +Alternatively, add to `settings.json`: + +```json +"github.copilot.mcp.servers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } +} +``` + +### Cursor + +Create or edit `.cursor/mcp.json` in your project root: + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +### Claude Desktop + +Edit the global config file for your OS: + +- **macOS:** `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows:** `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +### Verify Activation + +Open your agent chat and ask: + +> "Which Ignite UI tools do you have available?" + +The agent should list `list_components`, `get_doc`, `search_docs`, `get_project_setup_guide`, `search_api`, and `get_api_reference`. + +--- + +## How the Agent Workflow Operates + +Understanding what the agent does automatically helps you write better prompts and debug unexpected behaviour. + +### 1. MCP Server Check + +Before doing any work, the agent calls `list_components` to verify the MCP server is live. If the call fails, the MCP server is not configured — follow the steps in [Configure the MCP Server](#configure-the-mcp-server) to set it up for your editor, then restart the agent session. + +### 2. Framework Detection + +The agent infers the framework from context (file extensions, component prefixes, package names). It does not ask you which framework you are using. + +### 3. Tool Call Order + +**New project:** +``` +list_components → survey available components +get_project_setup_guide → get setup guidance for the framework +get_doc → read each component's API before writing code +[write code] +``` + +**Existing project:** +``` +search_docs / list_components → find the right component +get_doc → read full component guide +search_api / get_api_reference → look up exact API (properties, methods, events) when needed +[write / modify code] +``` + +> **The agent never writes Ignite UI component code without first calling `get_doc`.** APIs change between versions — skipping this step is the most common source of incorrect output. + +--- + +## Example Prompts + +### Discovering Components + +``` +List all Ignite UI chart components available for React. +``` + +``` +What Ignite UI components are available for building a dashboard in Angular? +``` + +``` +Is there an Ignite UI component for inline cell editing in a data grid? +``` + +### Reading Component Documentation + +``` +Show me the full documentation for the IgxGrid row pinning feature. +``` + +``` +How do I configure virtual scrolling in the Ignite UI React grid? +``` + +``` +What inputs and outputs does the IgcCombo component accept in Web Components? +``` + +### Building a New Project + +``` +I want to create a new Angular Ignite UI app called "sales-dashboard" with a side navigation layout. +Use grid, charts, and card components. +``` + +``` +How do I set up a new React project with Ignite UI components? +``` + +``` +What are the steps to get started with Ignite UI Web Components in a new project? +``` + +### Adding Components to an Existing Project + +``` +I have an Angular Ignite UI project. Add a filterable, sortable IgxGrid with row selection +to my dashboard page, using my existing Employee data model. +``` + +``` +Add an IgrCategoryChart to my React app that visualizes monthly revenue data. +Show me how to bind it to a TypeScript array. +``` + +``` +Add an IgbDialog confirmation modal to my Blazor app that triggers when a user clicks Delete. +``` + +### Search and Exploration + +``` +Search the Angular docs for "remote data" to find all components that support server-side loading. +``` + +``` +Find all Ignite UI WebComponents related to forms and input validation. +``` + +### Migration and Cross-Framework + +``` +I have an Angular IgxGrid with row editing, filtering, and sorting. +Show me the equivalent React IgrGrid implementation. +``` + +``` +My Blazor app uses an old IgbGrid API. What are the breaking changes in the latest version +and how should I update my code? +``` + +--- + +## Tool Reference Quick Card + +| Tool | When to use | Key parameters | +|------|------------|----------------| +| `list_components` | Browse what's available; verify the MCP server is live | `framework`, `filter` | +| `get_doc` | Read the full API doc — always call before writing any component code | `framework`, `name` (kebab-case, no `.md`) | +| `search_docs` | Full-text search when you know what you want but not the doc name | `query`, `framework` | +| `get_project_setup_guide` | Get setup guidance when starting a new project | `framework` | +| `search_api` | Discover exact component name and platform by keyword or partial name — use before `get_api_reference` when the name is unknown | `query`, `platform` (optional) | +| `get_api_reference` | Retrieve full API reference (properties, methods, events) for a known component — Angular, React, and Web Components only | `component`, `platform`, `section` (optional: `all`, `properties`, `methods`, `events`) |