From 1a081d7cb3e64eea5123664d9e999dceda3222e9 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 3 Dec 2025 17:45:59 +0530 Subject: [PATCH 1/2] 995304: Added Prompt Library content in Blazor common UG documentation and updated toc file --- blazor-toc.html | 31 +- blazor/ai-coding-assistant/prompt-library.md | 285 +++++++++++++++++++ 2 files changed, 301 insertions(+), 15 deletions(-) create mode 100644 blazor/ai-coding-assistant/prompt-library.md diff --git a/blazor-toc.html b/blazor-toc.html index 0c48e9491c..9a67b998b2 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -67,6 +67,21 @@
  • Razor Class Library in Visual Studio
    • +
  • + UI Kit + +
    • +
  • Tutorials + +
  • Using Syncfusion.Blazor NuGet
    • -
  • - UI Kit - -
    • -
  • Tutorials - -
  • AI Coding Assistant
  • Smart (AI) Solutions diff --git a/blazor/ai-coding-assistant/prompt-library.md b/blazor/ai-coding-assistant/prompt-library.md new file mode 100644 index 0000000000..7dadc521c8 --- /dev/null +++ b/blazor/ai-coding-assistant/prompt-library.md @@ -0,0 +1,285 @@ +--- +layout: post +title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion +description: Explore the AI Coding Assistant Prompt Library to enhance Blazor development productivity with code generation, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistant Prompt Library +platform: Blazor +documentation: ug +domainurl: ##DomainURL## +--- + +# Prompt Library - AI Coding Assistant + +Speed up your Blazor projects using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. + +## How to Use + +Before starting, make sure your MCP Server is set up and running. + +* Choose a prompt that fits your need. +* Copy the full prompt with the #SyncfusionBlazorAssistant handle. +* Customize the prompt for your specific use case. +* Execute via the MCP Server. +* Always check and test the code before adding it to your project. + +## Component-Specific Prompts + +### Grid + +The Syncfusion Blazor Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. + +{% promptcards %} +{% promptcard Paging and Sorting %} +#SyncfusionBlazorAssistant How do I enable paging and sorting in the Syncfusion Blazor Grid? +{% endpromptcard %} +{% promptcard Grouping and Filtering %} +#SyncfusionBlazorAssistant Show me an example of grouping and filtering data in the Grid component. +{% endpromptcard %} +{% promptcard CRUD Operations %} +#SyncfusionBlazorAssistant What’s the code to implement full CRUD operations in Syncfusion Blazor Grid? +{% endpromptcard %} +{% promptcard Grid Export to PDF and Excel %} +#SyncfusionBlazorAssistant How can I add PDF and Excel export options to the Grid toolbar? +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionBlazorAssistant How do I configure virtual scrolling for large datasets in the Grid? +{% endpromptcard %} +{% promptcard Multicolumn Grid Setup %} +#SyncfusionBlazorAssistant Create a multicolumn Grid to display product details with sorting and filtering. +{% endpromptcard %} +{% promptcard Chat Integration %} +#SyncfusionBlazorAssistant How can I integrate a chat widget inside each row of the Syncfusion Grid? +{% endpromptcard %} +{% promptcard Advanced Grid Features %} +#SyncfusionBlazorAssistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling +{% endpromptcard %} +{% promptcard Troubleshooting Grid Export %} +#SyncfusionBlazorAssistant Why isn’t my Grid exporting to PDF and Excel correctly? +{% endpromptcard %} +{% promptcard Inline Editing %} +#SyncfusionBlazorAssistant How do I enable inline editing for CRUD operations in the Grid? +{% endpromptcard %} +{% promptcard Custom Toolbar %} +#SyncfusionBlazorAssistant Add custom toolbar buttons for PDF and Excel export in the Grid. +{% endpromptcard %} +{% promptcard Dynamic Column Configuration %} +#SyncfusionBlazorAssistant How can I dynamically configure multicolumn layout with filtering and sorting? +{% endpromptcard %} +{% endpromptcards %} + +### Chart + +The Syncfusion Blazor Chart suite offers versatile visualization tools across various series types for insightful data representation. + +{% promptcards %} +{% promptcard Local and Remote Data %} +#SyncfusionBlazorAssistant How do I bind both local and remote data sources to a Syncfusion Chart? +{% endpromptcard %} +{% promptcard Range Selection %} +#SyncfusionBlazorAssistant Show me how to enable range selection in a Syncfusion Blazor Chart. +{% endpromptcard %} +{% promptcard Chart Types Overview %} +#SyncfusionBlazorAssistant What chart types are available in Syncfusion Blazor Chart and how to configure them? +{% endpromptcard %} +{% promptcard Markers and Data Labels %} +#SyncfusionBlazorAssistant How can I display markers and data labels on a line chart? +{% endpromptcard %} +{% promptcard Annotations %} +#SyncfusionBlazorAssistant Add custom annotations to highlight specific data points in a chart. +{% endpromptcard %} +{% promptcard Chart Export to Image or PDF %} +#SyncfusionBlazorAssistant How do I export a Syncfusion Chart to PDF or image format? +{% endpromptcard %} +{% promptcard Print Support %} +#SyncfusionBlazorAssistant Enable print functionality for a Syncfusion Blazor Chart component. +{% endpromptcard %} +{% promptcard Dynamic Chart with Remote Data %} +#SyncfusionBlazorAssistant Create a chart that updates dynamically with remote API data. +{% endpromptcard %} +{% promptcard Multiple Series Types %} +#SyncfusionBlazorAssistant How do I combine bar and line chart types in a single Syncfusion Chart? +{% endpromptcard %} +{% promptcard Troubleshooting Chart Data Binding %} +#SyncfusionBlazorAssistant Why isn’t my remote data showing up in the Syncfusion Chart? +{% endpromptcard %} +{% promptcard Interactive Range Selector %} +#SyncfusionBlazorAssistant Configure a range selector for zooming and filtering in a time-series chart. +{% endpromptcard %} +{% promptcard Custom Markers and Labels %} +#SyncfusionBlazorAssistant Show me an example of customizing chart markers and data label styles. +{% endpromptcard %} +{% endpromptcards %} + +### Schedule + +The Syncfusion Blazor Schedule component helps manage events, resources, and timelines with powerful views and customization. + +{% promptcards %} +{% promptcard Module Injection %} +#SyncfusionBlazorAssistant How do I inject required modules into the Syncfusion Blazor Schedule component? +{% endpromptcard %} +{% promptcard Remote Data Binding %} +#SyncfusionBlazorAssistant Bind the Schedule component to a remote API for dynamic event loading. +{% endpromptcard %} +{% promptcard CRUD Actions %} +#SyncfusionBlazorAssistant Show me how to implement full CRUD operations in the Schedule component. +{% endpromptcard %} +{% promptcard Virtual Scrolling %} +#SyncfusionBlazorAssistant Enable virtual scrolling for large event datasets in the Schedule view. +{% endpromptcard %} +{% promptcard Timezone Support %} +#SyncfusionBlazorAssistant How can I configure timezone support in the Syncfusion Blazor Schedule? +{% endpromptcard %} +{% promptcard Export Schedule to PDF or Excel %} +#SyncfusionBlazorAssistant Add export functionality to download the Schedule view as PDF or Excel. +{% endpromptcard %} +{% promptcard Timeline Header Rows %} +#SyncfusionBlazorAssistant How do I customize timeline header rows in the Schedule component? +{% endpromptcard %} +{% promptcard Multiple Module Injection %} +#SyncfusionBlazorAssistant Inject multiple modules like Day, Week, and Timeline views into Schedule. +{% endpromptcard %} +{% promptcard Troubleshooting Schedule CRUD %} +#SyncfusionBlazorAssistant Why aren’t my CRUD actions working correctly in the Schedule component? +{% endpromptcard %} +{% promptcard Local and Remote Data %} +#SyncfusionBlazorAssistant Bind both local and remote event data to the Schedule component. +{% endpromptcard %} +{% promptcard Export and Timezone %} +#SyncfusionBlazorAssistant Configure timezone-aware exporting for the Schedule view. +{% endpromptcard %} +{% promptcard Advanced Schedule Setup %} +#SyncfusionBlazorAssistant Create a Schedule with module injection, CRUD, virtual scrolling, and exporting. +{% endpromptcard %} +{% endpromptcards %} + +### Kanban + +The Syncfusion Blazor Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. + +{% promptcards %} +{% promptcard Data Binding %} +#SyncfusionBlazorAssistant How do I bind local or remote data to the Syncfusion Blazor Kanban board? +{% endpromptcard %} +{% promptcard Sorting %} +#SyncfusionBlazorAssistant Enable sorting of cards within columns in the Kanban component. +{% endpromptcard %} +{% promptcard Swimlane View %} +#SyncfusionBlazorAssistant Show me how to group Kanban cards using swimlane headers. +{% endpromptcard %} +{% promptcard Kanban Card Editing %} +#SyncfusionBlazorAssistant How can I enable inline editing of Kanban cards? +{% endpromptcard %} +{% promptcard Virtualization %} +#SyncfusionBlazorAssistant Configure virtualization for performance with large Kanban datasets. +{% endpromptcard %} +{% promptcard Localization %} +#SyncfusionBlazorAssistant How do I localize labels and messages in the Kanban component? +{% endpromptcard %} +{% promptcard Drag and Drop %} +#SyncfusionBlazorAssistant Enable drag-and-drop functionality for moving cards between columns. +{% endpromptcard %} +{% promptcard Sorting and Swimlane %} +#SyncfusionBlazorAssistant Create a Kanban board with swimlane grouping and sortable cards. +{% endpromptcard %} +{% promptcard Editable Cards and Localization %} +#SyncfusionBlazorAssistant Show me how to edit cards and apply localization in Kanban. +{% endpromptcard %} +{% promptcard Troubleshooting Kanban Drag and Drop %} +#SyncfusionBlazorAssistant Why isn’t drag-and-drop working correctly in my Kanban board? +{% endpromptcard %} +{% promptcard Remote Data and Virtualization %} +#SyncfusionBlazorAssistant Bind remote data to Kanban and enable virtualization for performance. +{% endpromptcard %} +{% promptcard Advanced Kanban Setup %} +#SyncfusionBlazorAssistant Create a Kanban board with data binding, swimlane, card editing, and drag-and-drop. +{% endpromptcard %} +{% endpromptcards %} + +### RichTextEditor + +The Syncfusion Blazor RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. + +{% promptcards %} +{% promptcard Toolbar Configuration %} +#SyncfusionBlazorAssistant How do I customize the toolbar options in the Syncfusion RichTextEditor? +{% endpromptcard %} +{% promptcard Link Manipulation %} +#SyncfusionBlazorAssistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. +{% endpromptcard %} +{% promptcard Iframe Mode %} +#SyncfusionBlazorAssistant How can I render the RichTextEditor inside an iframe for isolated styling? +{% endpromptcard %} +{% promptcard Module Injection %} +#SyncfusionBlazorAssistant Inject feature modules like toolbar, link, and image into RichTextEditor. +{% endpromptcard %} +{% promptcard Undo and Redo %} +#SyncfusionBlazorAssistant Enable undo and redo functionality in the RichTextEditor toolbar. +{% endpromptcard %} +{% promptcard Forms Integration %} +#SyncfusionBlazorAssistant How do I integrate a Blazor form and validate input? +{% endpromptcard %} +{% promptcard Content Import and Export %} +#SyncfusionBlazorAssistant Export RichTextEditor content to HTML or import existing HTML content. +{% endpromptcard %} +{% promptcard Advanced Toolbar %} +#SyncfusionBlazorAssistant Create a RichTextEditor with toolbar options for formatting, links, and undo/redo. +{% endpromptcard %} +{% promptcard Iframe and Forms Support %} +#SyncfusionBlazorAssistant Use RichTextEditor in iframe mode and bind it to a form for submission. +{% endpromptcard %} +{% promptcard Undo/Redo and Export %} +#SyncfusionBlazorAssistant Enable undo/redo and export content to HTML in RichTextEditor. +{% endpromptcard %} +{% promptcard Module Injection and Link Editing %} +#SyncfusionBlazorAssistant Inject toolbar and link modules to enable rich link editing in the editor. +{% endpromptcard %} +{% endpromptcards %} + +### Calendar + +The Syncfusion Blazor Calendar supports flexible date selection, localization, and custom rendering. + +{% promptcards %} +{% promptcard Date Range Selection %} +#SyncfusionBlazorAssistant How do I enable date range selection in the Syncfusion Blazor Calendar? +{% endpromptcard %} +{% promptcard Globalization Support %} +#SyncfusionBlazorAssistant Configure the Calendar to support multiple cultures and languages. +{% endpromptcard %} +{% promptcard Multi-Date Selection %} +#SyncfusionBlazorAssistant Show me how to allow users to select multiple dates in the Calendar. +{% endpromptcard %} +{% promptcard Islamic Calendar Support %} +#SyncfusionBlazorAssistant How can I switch the Calendar to use the Islamic calendar system? +{% endpromptcard %} +{% promptcard Skip Months Feature %} +#SyncfusionBlazorAssistant Enable skipping months in the Calendar navigation for faster browsing. +{% endpromptcard %} +{% promptcard Calendar Showing Other Month Days %} +#SyncfusionBlazorAssistant How do I show days from adjacent months in the current Calendar view? +{% endpromptcard %} +{% promptcard Custom Day Cell Format %} +#SyncfusionBlazorAssistant Customize the day cell format in the Calendar to show short weekday names. +{% endpromptcard %} +{% promptcard Calendar Highlighting Weekends %} +#SyncfusionBlazorAssistant Highlight weekends in the Calendar with a different background color. +{% endpromptcard %} +{% promptcard Globalization and Islamic Calendar %} +#SyncfusionBlazorAssistant Configure the Calendar for Arabic culture using Islamic calendar and localization. +{% endpromptcard %} +{% promptcard Multi-Selection and Range %} +#SyncfusionBlazorAssistant Enable both multi-date selection and range selection in the Calendar. +{% endpromptcard %} +{% promptcard Troubleshooting Calendar Date Range %} +#SyncfusionBlazorAssistant Why isn’t my Calendar selecting the correct date range? +{% endpromptcard %} +{% promptcard Advanced Calendar Setup %} +#SyncfusionBlazorAssistant Create a Calendar with date range, multi-selection, globalization, and weekend highlights. +{% endpromptcard %} +{% endpromptcards %} + +## See also + +* [AI Coding Assistant Overview](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +* [SyncfusionBlazorAssistant MCP Server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server) From 53e86da63e721495800fd4272e1b436502efd786 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 3 Dec 2025 19:05:38 +0530 Subject: [PATCH 2/2] Removed unwanted content --- blazor/ai-coding-assistant/prompt-library.md | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/blazor/ai-coding-assistant/prompt-library.md b/blazor/ai-coding-assistant/prompt-library.md index 7dadc521c8..433971e8d9 100644 --- a/blazor/ai-coding-assistant/prompt-library.md +++ b/blazor/ai-coding-assistant/prompt-library.md @@ -115,9 +115,6 @@ The Syncfusion Blazor Chart suite offers versatile visualization tools across va The Syncfusion Blazor Schedule component helps manage events, resources, and timelines with powerful views and customization. {% promptcards %} -{% promptcard Module Injection %} -#SyncfusionBlazorAssistant How do I inject required modules into the Syncfusion Blazor Schedule component? -{% endpromptcard %} {% promptcard Remote Data Binding %} #SyncfusionBlazorAssistant Bind the Schedule component to a remote API for dynamic event loading. {% endpromptcard %} @@ -136,9 +133,6 @@ The Syncfusion Blazor Schedule component helps manage events, resources, and tim {% promptcard Timeline Header Rows %} #SyncfusionBlazorAssistant How do I customize timeline header rows in the Schedule component? {% endpromptcard %} -{% promptcard Multiple Module Injection %} -#SyncfusionBlazorAssistant Inject multiple modules like Day, Week, and Timeline views into Schedule. -{% endpromptcard %} {% promptcard Troubleshooting Schedule CRUD %} #SyncfusionBlazorAssistant Why aren’t my CRUD actions working correctly in the Schedule component? {% endpromptcard %} @@ -148,9 +142,6 @@ The Syncfusion Blazor Schedule component helps manage events, resources, and tim {% promptcard Export and Timezone %} #SyncfusionBlazorAssistant Configure timezone-aware exporting for the Schedule view. {% endpromptcard %} -{% promptcard Advanced Schedule Setup %} -#SyncfusionBlazorAssistant Create a Schedule with module injection, CRUD, virtual scrolling, and exporting. -{% endpromptcard %} {% endpromptcards %} ### Kanban @@ -210,9 +201,6 @@ The Syncfusion Blazor RichTextEditor offers a modern WYSIWYG editor with extensi {% promptcard Iframe Mode %} #SyncfusionBlazorAssistant How can I render the RichTextEditor inside an iframe for isolated styling? {% endpromptcard %} -{% promptcard Module Injection %} -#SyncfusionBlazorAssistant Inject feature modules like toolbar, link, and image into RichTextEditor. -{% endpromptcard %} {% promptcard Undo and Redo %} #SyncfusionBlazorAssistant Enable undo and redo functionality in the RichTextEditor toolbar. {% endpromptcard %} @@ -231,9 +219,6 @@ The Syncfusion Blazor RichTextEditor offers a modern WYSIWYG editor with extensi {% promptcard Undo/Redo and Export %} #SyncfusionBlazorAssistant Enable undo/redo and export content to HTML in RichTextEditor. {% endpromptcard %} -{% promptcard Module Injection and Link Editing %} -#SyncfusionBlazorAssistant Inject toolbar and link modules to enable rich link editing in the editor. -{% endpromptcard %} {% endpromptcards %} ### Calendar