New to KendoReact? Start a free 30-day trial

Getting Started with the Agentic UI Generator
Premium

Updated on Dec 11, 2025

The Agentic UI Generator is available as a remote MCP (Model Context Protocol) server that provides AI-powered development assistance for KendoReact applications.

This article describes how to install, configure, and use the KendoReact Agentic UI Generator in AI-powered IDEs like Visual Studio Code and Cursor.

Quick Start

Follow these steps to set up the Agentic UI Generator:

Ensure you have a supported license. You need a DevCraft Complete or Ultimate Subscription to access the Agentic UI Generator. If you have a different license type, you can start a 30-day AI Tools trial.

For more information about access requirements based on the license type, see Usage Limits.
To add the MCP server to your IDE, create an mcp.json file in your workspace with the following configuration:
json
```
{
  "servers": {
    "react-ui-generator": {
      "type": "http",
      "url": "https://uiagent.mcp.telerik.com/mcp/react",
      "headers": {
        "x-api-key": "[your-api-key]"
      }
    }
  }
}
```
The server name react-ui-generator 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 below:
- Visual Studio Code
- Cursor
Log in to your Telerik account and generate an API key from the API Keys page. Replace [your-api-key] in the mcp.json file with the generated key.
Open the AI chat interface of your IDE and start your prompt with the #kendo_ui_generator handle to invoke the main generator tool:
prompt
```
#kendo_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.
```
Step-by-step usage instructions are available in Using the Agentic UI Generator.

The video below demonstrates all of the above steps in action and shows the complete Agentic UI Generator setup process:

Detailed Installation Instructions

Use the documentation of your AI-powered MCP client to add the Agentic UI Generator to a specific workspace or globally. Below you can find installation tips and examples for some popular MCP clients, and instructions for obtaining your API key.

Visual Studio Code

For more information about using MCP servers in Visual Studio Code, refer to Use MCP servers in VS Code.

Make sure that chat.mcp.enabled is enabled in the VS Code settings.

Workspace Configuration

To enable the KendoReact Agentic UI Generator 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:

json

{
    "servers": {
        "react-ui-generator": {
            "type": "http",
            "url": "https://uiagent.mcp.telerik.com/mcp/react",
            "headers": {
                "x-api-key": "[your-api-key]"
            }
        }
    }
}

Replace [your-api-key] with the API key you generate.

The server name react-ui-generator can be changed to a custom value based on your preferences.

Global Configuration

To add the KendoReact Agentic UI Generator 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 more information about using MCP servers in Cursor, refer to Model Context Protocol.

Workspace Configuration

To enable the Agentic UI Generator 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:

json

{
    "mcpServers": {
        "react-ui-generator": {
            "type": "http",
            "url": "https://uiagent.mcp.telerik.com/mcp/react",
            "headers": {
                "x-api-key": "[your-api-key]"
            }
        }
    }
}

Replace [your-api-key] with the API key you generate.

The server name react-ui-generator can be changed to a custom value based on your preferences.

Global Configuration

To add the Agentic UI Generator globally for Cursor, add a .cursor folder with the above mcp.json file in your user folder.

Obtaining the API Key

The following steps provide detailed instructions for obtaining your Telerik API key, which you need to add as a headers parameter in the mcp.json file:

Log in to your Telerik account.
Navigate to License Keys > API Keys, or go directly to the API Keys page.

Click Generate New Key and provide a name of your choice, or use an existing API key if you already have one.

Copy the generated API key for use in the MCP configuration.

Using the Agentic UI Generator

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

Call the Agentic UI Generator

Open the AI chat interface in your IDE—Start a new chat session to begin interacting with the Agentic UI Generator.
Start your prompt with the #kendo_ui_generator handle—this invokes the main MCP tool that uses an agentic flow to analyze and process your request.

Using the #kendo_ui_generator handle ensures the Agentic UI Generator is called. Alternatively, you can use natural language without the handle. Make sure to mention the "kendo" keyword in your natural language prompt, so that the AI model can automatically recognize when to call the generator.
Inspect the output and verify that the react-ui-generator MCP server (or the one with your custom server name) is called. Look for a similar statement in the output:

MCP Server uses Kendo UI Generator in VS Code

If prompted, grant the MCP server permission to run for this session, workspace, or always.

Target the Tools (Advanced)

For more precise control over the generation process, you can invoke specialized MCP tools that make up the Agentic UI Generator individually. Each tool focuses on a specific aspect of UI development:

Tool	Handle	Purpose
Layout Tool	`#kendo_layout_assistant`	Applies suitable CSS utility classes from the Progress Design System for styling and positioning elements. Use this tool when you need help with spacing, typography, colors, layout structure, or transforms.
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.
Styling Tool	`#kendo_style_assistant`	Generates custom styles and theme configurations for your application. Use this tool when you need to apply brand-specific colors, create custom themes, or modify the overall visual design of your UI.
Icon Tool	`#kendo_icon_assistant`	Searches and retrieves icons from the Progress Design System iconography by name, category, or keywords. Use this tool when you need to find and add specific icons for your UI components or design elements.

To call a specific tool, use its dedicated handle in your prompt. 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 AI agent on specific tasks when you need targeted assistance with layout, components, styling, or icons.

Sample Prompts

The Agentic UI Generator works with a wide variety of prompts for different UI creation scenarios. For example:

prompt

#kendo_ui_generator Create a settings page with a form containing text inputs for user profile information (name, email, password) and a toggle switch for email notifications. Add save and cancel buttons at the bottom.

Visit the Agentic UI Generator Prompt Library for more sample prompts.