Build a React Data Grid with Claude Code, Ignite UI CLI, and MCP Servers

Developers are moving quickly with AI coding tools, but building real enterprise applications still requires more than generating a few components. You need production-ready UI controls, accurate framework guidance, theming support, and component-specific context that helps the AI generate code that actually works.

That is where Ignite UI for React, Claude Code, Agent Skills, and MCP servers come together.

In this walkthrough, we look at two ways to build the same type of enterprise React Data Grid experience:

1. Start with an existing React app, install Ignite UI packages, configure MCP and Agent Skills, then use Claude Code to build the grid.
2. Start with the Ignite UI CLI, scaffold the React app and grid, then use Claude Code and MCP to enhance the experience.

Both workflows result in a feature-rich React Data Grid with data binding, grouping, filtering, paging, pinned columns, custom templates, theme switching, tooltips, and Export to Excel.

The first workflow starts from a React app, installs Ignite UI React and Ignite UI React Grid packages, configures Agent Skills and MCP servers, then uses Claude Code to generate and enhance an invoices grid. The second workflow starts from an empty folder, uses the Ignite UI CLI to create the React project and grid, then uses the generated skills, MCP setup, and Claude Code to build out the same enterprise grid experience.

---

Watch the Videos

Workflow 1: Add Ignite UI to a React App

This video shows how to start from a React application, install Ignite UI for React and Ignite UI React Grid packages, configure the Agent Skills and MCP servers, and then use Claude Code to build an enterprise React Data Grid.

Watch the video: Build a React Data Grid with Claude Code and Ignite UI

Workflow 2: Start with the Ignite UI CLI

This video starts one step earlier. It uses the Ignite UI CLI to create the React application, add a grid, scaffold the supporting workflow, and then connect Claude Code with Ignite UI MCP and theming support.

Watch the video: Build a React Data Grid from the Ignite UI CLI with Claude Code

---

Why AI-Generated UI Needs Real Component Context

AI coding tools can generate UI quickly, but speed alone is not enough for enterprise applications. If the agent does not understand the component library, it can generate outdated imports, incorrect APIs, incomplete styling, or UI patterns that do not match the framework.

Ignite UI helps solve that problem by giving AI-assisted workflows access to product-specific guidance through:

• Ignite UI Agent Skills
• Ignite UI MCP servers
• Ignite UI CLI
• Ignite UI Theming MCP
• Framework-specific React component guidance
• Production-ready React Grid APIs

Instead of asking an AI agent to invent grid behavior from scratch, you can guide it toward real Ignite UI for React capabilities like filtering, sorting, grouping, pinning, paging, selection, column templates, custom themes, and Excel export.

That is the key difference: the AI agent is not just generating generic UI code. It is working with component-aware context that helps it build against real enterprise UI controls.

---

What We Are Building

The demo application is an invoices grid built with Ignite UI for React. The final React Data Grid includes:

• Live invoice data binding
• Auto-generated columns as a starting point
• Custom column definitions
• Excel-style filtering
• Sorting
• Paging
• Grouping with an Outlook-style group-by area
• Full-row selection
• Column moving
• Column pinning
• Conditional formatting
• Custom cell templates
• Salesperson avatars
• Theme switching
• Export to Excel
• A custom Aurora Ops theme
• Customer tooltips with sparkline-style data
• Design-token-driven styling

This is the type of UI that normally takes significant time to assemble manually, especially if you are also learning the grid API, formatting rules, templates, styling, themes, and export behavior.

With Claude Code and Ignite UI context, the workflow becomes much faster.

---

Workflow 1: Add Ignite UI to an Existing React App

The first approach is useful when you already have a React application and want to add Ignite UI for React into that existing project.

In this workflow, you:

1. Create or open a React app.
2. Install Ignite UI for React and Ignite UI React Grid packages.
3. Configure the Agent Skills and MCP setup.
4. Connect Claude Code to the Ignite UI MCP servers.
5. Ask Claude Code to generate the invoices grid.
6. Iterate on the grid with richer features and styling.

A typical package installation looks like this:

npm install igniteui-react-grids igniteui-react

From there, the workflow adds the Ignite UI skills and MCP configuration so Claude Code can work with component-specific instructions. In the demo, Claude Code is then prompted to build an invoices page that binds to data and uses Ignite UI React Grid features.

The first pass can use auto-generated columns to get data on the screen quickly. Then, the app is refined by replacing auto-generated columns with explicit column definitions, formatting, pinned columns, templates, and theming.

This path is ideal when you want to bring Ignite UI into a codebase that already exists.

---

Workflow 2: Start with the Ignite UI CLI

The second approach is the better path when you are starting fresh.

Instead of manually creating the app, installing packages, and wiring up the basics, you start with the Ignite UI CLI. The CLI can scaffold the React app, add the grid, install the required packages, and provide the supporting AI-assisted development workflow.

In the demo, the process starts from an empty folder in Visual Studio Code. The Ignite UI CLI is already installed globally, and the version is checked first. The transcript notes that version 15.0.1 or higher is needed for the agentic AI workflows shown in the demo.

The flow looks like this:

ig

From the CLI, you select:

• React
• Empty project
• A grid component
• A component name, such as grid1
• Complete and run

Once the CLI finishes, the app opens in the browser. The default grid route is available, and the project includes the supporting assets needed for AI-assisted development.

That makes this route especially powerful for new projects because the CLI gives you a working app and a cleaner starting point for Claude Code.

---

Connecting Claude Code with Ignite UI MCP

After the app is created, Claude Code needs access to the right MCP configuration.

In the CLI workflow, the app already includes generated assets for skills, MCP support, workflows, and instructions. If you are using GitHub Copilot Chat, part of that workflow is already prepared. If you are using Claude Code, you need to add the Claude-specific MCP configuration in the expected location and format.

Once configured, Claude Code can confirm that the Ignite UI CLI MCP, Ignite UI theming MCP, and Agent Skills are available.

Setting up MCP JSON for Claude Code.

That matters because the agent can now use Ignite UI-specific guidance when generating or updating the app.

Instead of asking Claude Code to guess how the grid should work, you can ask it to use the active MCP servers and Ignite UI skills to update the existing grid page.

---

Prompting Claude Code to Build the Grid

The initial prompt can be simple but specific. The goal is to tell Claude Code:

• Which page or route to update
• Which data source to bind
• Which grid features to enable
• Whether to use auto-generated columns initially
• Which theme to use
• Which route should be the default app view

A simplified version of the first prompt could look like this:

Use the active Ignite UI MCP servers and Agent Skills.

Update the existing React grid page and make it the default app route.

Bind the grid to the invoice data source.

Use the Ignite UI React Data Grid with autoGenerate enabled as the first step.

Enable enterprise grid features including filtering, sorting, grouping, paging, column moving, column pinning, and full-row selection.

Use a dark theme.

This first step is about getting a working grid experience on the screen quickly.

Once the first version is working, you can iterate.

---

Moving from Auto-Generated Columns to Custom Columns

Auto-generated columns are great for the first pass because they help you bind data quickly. But enterprise apps usually need more control.

In the next step, Claude Code is prompted to replace autoGenerate with explicit grid columns.

That enables richer control over:

• Column order
• Header text
• Data types
• Currency formatting
• Percentage formatting
• Pinned columns
• Custom templates
• Conditional styling
• Avatar display
• Salesperson image mapping

For example, the prompt can describe the desired column order and formatting rules:

Replace auto-generated columns with explicit Ignite UI React Grid columns.

Bind the columns in this order:
Order ID, Customer Name, Product Name, Unit Price, Quantity, Discount, Extended Price, Freight, Ship Name, Salesperson.

Format Unit Price and Extended Price as currency.

Format Discount as a percentage.

Pin Order ID and Customer Name to the left.

Pin Salesperson to the right.

If Quantity is less than 20, show a red down arrow indicator.

Map the salesperson name to an avatar image.

The result is a more polished enterprise grid that looks intentional instead of generic.

---

Adding Enterprise Grid Features

Once the columns are defined, you can keep layering in functionality.

In the videos, the React Data Grid is enhanced with:

• Excel-style filtering
• Sorting
• Multi-column sorting
• Outlook-style grouping
• Paging
• Column moving
• Column pinning
• Column hiding
• Full-row selection
• Toolbar actions
• Export to Excel

The Export to Excel feature is especially important for enterprise users. In the demo, when grouped data is exported, the Excel output preserves the same grouping shown in the grid. That is the type of behavior business users expect from a production data grid.

---

Adding Theme Switching

Ignite UI ships with multiple themes, so the demo adds a theme chooser that lets you switch between styles such as:

• Material Light
• Material Dark
• Indigo Light
• Indigo Dark
• Bootstrap Light
• Bootstrap Dark
• Fluent
• Custom Aurora Ops theme

This makes it easy to show how the same grid can fit different application styles.

It also reinforces an important point: the AI agent is not just generating data-binding code. It is helping build a realistic application experience with UI polish, layout, styling, and customization.

---

Creating the Aurora Ops Custom Theme

The final visual step is a custom theme called Aurora Ops.

This theme uses Ignite UI styling and design-token guidance to create a more branded, polished experience. The prompt asks Claude Code to add a new theme option and apply custom styling such as colors, fonts, rounded corners, and interaction states.

A simplified prompt might look like this:

Add a custom theme option named Aurora Ops to the existing theme chooser.

Use Ignite UI theming guidance and design tokens.

Create a polished dark theme with rounded corners, strong contrast, modern spacing, and enterprise dashboard styling.

Make sure the grid, toolbar, selected rows, pinned columns, and tooltip styling feel consistent.

The result is a React Data Grid that feels more like a finished enterprise app than a basic component demo.

---

Adding Custom Tooltips with Sparkline Data

The final enhancement is a custom tooltip on the customer name.

When the user hovers over a customer, the tooltip shows additional contextual information, such as:

• Customer name
• City or location
• Total shipments
• Year-to-date revenue
• Revenue target
• A sparkline-style visual

This is a good example of where AI-assisted development is especially useful. The request combines data, layout, styling, hover behavior, and chart-like visual design. Instead of manually building each piece from scratch, Claude Code can generate the supporting code while using Ignite UI component and theming context.

---

Which Workflow Should You Use?

Both workflows are valuable. The right choice depends on where you are starting.

Use the Ignite UI CLI route if:

• You are starting a new React app.
• You want the fastest setup.
• You want the CLI to scaffold the app and grid.
• You want skills and MCP assets generated early.
• You want a clean project structure for AI-assisted development.

Use the existing React app route if:

• You already have a React app.
• You want to add Ignite UI into an existing project.
• You need more control over setup.
• You are integrating the React Grid into a larger application.
• You want to configure MCP and skills manually.

My recommendation: use the Ignite UI CLI route for new projects and the existing React app route when you are bringing Ignite UI into an app that is already underway.

---

Why This Matters for React Developers

Building a React Data Grid from scratch is rarely just a table problem.

Enterprise users expect:

• Fast performance
• Large data support
• Filtering
• Sorting
• Grouping
• Paging
• Pinning
• Editing
• Selection
• Export
• Theming
• Templates
• Accessibility
• Responsive layouts
• Consistent styling

Trying to generate all of that from a general AI prompt can lead to fragile code. Using a production-ready component library like Ignite UI for React gives the agent a reliable foundation.

That means Claude Code can focus on assembling and customizing the app experience instead of inventing grid behavior that already exists.

---

Get Started

Explore the React Data Grid: https://www.infragistics.com/react-data-grid

Ignite UI for React: https://www.infragistics.com/products/ignite-ui-react

React Data Grid documentation: https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid

AI-assisted app development with Ignite UI: https://www.infragistics.com/products/ignite-ui/ai-assisted-development

Install Ignite UI for React:

npm install igniteui-react-grids igniteui-react

Watch both videos:

• Workflow 1: Add Ignite UI to a React app
• Workflow 2: Start with the Ignite UI CLI

---

Final Thoughts

Claude Code can help developers move faster, but the best results come when the agent has the right context. With Ignite UI Agent Skills, MCP servers, the Ignite UI CLI, and Ignite UI for React, you can build more than a simple prototype. You can generate a production-style React Data Grid with real enterprise features, rich theming, custom templates, Excel export, and a polished user experience.

Whether you start from an existing React app or use the Ignite UI CLI to scaffold a new one, the goal is the same: build sophisticated React applications faster with AI-assisted development and enterprise-ready UI components.