Kendo UI for Angular Agentic UI Generator Overview

The Agentic UI Generator is an intelligent, prompt-driven AI development assistant that accelerates the creation and styling of modern web applications using Kendo UI for Angular. It integrates seamlessly with AI-powered IDEs to deliver complete, production-ready user interfaces through natural language prompts.

Kendo UI for Angular is a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

What Is the Agentic UI Generator

The Kendo UI for Angular Agentic UI Generator is an AI-powered tool built around Telerik and Kendo UI to enable developers to move from idea to quality UI with speed, precision, and confidence. At its core, the Agentic UI Generator integrates specialized tools working together in an agentic flow to deliver complete, beautiful, on-brand, and enterprise-ready UIs.

The Agentic UI Generator supports both creating new pages from scratch and modifying existing ones. The output is production-ready code with maintainable structure, refined styling, and responsive behavior.

How It Works

The Agentic UI Generator is a remote Model Context Protocol (MCP) server that seamlessly integrates with your AI-powered MCP client. When you provide a natural language prompt, the MCP server analyzes your requirements and automatically organizes the appropriate specialized tools in the optimal sequence.

By organizing multiple MCP tools, the Agentic UI Generator coordinates layout generation, component implementation, styling, and icon integration tailored to your request. This intelligent workflow ensures all aspects of your UI are properly integrated in the application.

For more granular control, you can also call individual tools directly. See the Target the Tools (Advanced) section for more details.

Intended Use

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 specific examples of these use cases, see the Sample Prompts section.

Installing the Agentic UI Generator

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

To install and set up the Agentic UI Generator:

Go to the Agentic UI Generator | MCP Configuration preview page.
If not already logged in, you will be prompted to provide your Telerik user account credentials.
After a successful login, you will be redirected back to the configuration page.
Select the Angular tab to see the instructions for the Kendo UI for Angular Agentic UI Generator.
Choose how to install the Agentic UI Generator:
- If you are using Visual Studio Code, click Add to VS Code. This opens the IDE and prompts you to install the kendo_ui_generator MCP server.
- If you are using Cursor, click Add to Cursor. This opens the IDE and prompts you to install the kendo_ui_generator MCP server.
- If you are using another IDE or you want to configure the MCP server manually, click Copy and then paste the configuration into the mcp.json file of your IDE user folder.
Install the MCP server and restart your IDE.

All options configure the Agentic UI Generator with the necessary x-preview-access token for authentication.

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

To use the full capabilities of 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.

For practical examples, see the Sample Prompts section.
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 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:

prompt

#kendo_icon_assistant Add icons suitable for the Home, Settings, and User Profile buttons in my navigation bar.

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

Here are some example prompts that demonstrate the generator's capabilities:

Dashboard Creation:

prompt

#kendo_ui_generator Create a new page using the existing top navigation and footer. In the middle, add 3 rows with 3 responsive columns each. The top row shows charts, the second grids, and the bottom contains column summaries.

Interactive Data Page:

prompt

#kendo_ui_generator Insert a new section with a Grid on the left to filter, sort, and edit product data. On the right, add a Chart and DateRangePicker to visualize product sales over time. Both components should be data-bound to the same source and reactively update based on the selected date range.

Theme Customization:

prompt

#kendo_ui_generator Add a dark mode theme to the application with rounded corners and larger spacing between components.

Responsive Page:

prompt

#kendo_ui_generator Create a product catalog page with a responsive grid layout, filtering options, and detail view modals that work seamlessly on mobile, tablet, and desktop.

Landing Page:

prompt

#kendo_ui_generator Build a landing page similar to the automotive industry template with a hero section, feature highlights, statistics, and a call-to-action section.

Recommendations

To get the best results from the Agentic UI Generator:

Provide Clear Context

Be specific about your requirements and desired layout structure.
Mention any existing components or styles you want to match.
Attach the files you want to modify as context to your prompt so the tool can understand your existing code structure.
Specify responsiveness requirements for different screen sizes.
Reference existing design patterns when applicable (e.g., "similar to the automotive industry template").

Best Practices

To prevent conflicts when the AI model determines which tool to call, avoid enabling too many MCP tools simultaneously in your IDE. In case of issues when both the Kendo UI for Angular AI Coding Assistant and the Agentic UI Generator are enabled, disable one of the tools.
Keep your Angular project structure organized and follow naming conventions.
Start with simpler prompts and gradually add complexity.
Use #kendo_ui_generator for complete features to ensure proper coordination between the tools.
Use the advanced tool handles when you need precise control over specific aspects.
Leverage existing Progress Design System patterns for consistency.