New to Kendo UI for Angular? Start a free 30-day trial

Getting Started with the Agentic UI Generator

Updated on Jun 25, 2026

The Agentic UI Generator is an intelligent development tool delivered through the Kendo UI for Angular MCP server that enables UI generation from natural language prompts. Once configured and authenticated, you can use the Agentic UI Generator tool (#kendo_ui_generator) together with the available specialized MCP assistants.

This article describes how to install and use the Kendo UI for Angular Agentic UI Generator in AI-powered IDEs like Visual Studio Code and Cursor.

Prerequisites

To use the Kendo UI for Angular MCP server, you need:

A compatible MCP client, such as VS Code or Cursor, with support for MCP server integrations.
An active Telerik license, either trial or subscription, that provides access to the Kendo UI for Angular MCP server.

Quick Start

Instead of manually creating configuration files, you can use the Kendo CLI and the built-in Getting Started Assistant to handle the entire setup automatically—whether you are starting a new project or adding Kendo UI for Angular to an existing one. Alternatively, install the kendo-angular-plugin, which delivers the Agentic UI Generator functionality as skills.

Follow these steps to set up the Agentic UI Generator and use it in your IDE (VS Code or another supported AI-enabled IDE):

CLI AI Plugin Manual Setup

Open your terminal and install the Kendo CLI globally:
sh
```
npm i -g @progress/kendo-cli@latest
```
Configure the Kendo UI for Angular MCP server for your IDE and set up your Telerik license in a single step with the Kendo CLI:
sh
```
npx kendo setup angular
```
Create a new empty folder for your project and open it in your IDE. Then, in the AI chat interface, invoke the Getting Started Assistant:
prompt
```
#kendo_getting_started_assistant create a new Angular project
```

The kendo-angular-plugin provides an alternative to setting up the Kendo UI for Angular MCP server via the Kendo CLI. The plugin wraps the Kendo UI for Angular MCP server and starts it automatically—no manual mcp.json configuration required.

VS Code Copilot Claude Code GitHub Copilot CLI

Agent Plugins is a preview feature in VS Code. It requires VS Code 1.100 or later with the chat.plugins.enabled: true setting.

To install the Kendo UI for Angular AI Plugin:

Ensure you have a supported license and set up your Telerik license key globally on your machine.
Open VS Code Settings (Cmd+, / Ctrl+,) and search for chat.marketplaces.
Add the telerik/ai-plugins marketplace entry, or add it directly via settings.json:
JSON
```
"chat.plugins.marketplaces": ["telerik/ai-plugins"]
```
Press F1 and select Chat: Manage Plugin Marketplaces.
Select telerik/ai-plugins -> Show plugins.
In the Agent Plugins tab, find kendo-angular-plugin and click Install.

Ensure you have a supported license and set up your Telerik license key globally on your machine.

Add the telerik/ai-plugins marketplace, then install the plugin:

/plugin marketplace add telerik/ai-plugins
/plugin install kendo-angular-plugin@telerik-ai-plugins

While a session is running, reload plugins after any local changes with /reload-plugins.

Requires Claude Code with plugin support.

Ensure you have a supported license and set up your Telerik license key globally on your machine.

Add the marketplace and install the plugin:

copilot plugin marketplace add telerik/ai-plugins
copilot plugin install kendo-angular-plugin@telerik-ai-plugins

To refresh after changes, exit and reopen the session or run /restart.

Requires GitHub Copilot CLI.

Once installed, invoke the UI Generator skill in the IDE chat interface:

prompt

/kendo-angular-plugin:kendo-angular-ui-generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.

If you already have the Kendo UI for Angular MCP server configured in your IDE, disable or remove it before installing the plugin. The plugin wraps the same MCP server and starts it automatically—running both simultaneously may cause conflicts and increased token usage.

The manual setup is an alternative to configuring the Kendo UI for Angular MCP Server through the Kendo CLI or the Kendo UI for Angular AI Plugin.

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 available MCP tools.
sh
```
npm i @progress/kendo-licensing
npx kendo-ui-license refresh && npx kendo-ui-license activate
```
To add the MCP server to your IDE, add the following mcp.json configuration in your workspace:
Visual Studio Code Cursor
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 Kendo UI for Angular MCP server in a specific workspace or Angular app, add a .vscode folder with an mcp.json file at the root of the workspace with the following content:
json
```
{
    "servers": {
        "kendo-angular-mcp-server": {
            "type": "stdio",
            "command": "npx",
            "args": ["-y", "@progress/kendo-angular-mcp@latest"]
            // set any of the `env` parameters below only if you haven't set a license key globally on your machine
            //   "env": {
            //     "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE"
            // or
            //     "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
            //   }
        }
    }
}
```
The server name kendo-angular-mcp-server can be changed to a custom value based on your preferences.

Global Configuration

To add the Kendo UI for Angular MCP server globally for VS Code, run the MCP: Open User Configuration command from the Command Palette and add the above 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.
For more information about using MCP servers in Cursor, refer to Model Context Protocol.

Workspace Configuration

To enable the Kendo UI for Angular MCP server in a specific workspace or Angular app, add a .cursor folder with an mcp.json file at the root of the workspace with the following content:
json
```
{
    "mcpServers": {
        "kendo-angular-mcp-server": {
            "type": "stdio",
            "command": "npx",
            "args": ["-y", "@progress/kendo-angular-mcp@latest"]
            //// set any of the `env` parameters below only if you haven't set a license key globally on your machine
            //   "env": {
            //     "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE"
            //// or
            //     "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
            //   }
        }
    }
}
```
The server name kendo-angular-mcp-server can be changed to a custom value based on your preferences.

Global Configuration

To add the MCP server globally for Cursor, add a .cursor folder with the above mcp.json file in your user folder.
Open the AI chat interface of your IDE and start your prompt with the #kendo_ui_generator handle to invoke the Agentic UI Generator orchestrator:
prompt
```
#kendo_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.
```

Use Cases

The Agentic UI Generator is designed to help with various development scenarios:

Generate specific Kendo UI for Angular components with particular configurations and features like filtering, validation, and data binding.
Create full responsive pages
- Build complete dashboards, landing pages, and listing pages in existing applications.
- Generate pages similar to the Progress Design System page templates.
Modify existing pages
- Enhance existing dashboards by adding new sections.
- Insert new sections that match existing layout style and responsiveness.
Create and modify themes
Implement Responsive Layout
- Create new responsive pages and sections.
- Convert existing pages to be responsive for mobile and tablet views.

For a comprehensive collection of sample prompts covering general UI tasks, layout organization, component implementation, styling, accessibility, and icon selection, see the Agentic UI Generator Prompt Library.

While the Agentic UI Generator performs great with powerful models like Claude Sonnet 4.6, GPT-5.2, or Gemini 3 Pro, it also excels with smaller models as well (such as Haiku and GPT 5.1 mini).