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

Getting Started with the Agentic UI Generator

Updated on Jan 15, 2026

The Agentic UI Generator is an intelligent development assistant delivered through the Kendo UI for Angular MCP server that enables UI generation from natural language prompts. It includes a comprehensive orchestrator that coordinates four specialized tools working together to deliver complete, beautiful, on-brand, and enterprise-ready UIs.

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

If you have already completed the Installation Guide and configured your license key, skip directly to step 3 to start using the Agentic UI Generator.

Follow these steps to set up the Agentic UI Generator:

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-angular-mcp-server": {
      "type": "stdio",
       "command": "npx",
       "args": ["-y", "@progress/kendo-angular-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-angular-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 IDE-specific setup instructions and advanced configuration options, see MCP Server Configuration.

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_ui_generator handle to invoke the orchestrator tool:
prompt
```
#kendo_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.
```

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 orchestrator 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 orchestrator 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-angular-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 over the generation process, you can invoke the specialized tools individually using their dedicated handles. 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.

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.

Use Cases

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

Create Individual Components

Build specific Kendo UI for Angular components with particular configurations and features like filtering, validation, and data binding.

prompt

#kendo_ui_generator Create a DropDownList component with filtering and the option to add new items.

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.

prompt

#kendo_ui_generator I have created an empty application that now needs a login screen and an admin dashboard. Create a new PoC.

Modify Existing Pages

Enhance existing dashboards by adding new sections.
Insert new sections that match existing layout style and responsiveness.

prompt

#kendo_ui_generator Insert a new section in the middle of an existing page. In that added section, a Dashboard Card displays summary KPIs (revenue, active users, growth rate), next to a Compact Card showing a recent alert or message.

Create and Modify Themes

Generate new themes inside existing applications. Add dark mode or high-contrast themes.

prompt

#kendo_ui_generator Generate a complete dark theme for my app based on a prompt so my UI looks on-brand in dark mode as well.

Implement Responsive Layout

Create new responsive pages and sections.
Convert existing pages to be responsive for mobile and tablet views.

prompt

#kendo_ui_generator Update the existing page layout to make it responsive.

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

Best Practices

To get the best results from the Agentic UI Generator:

Start with simpler prompts and add complexity gradually.
Be clear and specific about your layout, behavior, and requirements.
Reference existing components, styles, or design patterns you want to match (e.g. the Progress Design System patterns).
Attach the files you want to modify as context to your prompt so the tool can understand your existing code structure.
Use #kendo_ui_generator to enable full feature coordination between tools.
Specify responsiveness requirements for different screen sizes.
Follow consistent Angular project structure and naming conventions.
Always review and test AI-generated code before using it in production.
For best results, use recommended models like Claude Sonnet 4.5, GPT-5.2, or Gemini 3 Pro (at the time of publishing).
Avoid enabling too many MCP tools at once to prevent tool-selection conflicts.