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.
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.
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:
We recommend using the Agentic UI Generator in projects that already have Kendo UI for Angular installed.
Create Individual Components
Build specific Kendo UI for Angular components with particular configurations and features like filtering, validation, and data binding.
#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.
#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.
#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.
#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.
#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.
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_generatorfor 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.
Usage Limits
Access to the Agentic UI Generator depends on your Telerik license type:
- DevCraft Complete and Ultimate Subscription
- These are the licenses that grant full access to the Agentic UI Generator.
- Include a virtually unlimited number of requests, with fair usage applied.
- Best for ongoing and high-volume usage.
- All Other Licenses (including Perpetual Licenses and other Subscriptions)
- License holders have no access to the Agentic UI Generator by default.
- Require starting a 30-day AI Tools trial to access the Agentic UI Generator.
- After the trial expires, access is no longer available unless a DevCraft Complete or Ultimate Subscription is purchased.
- Trial License
- Automatically provides a 30-day trial for the AI Tools when starting a Kendo UI for Angular trial.
- Trial licenses grant access to both the AI Coding Assistant and the Agentic UI Generator.
- Includes a virtually unlimited number of requests, with fair usage applied.
- Reactivating the same trial for a new release does not grant additional requests.
- Designed for evaluating the feature before purchasing.
All Telerik AI tools share the same fair usage quota for your Telerik account. For example, the AI Coding Assistant and the Agentic UI Generator both take up from the same usage quota. When using the Agentic UI Generator, one prompt may trigger several requests, depending on the prompt complexity.