KendoReact MCP ServerPremium
The KendoReact MCP Server lets you interact with AI and reach new levels of developer productivity. The MCP server provides proprietary context to AI-powered IDEs, apps and tools. You can use the KendoReact server for KendoReact AI code generation and ask about KendoReact components, features, or general usage. You can successfully prompt more complex questions and tasks, and generate tailored code that includes KendoReact components and API.
Prerequisites
To use the KendoReact MCP server, you need:
- NodeJS LTS (
v19
is not supported by Astro). Use thenode -v
command to check your node versions. - A compatible MCP client (IDE, code editor or app) that supports MCP tools.
- A Telerik user account.
- An active DevCraft or KendoReact license or a KendoReact trial.
- A React application that includes KendoReact.
Installation
Use the documentation of your AI-powered MCP client to add the Kendo React MCP server to a specific workspace or globally. You can see installation tips and examples for some popular MCP clients below.
The generic settings of the KendoReact MCP server are:
- Server name:
kendo-react-assistant
- Type:
stdio
(standard input/output transport) - Command:
npx
(the MCP server works through an npm package) - Supported arguments:
-y
- npm package name:
@progress/kendo-react-mcp
You also need to add your Telerik licence key as an env
parameter in the mcp.json
file. There are two options:
- (recommended) Use a
TELERIK_LICENSE_PATH
argument and point to the location of your Telerik license file. - Use a
TELERIK_LICENSE
argument and paste your Telerik license key. Make sure to update the license key when necessary.
VSCode
For detailed instructions, refer to Use MCP servers in VS Code.
This section applies to VS Code 1.102.1 and newer versions.
Make sure that
chat.mcp.enabled
is enabled in the VS Code settings.
Workspace Configuration
To enable the KendoReact MCP server in a specific workspace or React app, add a .vscode
folder with an mcp.json
file at the root of the workspace with the following content:
{
"servers": {
"kendo-react-assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/kendo-react-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
This enables you to call the MCP Server with the #kendo-react-assistant
handle. To use a custom handle, change the server name in the mcp.json
.
Global Configuration
To add the KendoReact MCP Server globally for VS Code, run the MCP: Open User Configuration command from the Command Palette and add the below content to the automatically created mcp.json
file in your user profile.
Alternatively, manually create an mcp.json
file with the above content in your user folder.
Cursor
For detailed instructions, refer to Model Context Protocol.
Workspace Configuration
To enable the Kendo React MCP server in a specific workspace or React app, add a .cursor
folder with an mcp.json
file at the root of the workspace with the following content:
{
"mcpServers": {
"kendo-react-assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/kendo-react-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
This enables you to call the MCP Server with the #kendo-react-assistant
handle. To use a custom handle, change the server name in the mcp.json
.
Global Configuration
To add the KendoReact MCP Server globally for Cursor, add a .cursor
folder with the above mcp.json
file in your user folder.
Usage
When switching between tasks and files, start a new session in a new chat window to avoid polluting the context with irrelevant or outdated information.
To use the KendoReact MCP server:
- Start your prompt with
#kendo-react-assistant
(or with#
followed by your custom server name, if set). - Inspect the output and verify that the MCP Server is used. Look for a similar statement in the output (the exact text may vary across tools):
- If the KendoReact MCP server is not used even though it's installed and enabled, double-check the server name in your configuration and try rephrasing your prompt.
- If requested, grant the KendoReact MCP server a permission to run for this session, workspace, or always.
To increase the probability of the KendoReact MCP Server being used, or to call it without the need to mention "kendo" explicitly, add custom idea instructions to your AI-powered tool. Here are examples for GitHub Copilot and Cursor.
Sample Prompts
The following list describes how your prompts may look like:
- "
#kendo-react-assistant
Generate a KendoReact Grid with sorting and paging enabled. Bind the Grid to dummy data." - "
#kendo-react-assistant
Generate a KendoReact ComboBox that shows a list of products." - "
#kendo-react-assistant
Show me sample code for a KendoReact Grid with virtual scrolling for the rows and columns."
Visit the KendoReact Prompt Library for more sample prompts.
Usage Limits
A Telerik Subscription license is recommended in order to use the KendoReact AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a limited number of requests per year.
Connect to Local AI Model
You can use the KendoReact MCP server with local large language models (LLM). For example, run your local model through Ollama and use a third-party package such as MCP-LLM Bridge to connect the model to the KendoReact MCP server. This will allow you to use the KendoReact AI Coding Assistant without a cloud-based AI model.