KendoReact AI Tools OverviewPremium
The KendoReact AI Tools are delivered through a single Model Context Protocol (MCP) server that connects your AI client to KendoReact-specific knowledge and UI-generation capabilities.
From idea to implementation, you can use the MCP server to generate complete pages, configure components correctly, align with the Progress Design System, and reduce repetitive setup work.
What Are the KendoReact AI Tools
KendoReact AI Tools are available through:
The KendoReact MCP server uses an orchestration-first model, centered on the Agentic UI Generator tool. It contains a core set of specialized assistants. Click the cards below for more details on each assistant:
The Agentic UI Generator orchestrates all assistants so you can build pages and components, apply styling and theming, and stay aligned with the design system in one seamless process. You can use the full end-to-end flow when you need complete page generation, or call a specific assistant directly when you need a focused change.
How the Agentic Flow Works
The Agentic UI Generator takes one prompt and manages the flow for you. It decides which assistants to use and combines their output into a single result. Use it when you want to generate a full page quickly, or call a specific assistant when you need a focused update to the layout, components, styling, theme, or icons in your project.
Layout Assistant
Use the Layout Assistant to set up or refine the page structure. It helps with section order, spacing, and responsive behavior so the UI stays clear across desktop, tablet, and mobile.
Typical tasks include adding a new dashboard section, cleaning up visual hierarchy, and converting desktop-first screens into responsive layouts.
Component Assistant
Use the Component Assistant when you need help implementing or configuring KendoReact components. It helps you pick the right component and wire it correctly with real API patterns.
Common tasks include enabling Grid features (sorting, paging, filtering, grouping), building validated forms, setting up virtual scrolling or export, and using sample data for safe prototyping.
Styling Assistant
Use the Styling Assistant when you want consistent visuals across the app. It helps define reusable tokens and CSS variables for scalable theming.
Typical tasks include applying brand colors, adding dark mode or high-contrast variants, and keeping styling behavior consistent as new pages are added.
Icon Assistant
Use the Icon Assistant to choose icons that match user actions and UI context. It helps keep navigation, status indicators, and action buttons visually consistent.
It is useful for toolbars, navigation menus, cards, and any new section where icon consistency matters.
Accessibility Assistant
Use the Accessibility Assistant to apply WCAG 2.2 Level AA guidance during implementation, not after it. It helps with ARIA usage, keyboard navigation, and semantic markup. It is especially useful for interactive templates, complex component flows, and final semantic checks before release.
When to Use Orchestrated vs Targeted Mode
Use #kendo_ui_generator for a complete orchestration-first workflow from a single prompt. When you need finer control or want to adjust just one aspect (such as layout, theme, or a component), you can call a specialized assistant directly by its dedicated handle. For details, see Target the Assistants (Advanced).
Start Building in Minutes
To get started with the KendoReact MCP server, complete the following steps:
- Configure the MCP server
- (Optional) Set up your Telerik license key if not already configured globally
- Start prompting in your IDE's chat interface:
#kendo_ui_generatorfor full, orchestrated UI generation#kendo_component_assistant,#kendo_layout_assistant,#kendo_style_assistant,#kendo_icon_assistant, or#kendo_accessibility_assistantfor targeted workflows
For detailed setup instructions, see the Installation article. For guided usage, continue with Agentic UI Generator Getting Started.
Example Prompts and Expected Results
The following examples show how natural-language prompts can map to practical, editable output in your project.
#kendo_ui_generator Build a sales operations dashboard with a pageable and sortable Grid, a monthly revenue Chart, and a KPI summary row.Expected result: A page scaffold with responsive sections, configured KendoReact Grid and Chart, both wired to sample data, and KPI cards arranged for desktop and mobile.
#kendo_ui_generator Apply a dark theme and define reusable CSS variables for brand, surface, and semantic colors.Expected result: A token-driven theme setup with color variables and a dark-mode-ready styling baseline that you can refine for your brand.
You can start with these as-is, then iterate by asking for focused updates to layout, component behavior, theme tokens, icons, or accessibility details.
License Requirements
The KendoReact MCP server and its tools are offered as a single experience through the Agentic UI Generator (#kendo_ui_generator) in all active Telerik subscription models.
| License Type | Agentic UI Generator |
|---|---|
| Subscription License | |
| Trial License | |
| Perpetual License | No* |
* All AI tools are available with a 30-day AI Tools trial or a KendoReact trial.
Next Steps
- Install the KendoReact MCP server by following the Installation guide.
- Discover the Agentic UI Generator Getting Started article.
- Check out the Agentic UI Generator Prompt Library.
- Review the Changelog for the latest updates.