Agentic UI Generator Prompt Library
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.
How to Use the Prompts
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.
- Browse the prompt library to find a prompt that suits your needs.
- Copy the prompt text (including the
#telerik_ui_generatorhandle if present). - (optional) Customize the prompt as needed for your specific use case. Make sure the changes comply with the intended use for the Agentic UI Generator.
- Run the prompt against your AI-powered IDE.
Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project.
General Prompts
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.
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.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).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.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.Add an employee directory page with a search bar and department filter at the top. Display employee details in a responsive grid layout showing names, titles, hiring dates. Include a TreeView on the left for navigating the organizational hierarchy. Add a Tooltip showing detailed employee information when a row in the Grid is hovered.Create an event management interface with a Scheduler component as the main element displaying events in month, week, and day views. Add a top toolbar with view switcher, date navigation, and create event button. Include a sidebar showing upcoming events list and a small Calendar for quick date selection. Add filtering options for event types and venues.Build a patient portal with a Card layout showing different sections: upcoming appointments with a ListView, current prescriptions Grid, recent lab results with expandable rows, and a messaging panel for communicating with healthcare providers. Add a top navigation with icons for appointments, records, billing, and messages. Include a notification Badge showing unread messages.Add a maintenance tracking page with a Grid listing all machines showing last service date, next scheduled maintenance, operating hours, and status indicators. Add a Form for scheduling maintenance with DateTimePicker, technician DropDownList, and maintenance type CheckBoxList. Include a Chart showing downtime analysis.Create an employee onboarding wizard (using the Telerik Wizard) with step icons: user for personal info, briefcase for job details, id-card for credentials, checkmark for review. Step 1 shows a Form for name, email, and phone with user icon in the header. Step 2 displays department DropDownList and role selection with briefcase icon. Step 3 contains system access CheckBoxList and password setup with lock icon. Final step shows a summary Card with all entered information and a submit Button with checkmark icon.Advanced Tool-Specific Prompts
This section provides prompt examples for directly calling individual specialized tools for more granular control.
Layout Assistant Prompts
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.
#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.Component Assistant Prompts
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.
#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.#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.Style Assistant Prompts
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.
#telerik_style_assistant Generate a custom theme for a corporate blue and green color scheme with high contrast accessibility requirements.#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.Icon Assistant Prompts
The Icon Assistant tool 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.
#telerik_icon_assistant Add icons suitable for the Home, Settings, and User Profile buttons in my navigation bar.#telerik_icon_assistant Find appropriate icons for data visualization actions like export, print, refresh, and search in a dashboard toolbar.