Skip to content

Commit f61c734

Browse files
IvanDanchevIvanDanchev
committed
docs: add agentic ui generator overview article #12387
1 parent fed4347 commit f61c734

File tree

6 files changed

+197
-3
lines changed

6 files changed

+197
-3
lines changed

‎ai-tools/agentic-ui-generator/overview.md‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
---
2+
title: Overview
3+
meta_title: Overview of the Telerik UI for Blazor Agentic UI Generator
4+
description: Learn about the Telerik UI for Blazor Agentic UI Generator, an intelligent prompt-driven development assistant that accelerates the creation of modern web applications.
5+
slug: agentic-ui-generator-overview
6+
position: 0
7+
tags: telerik,blazor,ai,agentic,ui,generator
8+
published: True
9+
---
10+
11+
# Telerik UI for Blazor Agentic UI Generator
12+
13+
The Agentic UI Generator is an intelligent, prompt-driven development assistant designed to accelerate the creation and styling of modern web applications. Built around Telerik and Kendo UI, the Agent enables developers to move from idea to quality UI with speed, precision, and confidence. It allows developers to use it with their favourite AI-powered IDEs for seamless integration with their existing workflows, delivering more productivity with no extra friction.
14+
15+
## What is the Agentic UI Generator
16+
17+
At its core, the Agentic UI Generator integrates five specialized tools—UI Generator, Style Search, Component Search, Style Customization, and Icon Search—working together in an agentic flow to deliver complete, beautiful, on-brand and enterprise-ready UIs. The main generator coordinates these tools to handle component generation, styling, theming, and design system integration seamlessly.
18+
19+
### How It Works
20+
21+
The Agentic UI Generator uses an intelligent approach where specialized tools work together to handle different aspects of UI development. When you provide a prompt, the main generator analyzes your requirements and coordinates the appropriate tools to deliver the desired outcome. For more control over specific aspects of your UI, you can also call individual tools directly as described in the [Advanced Use](#advanced-use) section.
22+
23+
### Intended Use
24+
25+
The Agentic UI Generator is designed to help with various development scenarios:
26+
27+
**Create Individual Components**
28+
* Build specific Telerik components with custom configurations
29+
* Generate components with advanced features like filtering, validation, and data binding
30+
* Example: "Create a Select component with filtering and the option to add new items"
31+
32+
**Create Full Responsive Pages**
33+
* Build complete dashboards, landing pages, and listing pages in existing applications
34+
* Generate pages similar to [Telerik Design System page templates](https://www.telerik.com/design-system/docs/ui-templates/templates/automotive-industry/)
35+
* Example: "Create a new PoC and I have created an empty application that now needs a login screen and an admin dashboard"
36+
37+
**Modify Existing Pages**
38+
* Enhance existing dashboards by adding new sections
39+
* Insert new sections that match existing layout style and responsiveness
40+
* Example: "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"
41+
42+
**Create and Modify Themes**
43+
* Generate new themes inside existing applications
44+
* Add dark mode or high-contrast themes
45+
* Example: "Generate a complete dark theme for my app based on a prompt so my UI looks on-brand in dark mode as well"
46+
47+
**Responsive Layout**
48+
* All created pages and sections are automatically responsive
49+
* Convert existing pages to be responsive for mobile and tablet views
50+
* Example: "Update an existing page layout to make it responsive"
51+
52+
For specific examples of these use cases, see the [Sample Prompts](#sample-prompts) section.
53+
54+
## Installing the Agentic UI Generator
55+
56+
The Agentic UI Generator is available as an MCP (Model Context Protocol) server that integrates with AI-powered IDEs like GitHub Copilot, Cursor, and other MCP-compatible tools.
57+
58+
### Prerequisites
59+
60+
* A valid Telerik DevCraft Complete, or DevCraft Ultimate license.
61+
* An AI-powered IDE that supports MCP servers (e.g., Visual Studio, Visual Studio Code).
62+
63+
### Configuration Steps
64+
65+
Sign in to your Telerik account to ensure proper user identification.
66+
67+
#### Visual Studio
68+
69+
To enable the Agentic UI Generator in a specific Blazor app, add a `.mcp.json` file to the solution folder and paste the [Preview JSON MCP Configuration](https://uiagent.mcp.telerik.com/preview) in the file.
70+
71+
>caption .mcp.json
72+
73+
````JSON.skip-repl
74+
{
75+
"servers": {
76+
"telerik-ui-generator": {
77+
"type": "http",
78+
"url": "https://uiagent.mcp.telerik.com/mcp/blazor",
79+
"headers": {
80+
"x-preview-access": "userid-..."
81+
}
82+
}
83+
}
84+
}
85+
````
86+
87+
To enable global automatic discovery of the Agentic UI Generator in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`.
88+
89+
#### Visual Studio Code
90+
91+
1. Go to the [Agentic UI Generator Preview Configuration](https://uiagent.mcp.telerik.com/preview).
92+
2. Click the `Add to VS Code` button. This will open a tab named `MCP Server: telerik-ui-generator` in your VS Code instance.
93+
3. In the new VS Code tab, click the `Install` button.
94+
95+
After adding the configuration, restart your IDE to load the MCP server.
96+
97+
## Using the Agentic UI Generator
98+
99+
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.
100+
101+
### Basic Use
102+
103+
To use the Agentic UI Generator, you can call it in two ways:
104+
105+
**Method 1: Using the Tool Handle**
106+
Prefix your prompt with `#telerik_ui_generator` followed by your request:
107+
108+
````TEXT.skip-repl
109+
#telerik_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends
110+
````
111+
112+
**Method 2: Using Natural Language**
113+
Simply describe what you want to create using natural language. The AI assistant will automatically recognize when to use the Agentic UI Generator:
114+
115+
````TEXT.skip-repl
116+
Create a product management page with a grid for displaying products, a form for adding new items, and filtering options
117+
````
118+
119+
The generator will analyze your prompt and create the appropriate Blazor components, markup, and styling.
120+
121+
### Advanced Use
122+
123+
For more granular control, you can call individual tools that make up the Agentic UI Generator:
124+
125+
| Tool Handle | Description |
126+
|------------|-------------|
127+
| `telerik_ui_generator` | Main generator for building full UI flows. Coordinates all other tools to deliver complete solutions. |
128+
| `telerik_style_search` | Retrieves design system utilities including spacing, typography, and colors for consistent layouts. |
129+
| `telerik_component_search` | Retrieves documentation and answers about Telerik/Kendo components, providing implementation guidance. |
130+
| `telerik_style_customization` | Generates CSS variables for themes and customization, enabling brand-specific styling. |
131+
| `telerik_icon_search` | Retrieves icons from the Telerik Design System for consistent iconography across your application. |
132+
133+
You can call these tools directly when you need specific functionality, allowing for more precise control over the generation process.
134+
135+
## Sample Prompts
136+
137+
Here are some example prompts that demonstrate the generator's capabilities:
138+
139+
**Dashboard Creation:**
140+
````TEXT.skip-repl
141+
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 data grids, and the bottom contains column summaries
142+
````
143+
144+
**Interactive Data Page:**
145+
````TEXT.skip-repl
146+
Insert a new section with a Data Grid on the left to filter, sort, and edit product data. On the right, add a Chart and Date Range Picker 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
147+
````
148+
149+
**Theme Customization:**
150+
````TEXT.skip-repl
151+
Add a dark mode theme to the application with rounded corners and larger spacing between components
152+
````
153+
154+
**Responsive Page:**
155+
````TEXT.skip-repl
156+
Create a product catalog page with a responsive grid layout, filtering options, and detail view modals that work seamlessly on mobile, tablet, and desktop
157+
````
158+
159+
**Landing Page:**
160+
````TEXT.skip-repl
161+
Build a landing page similar to the automotive industry template with a hero section, feature highlights, statistics, and a call-to-action section
162+
````
163+
164+
## Recommendations
165+
166+
To get the best results from the Agentic UI Generator:
167+
168+
**Provide Clear Context:**
169+
* Be specific about your requirements and desired layout structure.
170+
* Mention any existing components or styles you want to match.
171+
* Specify responsiveness requirements for different screen sizes.
172+
* Reference existing design patterns when applicable (e.g., "similar to the automotive industry template").
173+
174+
**Optimize Your Environment:**
175+
* Don't configure too many MCP tools or extensions simultaneously, as this may affect performance.
176+
* In case of issues when both the Telerik AI Coding Assistant and the Agentic UI Generator are enabled, disable one of the tools.
177+
* Ensure you have a stable internet connection for AI processing.
178+
* Keep your Blazor project structure organized and follow naming conventions.
179+
180+
**Best Practices:**
181+
* Start with simpler prompts and gradually add complexity.
182+
* Review and test generated code before integrating into production.
183+
* Customize the generated code to match your specific business logic and branding.
184+
* Use the advanced tool handles when you need precise control over specific aspects.
185+
* Leverage existing Telerik Design System patterns for consistency.
186+
187+
## See Also
188+
189+
* [Telerik MCP Server Documentation](slug:ai-mcp-server)
190+
* [Telerik Design System](https://www.telerik.com/design-system/docs/)

‎ai/copilot-extension.md‎ renamed to ‎ai-tools/copilot-extension.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ slug: ai-copilot-extension
66
tags: telerik,blazor,ai
77
published: True
88
position: 10
9+
previous_url: /ai
910
---
1011

1112
# Telerik Blazor GitHub Copilot Extension

‎ai/mcp-server.md‎ renamed to ‎ai-tools/mcp-server.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ slug: ai-mcp-server
66
tags: telerik,blazor,ai
77
published: True
88
position: 20
9+
previous_url: /ai
910
---
1011

1112
# Telerik Blazor MCP Server

‎ai/overview.md‎ renamed to ‎ai-tools/overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ slug: ai-overview
66
tags: telerik,blazor,ai
77
published: True
88
position: 1
9+
previous_url: /ai
910
---
1011

1112
# Telerik Blazor AI Coding Assistant Overview

‎ai/prompt-library.md‎ renamed to ‎ai-tools/prompt-library.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ slug: ai-prompt-library
66
tags: telerik,blazor,ai
77
published: True
88
position: 30
9+
previous_url: /ai
910
---
1011

1112
# Telerik Blazor Prompt Library

‎docs-builder.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -615,9 +615,9 @@ meta:
615615
common-features:
616616
title: Common Features
617617
position: 15
618-
ai:
619-
title: AI Coding Assistant
620-
position: 14
618+
ai-tools:
619+
title: AI Tools
620+
position: 6
621621
styling-and-themes:
622622
title: Styling and Themes
623623
position: 12

0 commit comments

Comments
 (0)