New to KendoReact? Start a free 30-day trial

Getting Started with the Agentic UI Generator
Premium

Updated on Nov 17, 2025

This article describes how to install, configure, and use the KendoReact Agentic UI Generator in Visual Studio and Visual Studio Code.

Prerequisites

An AI-powered IDE that supports MCP servers, for example, Visual Studio Code, Cursor.

Installing the Agentic UI Generator

The Agentic UI Generator is available as a remote MCP (Model Context Protocol) server that integrates with AI-powered IDEs like Visual Studio Code, Cursor, and other MCP-compatible tools.

Use the documentation of your AI-powered MCP client to add the Agentic UI Generator to a specific workspace or globally. You can see installation tips and examples for some popular MCP clients below.

The generic settings of the Agentic UI Generator are:

Server name: kendo_ui_generator
Type: http (HTTP transport for remote MCP server)
URL: https://uiagent.mcp.telerik.com/mcp/react

Obtaining the API Key

You also need to add your Telerik API key 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.

Visual Studio Code

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 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": {
        "kendo-ui-generator": {
            "type": "http",
            "url": "https://uiagent.mcp.telerik.com/mcp/react",
            "headers": {
                "x-preview-access": "[your-api-key]"
            }
        }
    }
}

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

This enables you to call the Agentic UI Generator with the #kendo_ui_generator handle. To use a custom handle, change the server name in the mcp.json.

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 detailed instructions, 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": {
        "kendo_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 generated.

This enables you to call the Agentic UI Generator with the #kendo_ui_generator handle. To use a custom handle, change the server name in the mcp.json.

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.

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

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 kendo_ui_generator MCP server 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.