KendoReact Agentic UI Generator Prompt LibraryPremium
Welcome to the KendoReact Agentic UI Generator Prompt Library.
The prompts provided here are intended and optimized for use with the KendoReact Agentic UI Generator. They can help you accelerate the creation and styling of modern web applications, from individual components to complete responsive pages and custom themes.
This collection of prompts is not exhaustive and the KendoReact team is constantly working on adding more prompts to the library.
How to Use the Prompts
The prompts in this library target the Agentic UI Generator using the main #kendo_ui_generator handle, individual tool handles, or natural language descriptions. Make sure that you have installed and enabled the Agentic UI Generator before attempting to run the prompts.
- Browse the prompt library to find a prompt that suits your needs.
- Copy the prompt text (including any handles like
#kendo_ui_generatorif needed) or use it as inspiration for your natural language description. - (Optional) Customize the prompt as needed for your specific use case.
When modifying the prompts, make sure the changes comply with the intended use and the recommendations for the Agentic UI Generator. - Start a new chat session and run the chosen prompt.
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 using the Agentic UI Generator. Prefixing the prompts with the #kendo_ui_generator handle is optional, but including it ensures the main generator is explicitly invoked.
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. After 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 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.Create a responsive appointments dashboard in the schedule page using a 3x2 grid layout. The top row contains a 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 grid layout displaying product cards. Add a 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 template with a hero section, feature highlights, statistics, and a call-to-action section.Tool-Specific Prompts
This section provides prompt examples for directly calling individual specialized tools for more granular control.
Layout Tool
Use the #kendo_layout_assistant handle to structure your page layout and organize your UI elements:
#kendo_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.#kendo_layout_assistant I have an existing carousel feature section that needs to be replaced with a responsive 3-column grid layout. Convert the carousel items into a grid that displays 3 columns on desktop, 2 columns on tablet, and 1 column on mobile with proper spacing and alignment.Component Tool
Use the #kendo_component_assistant handle for specific implementations that need the KendoReact components:
#kendo_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.#kendo_component_assistant Insert a new section with a Grid on the left to filter, sort, and edit 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 and reactively update based on the selected date range.Styling Tool
Use the #kendo_style_assistant handle for custom themes and brand-specific styling:
#kendo_style_assistant Generate custom CSS variables for a corporate blue and green color scheme with high contrast accessibility requirements.#kendo_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 Tool
Use the #kendo_icon_assistant handle for finding and implementing suitable icons based on your scenario:
#kendo_icon_assistant Add icons suitable for the Home, Settings, and User Profile buttons in my navigation bar.#kendo_icon_assistant Find appropriate icons for data visualization actions like export, print, refresh, and search in a dashboard toolbar.