How can I help you?
Prompt Library - Agentic UI Builder
23 Feb 202624 minutes to read
Speed up React development with ready-made prompts for common scenarios. Use them to generate complete applications, components, layouts, and custom styling.
How to Use
Ensure that the Syncfusion MCP Server is configured and running before executing prompts.
- Select a prompt that aligns with your development requirements.
- Copy the complete prompt, including the tool (e.g., #sf_react_ui_builder).
- Customize the prompt for your specific use case.
- Execute the prompt through the MCP Server.
- Validate all generated code through thorough testing before production deployment.
General Project Prompts
These flexible prompts address common application development scenarios using intuitive natural language descriptions.
#sf_react_ui_builder Create a login page with the Tailwind 3 theme using a centered card layout containing email and password input fields with validation. Include a “Remember Me” checkbox, a forgot password link, and a primary login button. Add a secondary “Create Account” button below. Ensure the layout is responsive and works on mobile, tablet, and desktop.
#sf_react_ui_builder Create a book library dashboard page with the Bootstrap 5.3 theme displaying a grid of book cards showing cover images, titles, authors, and reading progress bars. Add a search box and genre filter dropdown at the top. Include a sidebar showing reading statistics with charts for books completed this month, reading streaks, and favorite genres. Make the grid responsive (4 columns on desktop, 2 on tablet, 1 on mobile).
#sf_react_ui_builder Create a product catalog page with the Fluent 2 theme featuring a left sidebar containing category filters and a price range slider. The main content area should display product cards in a responsive grid layout (4 columns on desktop, 2 on tablet, 1 on mobile). Add a search box and sort dropdown at the top of the main content area. Include pagination at the bottom.
#sf_react_ui_builder Create a course details page with the Material 3 theme, including a video player section at the top. Below the video, display the course overview; curriculum using a TreeView component with expandable chapters and lessons; student reviews with rating distribution; and frequently asked questions in separate card sections. Add a right sidebar with a course enrollment card showing price, an enroll button, instructor details with avatar and bio, and a course progress indicator.
#sf_react_ui_builder Build a task board page using a Kanban layout with columns for To Do, In Progress, and Completed. Add an “Add Task” button and a search field at the top. Each task card should show title, assignee avatar, due date, and priority badge. Make the columns scrollable, with drag-and-drop functionality. Include filter dropdowns for priority and assignee.
#sf_react_ui_builder Create an order tracking page with the Tailwind 3 theme featuring a search bar at the top to look up orders by ID. Display order details in a card layout showing customer info, order items in a grid, and order status using a stepper component. Add a timeline on the right showing shipping updates and delivery progress.
Tool-Specific Prompts
This section provides targeted prompt examples for directly invoking individual specialized tools, offering more precise control over specific aspects of your application.
Layout Tool
The Layout tool orchestrates page structure, element positioning, and responsive behavior. Use #sf_react_layout when working with spatial arrangement and viewport adaptation.
#sf_react_layout Add a statistics panel below the search area with cards showing books completed, reading streak, and favorite genres. Use a 3-column layout (desktop), 2-column (tablet), and stacked (mobile).
#sf_react_layout Create a centered modal with a product image gallery (left 50%) and details (right 50%). Add a close button at the top-right. Stack vertically on mobile.
#sf_react_layout Design a form with a centered container (max-width 1200px). Two equal columns on desktop: user info (left), address (right). Full-width terms and submit button at the bottom. Stack on tablet/mobile.
#sf_react_layout Create a layout with a left sidebar (280px, navigation), top header (logo, user profile), breadcrumb, and main content area. Collapse the sidebar to a hamburger menu on mobile.
Component Tool
The Component tool implements specific Syncfusion React components with configured properties and event handlers. Use #sf_react_component for targeted component integration.
#sf_react_component Create a Grid with paging (20 per page), sorting, and filtering. Columns: product image, name (link), category, price (currency), stock status (badge), actions (edit/delete). Enable row selection and Excel export.
#sf_react_component Add a Scheduler with month/day/week/agenda views. Toolbar with date navigation, view switcher, and an “Add Event” button. Color-coded categories and drag-and-drop rescheduling.
#sf_react_component Build a step-by-step registration form with validation per step. Steps: TextBox (personal info), DropDownList (preferences), FileUpload (documents), summary. Add progress indicators and navigation with validation.
#sf_react_component Create a Chart component with a line series for real-time data visualization. Configure multiple y-axes, a tooltip with custom formatting, a legend with toggling, and zoom/pan functionality. Update data every 5 seconds.
Styling Tool
The Styling tool applies custom themes, color schemes, visual treatments, and iconography across your application. Use #sf_react_style for branding, aesthetic customization, and icon integration.
#sf_react_style Apply the Syncfusion Tailwind 3 dark theme to the application. Configure CSS variables for the dark mode color scheme and enable theme toggle functionality.
#sf_react_style Customize the Syncfusion Bootstrap 5.3 theme using CSS variables. Modify primary colors, component spacing, and typography to match brand guidelines.
#sf_react_style Apply the Syncfusion Fluent 2 theme with responsive adjustments. Customize component sizes, spacing, and layout breakpoints for mobile, tablet, and desktop views.
#sf_react_style Configure the Syncfusion Material 3 theme CSS variables for a custom color palette, elevation shadows, border radius, and component-specific styling properties.
#sf_react_style Add appropriate icons for common user interactions in the application toolbar, including editing capabilities, navigation controls, and accessing various options.
#sf_react_style Implement icons for text formatting operations, table manipulation, and image editing tools in the Rich Text Editor.
#sf_react_style Find icons for file operations, document processing, printing capabilities, and export functionality in the File Manager toolbar.