You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This article provides example prompts that demonstrate the capabilities of the Telerik UI for Blazor Agentic UI Generator. Use these as inspiration for building modern web applications with speed and precision.
14
15
16
+
>tip [Go straight to the prompts ⬇️](#general-prompts)
17
+
15
18
## How to Use the Prompts
16
19
17
20
All prompts in this library target the Agentic UI Generator. The `#telerik_ui_generator` handle explicitly calls the generator, but you can also use natural language descriptions and let your AI assistant automatically recognize when to use the UI Generator or one of the other specialized tools.
18
21
19
-
1. Browse the prompt library to find a prompt that suits your needs.
22
+
1. Browse the [prompt library](#general-prompts) to find a prompt that suits your needs.
20
23
2. Copy the prompt text (including the `#telerik_ui_generator` handle if present).
21
24
3. (optional) Customize the prompt as needed for your specific use case. Make sure the changes comply with the [intended use](slug:agentic-ui-generator-getting-started#using-the-agentic-ui-generator) for the Agentic UI Generator.
22
25
4. Run the prompt against your AI-powered IDE.
23
26
24
27
>warning Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project.
25
28
26
-
## Sample Prompts
29
+
## General Prompts
27
30
28
-
Here are some example prompts that demonstrate the capabilities of the Agentic UI Generatortools.
31
+
This section provides examples of common UI creation tasks that demonstrate the capabilities of the Agentic UI Generator. The UI generator is the main tool for building full UI flows, which coordinates all other tools to deliver complete solutions.
29
32
30
-
### UI Generator Prompts
33
+
```prompt Project Setup
34
+
I have created an empty application that now needs a login screen and an admin dashboard. Add a login form with email/password fields and validation using Telerik UI for Blazor components. After a successful login, redirect to an admin dashboard page featuring a sidebar menu and a main content area displaying key metrics and recent activity.
35
+
```
36
+
```Razor
37
+
```
31
38
32
-
The UI generator is the main tool for building full UI flows, which coordinates all other tools to deliver complete solutions.
39
+
```prompt System Dashboard Section
40
+
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 system health KPIs for CPU, memory, and error counts. The middle rows include a Log Stream panel, a Telerik LineChart of API response times, and a BarChart of requests per service. The bottom row contains a Deployment History table, an Alerts panel, and a list of open tickets.
Create a responsive appointments dashboard in the Schedule.razor page using a 3x2 grid layout. The top row contains a Telerik dropdown to filter appointments by doctor and a list of today's upcoming appointments. The middle row displays a month-view scheduler showing the filtered appointments. The bottom row shows a bar chart visualizing doctor occupancy rates and a pie chart showing appointment status distribution (completed, pending, canceled).
47
+
```
48
+
```Razor
49
+
```
35
50
36
-
````TEXT.skip-repl
37
-
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 system health KPIs for CPU, memory, and error counts. The middle rows include a Log Stream panel, a Line Chart of API response times, and a Bar Chart of requests per service. The bottom row contains a Deployment History table, an Alerts panel, and a list of open tickets.
38
-
````
51
+
```prompt Responsive Page
52
+
Create a product catalog page with a responsive CSS layout that uses Telerik components. The layout should display product cards. Add a Telerik toolbar with filtering options, and expandable detail view for each product that work seamlessly on mobile, tablet, and desktop.
53
+
```
54
+
```Razor
55
+
```
39
56
40
-
````TEXT.skip-repl
41
-
Build a landing page similar to the automotive industry template with a hero section, feature highlights, statistics, and a call-to-action section.
42
-
````
57
+
```prompt Landing Page
58
+
Build a landing page similar to the "Automotive Industry" Telerik page ui template with a hero section, feature highlights, statistics, and a call-to-action section.
59
+
```
60
+
```Razor
61
+
```
43
62
44
-
</div>
63
+
## Tool-Specific Prompts
64
+
65
+
This section provides prompt examples for directly calling individual specialized tools for more granular control.
45
66
46
67
### Layout Assistant Prompts
47
68
48
-
The Layout Assistant tool applies suitable CSS utility classes from the Progress Design System for styling and positioning elements. You can use it, when you need help with spacing, typography, colors, layout structure, or transforms.
69
+
The Layout Assistant tool applies suitable CSS utility classes from the [Progress Design System](https://www.telerik.com/design-system/docs/) for styling and positioning elements. You can use it, when you need help with spacing, typography, colors, layout structure, or transforms.
49
70
50
-
````TEXT.skip-repl
51
-
Update the existing page layout by adding a new section in the middle of the 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. Make the page responsive with proper spacing and typography.
52
-
````
71
+
```prompt Responsive Layout
72
+
#telerik_layout_assistant Update the existing page layout by adding a new section in the middle of the 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. Make the page responsive with proper spacing and typography.
73
+
```
74
+
```Razor
75
+
```
53
76
54
77
### Component Assistant Prompts
55
78
56
79
The Component Assistant tool answers questions and generates code related to Telerik UI for Blazor components. Use this tool when you need to implement or configure specific UI for Blazor components like Grid, Charts, Forms, etc.
57
80
58
-
````TEXT.skip-repl
59
-
Create a Grid component with paging, sorting, and filtering. Include column configuration for a product catalog with name, price, category, and actions. Ensure the Grid is properly integrated into a card layout with responsive design and consistent spacing.
60
-
````
81
+
```prompt Interactive Data Page
82
+
#telerik_component_assistant Create a Grid component with paging, sorting, and filtering. Include column configuration for a product catalog with name, price, category, and actions. Ensure the Grid is properly integrated into a card layout with responsive design and consistent spacing.
83
+
```
84
+
```Razor
85
+
```
86
+
87
+
```prompt Multi-Component Data View
88
+
#telerik_component_assistant Insert a new section with a Grid on the left to filter and sort 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.
89
+
```
90
+
```Razor
91
+
```
61
92
62
93
### Style Assistant Prompts
63
94
64
95
The Style Assistant tool 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.
Generate a custom theme for a corporate blue and green color scheme with high contrast accessibility requirements.
70
-
````
99
+
```prompt Accessible Color Theme
100
+
#telerik_style_assistant Generate a custom theme for a corporate blue and green color scheme with high contrast accessibility requirements.
101
+
```
102
+
```Razor
103
+
```
71
104
72
-
````TEXT.skip-repl
73
-
Create a comprehensive dark mode theme with a dark background, light text, subtle border radius on cards and buttons, and increased spacing between the UI components.
74
-
````
105
+
```prompt Dark Mode Theme
106
+
#telerik_style_assistant Create a comprehensive dark mode theme with a dark background, light text, subtle border radius on cards and buttons, and increased spacing between the UI components.
107
+
```
108
+
```Razor
109
+
```
75
110
76
111
</div>
77
112
@@ -81,13 +116,17 @@ The Icon Assistant tool searches and retrieves icons from the Progress Design Sy
Copy file name to clipboardExpand all lines: ai/ai-coding-assistant/prompt-library.md
+86-10Lines changed: 86 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,24 +7,94 @@ tags: telerik,blazor,ai
7
7
published: True
8
8
position: 2
9
9
previous_url: /ai/prompt-library
10
+
tag: updated
10
11
---
11
12
12
13
# AI Coding Assistant Prompt Library
13
14
14
15
This article provides a list of sample prompts for use with the [Telerik Blazor MCP Server](slug:ai-mcp-server). They can help you get a better idea what the Telerik AI Coding Assistant can do and how to compose your prompts. This collection is not exhaustive and you can prompt the Telerik AI Coding Assistant about other scenarios and components as well.
15
16
17
+
>tip [Go straight to the prompts ⬇️](#general-prompts)
18
+
16
19
## How to Use the Prompts
17
20
18
21
All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-server). The [`#telerik_blazor_assistant` handle](slug:ai-mcp-server#usage) assumes that this is the server name you have [entered in the `mcp.json` file during installation](slug:ai-mcp-server#installation).
19
22
20
-
1. Browse the prompt library to find a prompt that suits your needs.
23
+
1. Browse the [prompt library](#general-prompts) to find a prompt that suits your needs.
21
24
2. Copy the prompt text including the `#telerik_blazor_assistant` handle.
22
25
3. (optional) Customize the prompt as needed for your specific use case.
23
26
4. Run the prompt against the MCP server.
24
27
25
28
>warning Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project.
26
29
27
-
## Grid
30
+
## General Prompts
31
+
32
+
This section provides examples of general questions related to Telerik UI for Blazor.
#telerik_blazor_assistant in the current Blazor project, use the existing model classes and data and help me visualize the data by configuring a Grid, a Chart, and a DatePicker. The Grid should display Product details, the Chart should show Sales figures per Category, and the DatePicker should allow filtering Products by date range.
38
+
39
+
```
40
+
```Razor
41
+
```
42
+
43
+
```prompt Component Overview
44
+
#telerik_blazor_assistant What are the primary use cases of the Telerik UI for Blazor Grid vs TreeList vs ListView? Provide examples of their usage.
45
+
```
46
+
```Razor
47
+
```
48
+
49
+
</div>
50
+
51
+
## Tool-Specific Prompts
52
+
53
+
This section provides prompt examples for directly calling individual specialized tools for more granular control.
54
+
55
+
### Component Tool
56
+
57
+
Use the `#telerik_component_assistant` handle for specific implementations that need the UI for Blazor components:
#telerik_component_assistant Create a Grid component that uses the Product model and has paging (50 records per page), sorting, and filtering enabled.
63
+
```
64
+
```Razor
65
+
```
66
+
67
+
```prompt Grid with Virtual Scrolling
68
+
#telerik_component_assistant Show me sample code for a Telerik UI for Blazor Grid with virtual scrolling. The page size must be 20 records, the height of the Grid must be 450px, and the rows must be 40px high.
69
+
```
70
+
```Razor
71
+
```
72
+
73
+
</div>
74
+
75
+
### Icon Tool
76
+
77
+
Use the `#telerik_icon_assistant` handle for finding and implementing suitable icons based on your scenario:
0 commit comments