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

Getting Started with the Agentic UI Generator

Updated on Nov 17, 2025

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

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.

Quick Start

Follow these steps to set up the Agentic UI Generator:

Obtain your API key—Log in to your Telerik account and generate an API key from the API Keys page.

Add the MCP server to your IDE—Create an mcp.json file in your workspace with the following configuration:

json

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

Once configured, start using the generator by typing #kendo_ui_generator in the AI chat interface of your IDE. Step-by-step usage instructions are available in Using the Agentic UI Generator.

For detailed setup guide specific to your IDE, refer to the Installation section below.

Installation

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/angular

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 Agentic UI Generator 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_ui_generator": {
      "type": "http",
      "url": "https://uiagent.mcp.telerik.com/mcp/angular",
      "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.

To add the Agentic UI Generator 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.

Cursor

For detailed instructions, refer to Model Context Protocol.

Workspace Configuration

To enable the Agentic UI Generator 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_ui_generator": {
      "type": "http",
      "url": "https://uiagent.mcp.telerik.com/mcp/angular",
      "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:
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 Kendo UI for Angular components. Use this tool when you need to implement or configure specific Kendo UI for Angular 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.