Learn how to use the KendoReact MCP Server with Cursor to supercharge your AI-assisted development workflow.
AI-powered coding assistants have transformed the modern development landscape. However, their effectiveness often depends on context. When it comes to building React code with the help of AI, AI models can struggle with unique UI component libraries, which could lead to time-consuming manual corrections we’ve all dealt with. This is where the Progress KendoReact MCP Server comes into play. It bridges the gap between AI capabilities and specialized component library knowledge.
In this article, we’ll explore how to set up and use the KendoReact MCP Server, with Cursor, to supercharge our AI-assisted development workflow.
Prerequisites: To use the KendoReact MCP server, you’ll need a compatible MCP client (we’ll be using Cursor in this article), an active KendoReact license (or trial) and a React application that includes KendoReact components!
Model Context Protocol (MCP) is an open standard developed by Anthropic that standardizes how applications provide context to AI models and agents. Think of it as a common language for information exchange between different systems. MCP allows AI models to access specialized knowledge and tools beyond their training data.
MCP works through servers that expose specific tools and context to AI clients. When we install an MCP server, we’re giving our AI assistant access to knowledge in a particular domain. For KendoReact, this means the AI can understand component APIs, best practices and implementation patterns that it wouldn’t otherwise know about.
Check out the previous article, The Promise of Model Context Protocol, for more details on MCP and what it offers.
Cursor is an AI-powered code editor built to integrate seamlessly with large language models. Unlike traditional editors with AI features bolted on, Cursor treats AI as a first-class citizen in the development workflow.
What makes Cursor powerful is its native support for MCP servers. This means we can enhance Cursor’s AI capabilities with specialized knowledge, such as the KendoReact MCP Server.
In this section, we’ll further introduce ourselves to the concept of MCP by setting up the KendoReact MCP Server with the Cursor client.
The first step is creating the MCP configuration file. In the root of our KendoReact project, we’ll create a .cursor folder with an mcp.json file:
{
"chat.mcp.discovery.enabled": true,
"mcpServers": {
"telerik_react_assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/kendo-react-mcp"],
"env": {
"TELERIK_LICENSE_PATH": "./telerik-license.txt"
}
}
}
}
This configuration tells Cursor to enable MCP discovery and set up the KendoReact MCP server with the name telerik_react_assistant.
After creating the
mcp.jsonfile, you may find yourself needing to restart Cursor to pick up the new MCP configuration.
Once we’ve set up the MCP configuration file, we’ll need to enable the MCP server in settings. We can open Cursor settings and navigate to the “MCP Tools” section. We should see our telerik_react_assistant server listed there, and we can toggle it on to enable the server.
Initially, before configuration, the MCP Tools section will show no available tools:
After proper configuration, we should see the telerik_react_assistant listed and enabled:
This indicates that the MCP server is active and ready to provide KendoReact-specific assistance.
Now that we have the KendoReact MCP Server configured, let’s explore how it enhances our development workflow by building progressively more complex KendoReact Grid examples.
Before we dive in, there are a couple of essential things to keep in mind when working with the KendoReact MCP Server.
First, we need to make sure with one of these trigger phrases: kendo, /kendo, @kendo, kendoreact, /kendoreact or @kendoreact. This tells Cursor to use the MCP server.
Second, verify that the KendoReact MCP server is actually being used. Look for confirmation messages like “Running kendo-react-assistant” or “Called MCP tool kendo_react_assistant” in the output. If we don’t see this, we might need to rephrase our prompt or try a different trigger syntax.
Let’s start with a simple prompt to create a KendoReact Grid from scratch:
Prompt: /kendoreact Telerik Generate a very simple KendoReact Grid with sorting and paging enabled. Bind the Grid to dummy data.
We’ll notice that the MCP server processes this request and provides us with a complete implementation.
Notice how the MCP server provided us with a complete, working example that includes proper TypeScript typing, realistic dummy data generation and appropriate Grid configuration? The code consists of essential props, like autoProcessData, pageable and sortable, along with proper column definitions and formatting.
import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
// Generate dummy data
const generateDummyData = (count: number) => {
return Array.from({ length: count }, (_, idx) => ({
id: idx + 1,
name: `Employee ${idx + 1}`,
email: `employee${idx + 1}@company.com`,
department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][idx % 5],
salary: Math.floor(Math.random() * 50000) + 50000,
hireDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)
}));
};
function App() {
const data = React.useMemo(() => generateDummyData(100), []);
return (
<div className="App" style={{ padding: '20px' }}>
<h1>KendoReact Grid Example</h1>
<Grid
data={data}
style={{ height: '500px' }}
autoProcessData={true}
pageable={true}
sortable={true}
dataItemKey="id"
defaultTake={10}
defaultSkip={0}
>
<GridColumn field="id" title="ID" width="80px" />
<GridColumn field="name" title="Name" width="150px" />
<GridColumn field="email" title="Email" width="200px" />
<GridColumn field="department" title="Department" width="120px" />
<GridColumn field="salary" title="Salary" width="120px" format="{0:c}" />
<GridColumn field="hireDate" title="Hire Date" width="120px" format="{0:d}" />
</Grid>
</div>
);
}
export default App;
Pretty cool, right? This is where MCP really shines. Instead of receiving generic React code that may not even work with KendoReact, we’re getting crafted code that adheres to all the best practices and patterns specific to the KendoReact Grid component.
Building on our basic Grid, let’s add filtering functionality with a targeted prompt:
Prompt: /kendoreact can we add some basic filtering to the Department column in this grid?
The MCP server understands our existing context and gives us an enhanced version:
The MCP server intelligently added the filterable={true} prop to the Grid. Notice how we needed to follow up with another prompt to nudge the editor to also strategically turn off filtering on all other columns, except for the Department column. This demonstrates how, even with MCP, minor adjustments and clarifications can still be needed to guide AI toward the exact outcome you want.
import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
// Generate dummy data
const generateDummyData = (count: number) => {
return Array.from({ length: count }, (_, idx) => ({
id: idx + 1,
name: `Employee ${idx + 1}`,
email: `employee${idx + 1}@company.com`,
department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][idx % 5],
salary: Math.floor(Math.random() * 50000) + 50000,
hireDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)
}));
};
function App() {
const data = React.useMemo(() => generateDummyData(100), []);
return (
<div className="App" style={{ padding: '20px' }}>
<h1>KendoReact Grid Example</h1>
<Grid
data={data}
style={{ height: '500px' }}
autoProcessData={true}
pageable={true}
sortable={true}
filterable={true}
dataItemKey="id"
defaultTake={10}
defaultSkip={0}
>
<GridColumn field="id" title="ID" width="80px" filterable={false} />
<GridColumn field="name" title="Name" width="150px" filterable={false} />
<GridColumn field="email" title="Email" width="200px" filterable={false} />
<GridColumn field="department" title="Department" width="120px" />
<GridColumn field="salary" title="Salary" width="120px" format="{0:c}" filterable={false} />
<GridColumn field="hireDate" title="Hire Date" width="120px" format="{0:d}" filterable={false} />
</Grid>
</div>
);
}
export default App;
Let’s take our Grid one step further by adding editing capabilities:
Prompt: /kendoreact can you make the cells only in the name column editable please?
The MCP server gives us the implementation to support editing capabilities in the Name column:
import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import type { GridItemChangeEvent } from '@progress/kendo-react-grid';
// Generate dummy data
const generateDummyData = (count: number) => {
return Array.from({ length: count }, (_, idx) => ({
id: idx + 1,
name: `Employee ${idx + 1}`,
email: `employee${idx + 1}@company.com`,
department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][idx % 5],
salary: Math.floor(Math.random() * 50000) + 50000,
hireDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1)
}));
};
function App() {
const [data, setData] = React.useState(() => generateDummyData(100));
const handleItemChange = (event: GridItemChangeEvent) => {
const inEditID = event.dataItem.id;
const field = event.field || '';
const newData = data.map((item) =>
item.id === inEditID ? { ...item, [field]: event.value } : item
);
setData(newData);
};
return (
<div className="App" style={{ padding: '20px' }}>
<h1>KendoReact Grid Example</h1>
<Grid
data={data}
style={{ height: '500px' }}
autoProcessData={true}
pageable={true}
sortable={true}
filterable={true}
editable={true}
dataItemKey="id"
defaultTake={10}
defaultSkip={0}
onItemChange={handleItemChange}
>
<GridColumn field="id" title="ID" width="80px" filterable={false} editable={false} />
<GridColumn field="name" title="Name" width="150px" filterable={false} />
<GridColumn field="email" title="Email" width="200px" filterable={false} editable={false} />
<GridColumn field="department" title="Department" width="120px" editable={false} />
<GridColumn field="salary" title="Salary" width="120px" format="{0:c}" filterable={false} editable={false} />
<GridColumn field="hireDate" title="Hire Date" width="120px" format="{0:d}" filterable={false} editable={false} />
</Grid>
</div>
);
}
export default App;
The MCP server understood our request to place editable={false} on columns that shouldn’t be edited, and added the editable={true} prop on the Grid component to support editing where we wanted.
If this is the first time you’ve come across MCP and/or AI-assisted development, you likely find the level of precision and context-awareness nothing short of remarkable. MCP really shows how AI can be elevated from a generic assistant into a domain-expert coding partner.
The KendoReact MCP Server represents a significant leap forward in AI-assisted development for React applications using KendoReact components. By providing specialized context and deep knowledge about the component library, it transforms generic AI assistance into expert-level guidance.
We’ve seen how the MCP server consistently provides accurate, contextually-aware code that follows best practices. Rather than spending time debugging generic AI suggestions or looking up documentation, we can focus on building features and solving business problems.
For more details, be sure to check out the official KendoReact MCP Server documentation.
And don’t forget KendoReact comes with a free 30-day trial, so you can check out the MCP server today!
Hassan is a senior frontend engineer and has helped build large production applications at-scale at organizations like Doordash, Instacart and Shopify. Hassan is also a published author and course instructor where he’s helped thousands of students learn in-depth frontend engineering skills like React, Vue, TypeScript, and GraphQL.