Skip to content

Commit 8598db8

Browse files
github-actions[bot]IvanDanchev
github-actions[bot]
and
IvanDanchev
authored
Merge agentic-overview-3284 into production (#3289)
* docs: add agentic ui generator overview article #12387 * docs: hide article from navigation #12387 * docs: add pr review suggestions #12387 * docs: add pr review suggestions part2 #12387 --------- Co-authored-by: IvanDanchev <[email protected]>
1 parent f522f18 commit 8598db8

File tree

2 files changed

+206
-2
lines changed

2 files changed

+206
-2
lines changed

‎ai/agentic-ui-generator/index.md‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
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 AI 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.
14+
15+
## What Is the Agentic UI Generator
16+
17+
At its core, the Agentic UI Generator integrates five specialized tools:
18+
* UI Generator
19+
* Style Search
20+
* Component Search
21+
* Style Customization
22+
* Icon Search
23+
24+
The tools are 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.
25+
26+
### How It Works
27+
28+
The Blazor 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.
29+
30+
### Intended Use
31+
32+
The Agentic UI Generator is designed to help with various development scenarios:
33+
34+
#### Create Individual Components
35+
36+
Build specific Telerik components with specific configurations and features like filtering, validation, and data binding
37+
38+
````TEXT.skip-repl
39+
#telerik_ui_generator Create a Select component with filtering and the option to add new items
40+
````
41+
42+
#### Create Full Responsive Pages
43+
44+
* Build complete dashboards, landing pages, and listing pages in existing applications
45+
* Generate pages similar to the [Progress Design System page templates](https://www.telerik.com/design-system/docs/ui-templates/templates/automotive-industry/)
46+
47+
````TEXT.skip-repl
48+
#telerik_ui_generator I have created an empty application that now needs a login screen and an admin dashboard. Create a new PoC
49+
````
50+
51+
#### Modify Existing Pages
52+
53+
* Enhance existing dashboards by adding new sections
54+
* Insert new sections that match existing layout style and responsiveness
55+
56+
````TEXT.skip-repl
57+
#telerik_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
58+
````
59+
60+
#### Create and Modify Themes
61+
62+
* Generate new themes inside existing applications. Add dark mode or high-contrast themes
63+
64+
````TEXT.skip-repl
65+
#telerik_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
66+
````
67+
68+
#### Implement Responsive Layout
69+
70+
* Create new responsive pages and sections
71+
* Convert existing pages to be responsive for mobile and tablet views
72+
73+
````TEXT.skip-repl
74+
#telerik_ui_generator Update the existing page layout to make it responsive
75+
````
76+
77+
For specific examples of these use cases, see the [Sample Prompts](#sample-prompts) section.
78+
79+
## Installing the Agentic UI Generator
80+
81+
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.
82+
83+
### Prerequisites
84+
85+
An AI-powered IDE that supports MCP servers, for example, Visual Studio, Visual Studio Code, Cursor.
86+
87+
### Configuration Steps
88+
89+
This section contains information about how to set up the Agentic UI Generator in Visual Studio and Visual Studio Code.
90+
91+
#### Visual Studio
92+
93+
1. Log in with a valid [Telerik user account](https://www.telerik.com/account/).
94+
2. To enable the Agentic UI Generator in a specific Blazor app, add a `.mcp.json` file to the solution folder and paste the configuration from the [Agentic UI Generator | MCP Configuration page](https://uiagent.mcp.telerik.com/preview).
95+
96+
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`.
97+
98+
#### Visual Studio Code
99+
100+
1. Log in with a valid [Telerik user account](https://www.telerik.com/account/).
101+
2. Go to the [Agentic UI Generator Preview Configuration](https://uiagent.mcp.telerik.com/preview).
102+
3. Click the **Add to VS Code** button. This will open a tab named **MCP Server: telerik-ui-generator** in your VS Code instance.
103+
4. In the new VS Code tab, click **Install**.
104+
105+
After adding the configuration, restart your IDE to load the MCP server.
106+
107+
## Using the Agentic UI Generator
108+
109+
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.
110+
111+
### Call the Agentic UI Generator
112+
113+
To use the Agentic UI Generator, you can call it in two ways:
114+
115+
#### Method 1: Using the Tool Handle
116+
117+
Prefix your prompt with `#telerik_ui_generator` followed by your request:
118+
119+
````TEXT.skip-repl
120+
#telerik_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends
121+
````
122+
123+
#### Method 2: Using Natural Language
124+
125+
Prefixing your prompt with `#telerik_ui_generator` will make it more likely for the Agentic UI Generator to get called. Alternatively, you can use natural language and simply describe what you want. The AI assistant automatically recognizes when to use the Agentic UI Generator:
126+
127+
````TEXT.skip-repl
128+
Create a product management page with a grid for displaying products, a form for adding new items, and filtering options
129+
````
130+
131+
The generator analyzes your prompt and creates the appropriate Blazor components, markup, and styling.
132+
133+
### Target the Tools (Advanced)
134+
135+
For more granular control, you can call individual tools that make up the Agentic UI Generator:
136+
137+
| Tool Handle | Description |
138+
|------------|-------------|
139+
| `telerik_ui_generator` | Main generator for building full UI flows. Coordinates all other tools to deliver complete solutions. |
140+
| `telerik_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. |
141+
| `telerik_component_assistant` | Answers questions and generates code related to Teelrik UI for Blazor components. Use this tool when you need to implement or configure specific UI for Blazor components like Grid, Charts, Forms, etc. |
142+
| `telerik_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. |
143+
| `telerik_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. |
144+
145+
You can call these tools directly when you need specific functionality, allowing for more precise control over the generation process.
146+
147+
## Sample Prompts
148+
149+
Here are some example prompts that demonstrate the generator's capabilities:
150+
151+
**Dashboard Creation:**
152+
````TEXT.skip-repl
153+
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
154+
````
155+
156+
**Interactive Data Page:**
157+
````TEXT.skip-repl
158+
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
159+
````
160+
161+
**Theme Customization:**
162+
````TEXT.skip-repl
163+
Add a dark mode theme to the application with rounded corners and larger spacing between components
164+
````
165+
166+
**Responsive Page:**
167+
````TEXT.skip-repl
168+
Create a product catalog page with a responsive grid layout, filtering options, and detail view modals that work seamlessly on mobile, tablet, and desktop
169+
````
170+
171+
**Landing Page:**
172+
````TEXT.skip-repl
173+
Build a landing page similar to the automotive industry template with a hero section, feature highlights, statistics, and a call-to-action section
174+
````
175+
176+
## Recommendations
177+
178+
To get the best results from the Agentic UI Generator:
179+
180+
### Provide Clear Context
181+
182+
* Be specific about your requirements and desired layout structure.
183+
* Mention any existing components or styles you want to match.
184+
* Attach the files you want to modify as context to your prompt so the tool can understand your existing code structure.
185+
* Specify responsiveness requirements for different screen sizes.
186+
* Reference existing design patterns when applicable (e.g., "similar to the automotive industry template").
187+
188+
### Best Practices
189+
190+
* Don't configure too many MCP tools or extensions simultaneously, as this may affect performance. In case of issues when both the Telerik AI Coding Assistant and the Agentic UI Generator are enabled, disable one of the tools.
191+
* Ensure you have a stable internet connection for AI processing.
192+
* Keep your Blazor project structure organized and follow naming conventions.
193+
* Start with simpler prompts and gradually add complexity.
194+
* Customize the generated code to match your specific business logic and branding.
195+
* Use the advanced tool handles when you need precise control over specific aspects.
196+
* Leverage existing [Telerik Design System](https://www.telerik.com/design-system/docs/) patterns for consistency.
197+
198+
## See Also
199+
200+
* [Telerik MCP Server Documentation](slug:ai-mcp-server)
201+
* [Telerik Design System](https://www.telerik.com/design-system/docs/)

‎docs-builder.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -616,8 +616,8 @@ meta:
616616
title: Common Features
617617
position: 15
618618
ai:
619-
title: AI Coding Assistant
620-
position: 14
619+
title: AI Tools
620+
position: 6
621621
styling-and-themes:
622622
title: Styling and Themes
623623
position: 12
@@ -639,6 +639,9 @@ meta:
639639
res_type: kb
640640
relativeUrl: /knowledge-base
641641
hideChildren: true
642+
ai/agentic-ui-generator:
643+
hidden: true
644+
position: 0
642645

643646

644647
redirects:

0 commit comments

Comments
 (0)