New to KendoReact? Start a free 30-day trial

Getting Started with the AI Coding Assistant
Premium

Updated on Jan 14, 2026

The AI Coding Assistant is an intelligent development tool delivered through the KendoReact MCP server that focuses on component-level development. It provides prompt-driven assistance for implementing KendoReact components, with an orchestrator that coordinates specialized tools optimized for component development tasks.

This article describes how to install and use the KendoReact AI Coding Assistant in AI-powered IDEs like Visual Studio Code and Cursor.

Quick Start

If you have already completed the Installation Guide and configured your license key, skip directly to step 3 to start using the AI Coding Assistant.

Follow these steps to set up the AI Coding Assistant:

To add the MCP server to your IDE, create an mcp.json file in your workspace. For Visual Studio Code, use the following configuration:
json
```
{
  "servers": {
    "kendo-react-mcp-server": {
      "type": "stdio",
       "command": "npx",
       "args": ["-y", "@progress/kendo-react-mcp@latest"],
       // set an `env` parameter only if you haven't set a license key globally on your machine
       //   "env": {
       //     "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE"
       //   }
     }
    }
  }
```
The server name kendo-react-mcp-server can be customized as desired. The name helps distinguish the MCP server in your configuration and does not affect how you invoke the generator tool in your prompt.
For more details on how to configure the MCP server, refer to the instructions for your specific IDE:
- Visual Studio Code
- Cursor
Ensure you have a supported license and set up your Telerik license key globally on your machine or in the mcp.json configuration. The server automatically recognizes your license and activates the appropriate tools.

Refer to the License Key Setup section for detailed instructions.
Open the AI chat interface of your IDE and start your prompt with the #kendo_react_assistant handle to invoke the orchestrator tool:
prompt
```
#kendo_react_assistant Generate a KendoReact Grid with sorting and paging enabled. Bind the Grid to dummy data.
```
Step-by-step usage instructions are available in Using the AI Coding Assistant.

Using the AI Coding Assistant

Once installed, start a new chat session in your IDE to begin interacting with the AI Coding Assistant via natural language prompts. The AI Coding Assistant can be used in two primary modes: basic usage through the orchestrator tool, or advanced usage by calling specific MCP tools directly.

Call the AI Coding Assistant

Open the AI chat interface in your IDE—Start a new chat session to begin interacting with the AI Coding Assistant.
Start your prompt with the #kendo_react_assistant handle—this invokes the orchestrator tool that uses an agentic flow to analyze and process your request.
Inspect the output and verify that the kendo-react-mcp-server MCP server (or the one with your custom server name) is called. Look for a similar statement in the output:
If prompted, grant the MCP server permission to run for this session, workspace, or always.

Target the Tools (Advanced)

For more precise control, you can invoke the specialized tools individually using their dedicated handles.

The AI Coding Assistant includes two specialized tools coordinated by an orchestrator optimized for component-level development:

Tool	Handle	Purpose
Component Tool	`#kendo_component_assistant`	Answers questions and generates code related to KendoReact components. Use this tool when you need to implement or configure specific KendoReact components like Grid, Charts, Forms, etc.
Icon Tool	`#kendo_icon_assistant`	Searches and retrieves icons from the Progress Design System iconography by name, category, or keywords. You can also call it directly when you need to find specific icons for your UI components or design elements.

For examples of how to use each specialized tool, see the Tool-Specific Prompts section in the Prompt Library article.

This approach allows you to focus the MCP server on specific tasks when you need targeted assistance with components or icons.

Use Cases

You can use the AI Coding Assistant for:

Initial Code Generation

Quickly add components to your app to speed up the initial development.

prompt

#kendo_react_assistant Generate a KendoReact Grid with sorting and paging enabled. Bind the Grid to dummy data.

Component Configuration

Enable or disable specific component features, or fine tune the configuration through prompting. More complex configurations are possible but may require additional manual work to be production-ready.

prompt

#kendo_react_assistant Add paging and grouping to my existing Grid component.

Dummy Data Generation and Data Binding

Quickly add data to your app for testing and prototyping purposes. Avoid exposing or providing access to your proprietary or production data to AI-enabled tools.

prompt

#kendo_react_assistant Generate a KendoReact ComboBox that shows a list of products.

Step-by-Step Explanations

Understand the solutions provided by the AI Coding Assistant through detailed explanations (depends on the tool, mode, and model used). To further develop your knowledge, check the respective documentation.

prompt

#kendo_react_assistant How do I configure filtering in the Grid for numeric columns?

Preliminary Troubleshooting

Resolve obvious and easy-to-solve issues affecting your code. For more complex issues, look for assistance from the community or contact the support team.

prompt

#kendo_react_assistant My DatePicker is not updating when I change the value programmatically. How can I fix this?

Icon Integration

Find and implement appropriate icons from the Progress Design System iconography.

prompt

#kendo_react_assistant What icons should I use for save, edit, and delete actions in my Grid toolbar?

For a comprehensive collection of sample prompts covering component implementation and icon selection, see the AI Coding Assistant Prompt Library.

Best Practices

Consider the following best practices when working with the AI Coding Assistant:

Start with simpler prompts and add complexity gradually.
When switching between tasks or files, start fresh to avoid context pollution.
Be specific about your requirements and desired component configuration.
Mention any existing components or features you want to match.
Attach relevant files so the AI understands your project structure and existing code.
Use #kendo_react_assistant to activate the component-focused orchestrator.
If you don’t want custom styling, explicitly say: Don't add custom CSS styles.
Provide clear requirements, mention specific components, and describe desired behavior.
Keep your React project structure organized and follow naming conventions.
Always review and test AI-generated code before using it in production.
At the time of publishing, Claude Sonnet 4.5, GPT-5.2, and Gemini 3 Pro produce optimal results.
Avoid enabling too many MCP tools at once to prevent tool-selection conflicts.

The AI Coding Assistant is not intended for styling, theme customization, or complete UI generation. If you have access to the Agentic UI Generator, use it for AI-powered UI generation with styling and layout capabilities.