Skip to content

Commit 2d24356

Browse files
github-actions[bot]dimodi
github-actions[bot]
and
dimodi
authored
docs(AI): Add Prompt Library (#3199)
Co-authored-by: Dimo Dimov <[email protected]>
1 parent 76c6ea5 commit 2d24356

File tree

2 files changed

+212
-1
lines changed

2 files changed

+212
-1
lines changed

‎ai/mcp-server.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ To call the Telerik MCP server without the need to type `Telerik` or `#telerikBl
161161

162162
### Sample Prompts
163163

164-
The following list describes how your prompts may look like:
164+
The following list describes how your prompts may look like. Check the [Prompt Library](slug:ai-prompt-library) for more examples.
165165

166166
* &quot;Telerik Generate a Blazor Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data.&quot;
167167
* &quot;Telerik Generate a ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data.&quot;

‎ai/prompt-library.md

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
---
2+
title: Prompt Library
3+
page_title: Telerik Blazor Prompt Library
4+
description: Get familiar with some example prompts that show how to use the Telerik AI Coding Assistant for better developer productivity.
5+
slug: ai-prompt-library
6+
tags: telerik,blazor,ai
7+
published: True
8+
position: 30
9+
---
10+
11+
# Telerik Blazor Prompt Library
12+
13+
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.
14+
15+
## How to Use the Prompts
16+
17+
All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-server). The [`#telerikBlazorAssistant` 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).
18+
19+
1. Browse the prompt library to find a prompt that suits your needs.
20+
2. Copy the prompt text including the `#telerikBlazorAssistant` handle.
21+
3. (optional) Customize the prompt as needed for your specific use case. Make sure the changes comply with the [intended use](slug:ai-overview#intended-use) and the [recommendations](slug:ai-overview#recommendations) for the AI Coding Assistant.
22+
4. Run the prompt against the MCP server.
23+
24+
>warning Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project.
25+
26+
## Grid
27+
28+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
29+
30+
````TEXT.skip-repl
31+
#telerikBlazorAssistant Create a basic Grid component that displays employee data with columns for ID, Name, Position, and Salary. Include sorting and pagination functionality.
32+
````
33+
34+
````TEXT.skip-repl
35+
#telerikBlazorAssistant Implement a Grid with enabled filtering and show how to set up different filter types for text, numeric, and date columns.
36+
````
37+
38+
````TEXT.skip-repl
39+
#telerikBlazorAssistant Set up a Grid that loads data from a REST API endpoint.
40+
````
41+
42+
````TEXT.skip-repl
43+
#telerikBlazorAssistant Set up a Grid with virtual scrolling to handle large datasets efficiently
44+
````
45+
46+
````TEXT.skip-repl
47+
#telerikBlazorAssistant Create a Grid having Edit button on each row, and conditional formatting based on cell values.
48+
````
49+
50+
````TEXT.skip-repl
51+
#telerikBlazorAssistant Implement Grid with enabled grouping and expand/collapse functionality for the groups.
52+
````
53+
54+
````TEXT.skip-repl
55+
#telerikBlazorAssistant Set up a Grid with еnabled multiple selection.
56+
````
57+
58+
````TEXT.skip-repl
59+
#telerikBlazorAssistant Set up a Grid with еnabled checkbox selection.
60+
````
61+
62+
````TEXT.skip-repl
63+
#telerikBlazorAssistant Create an editable Grid that includes validation for different data types.
64+
````
65+
66+
</div>
67+
68+
## Scheduler
69+
70+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
71+
72+
````TEXT.skip-repl
73+
#telerikBlazorAssistant Create a Scheduler component with month, week, and day views.
74+
````
75+
76+
````TEXT.skip-repl
77+
#telerikBlazorAssistant Create a Scheduler with sample event data and enabled basic event creation, editing, and deletion functionality.
78+
````
79+
80+
````TEXT.skip-repl
81+
#telerikBlazorAssistant Create a resource-based Scheduler with sample data grouped by Name of the event owner.
82+
````
83+
84+
````TEXT.skip-repl
85+
#telerikBlazorAssistant Create a Scheduler that allows users to toggle between different views and displays appointments.
86+
````
87+
88+
````TEXT.skip-repl
89+
#telerikBlazorAssistant Create a Scheduler that allows to create weekly repeating events.
90+
````
91+
92+
</div>
93+
94+
## Chart
95+
96+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
97+
98+
````TEXT.skip-repl
99+
#telerikBlazorAssistant Build a column chart that shows quarterly sales by region.
100+
````
101+
102+
````TEXT.skip-repl
103+
#telerikBlazorAssistant Build a column chart that shows quarterly sales by region with drill-down functionality to show monthly data when clicking on a quarter.
104+
````
105+
106+
</div>
107+
108+
## Form
109+
110+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
111+
112+
````TEXT.skip-repl
113+
#telerikBlazorAssistant How to create a form with three TextBox fields.
114+
````
115+
116+
````TEXT.skip-repl
117+
#telerikBlazorAssistant Generate a Form with required field validation for email and password inputs.
118+
````
119+
120+
</div>
121+
122+
## Upload
123+
124+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
125+
126+
````TEXT.skip-repl
127+
#telerikBlazorAssistant Create a simple Upload component allowing chunk file upload.
128+
````
129+
130+
````TEXT.skip-repl
131+
#telerikBlazorAssistant Create an Upload component allowing single file upload to a predefined saving location.
132+
````
133+
134+
</div>
135+
136+
## DropDownList
137+
138+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
139+
140+
````TEXT.skip-repl
141+
#telerikBlazorAssistant Create two cascading DropDownLists where the second list depends on the first selection. Use Categories and Products data with a simple relationship.
142+
````
143+
144+
````TEXT.skip-repl
145+
#telerikBlazorAssistant Create a DropDownList with countries data and enabled filtering.
146+
````
147+
148+
</div>
149+
150+
## DatePicker
151+
152+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
153+
154+
````TEXT.skip-repl
155+
#telerikBlazorAssistant Create a DatePicker that disables weekends.
156+
````
157+
158+
````TEXT.skip-repl
159+
#telerikBlazorAssistant Create two DatePickers for "From" and "To" date selection where the "To" picker's min date updates based on "From" selection.
160+
````
161+
162+
````TEXT.skip-repl
163+
#telerikBlazorAssistant Render a DatePicker with a default selected date.
164+
````
165+
166+
````TEXT.skip-repl
167+
#telerikBlazorAssistant Configure the DatePicker to show week numbers in its calendar popup.
168+
````
169+
170+
````TEXT.skip-repl
171+
#telerikBlazorAssistant Change the display format in the DatePicker so dates show as 'MM/dd/yyyy'.
172+
````
173+
174+
</div>
175+
176+
## Calendar
177+
178+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
179+
180+
````TEXT.skip-repl
181+
#telerikBlazorAssistant Create a Calendar component in which all past days are disabled.
182+
````
183+
184+
````TEXT.skip-repl
185+
#telerikBlazorAssistant Create a Calendar component in which all weekends are disabled.
186+
````
187+
188+
````TEXT.skip-repl
189+
#telerikBlazorAssistant Create a Calendar that shows the past 5 years.
190+
````
191+
192+
</div>
193+
194+
## MultiSelect
195+
196+
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">
197+
198+
````TEXT.skip-repl
199+
#telerikBlazorAssistant Create a MultiSelect with an array of product objects and show the selected product names below the component.
200+
````
201+
202+
````TEXT.skip-repl
203+
#telerikBlazorAssistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count.
204+
````
205+
206+
</div>
207+
208+
## See Also
209+
210+
* [Telerik Blazor MCP Server](slug:ai-mcp-server)
211+
* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension)

0 commit comments

Comments
 (0)