diff --git a/_contentTemplates/common/ai-coding-assistant.md b/_contentTemplates/common/ai-coding-assistant.md index c0db8c1b6..350cb1332 100644 --- a/_contentTemplates/common/ai-coding-assistant.md +++ b/_contentTemplates/common/ai-coding-assistant.md @@ -3,11 +3,11 @@ A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing- #end #vs-intro -provides automated configuration commands for the Telerik AI-powered development tools. These commands help you quickly set up the [Telerik MCP server](slug:ai-mcp-server) and [GitHub Copilot extension](slug:ai-copilot-extension) for enhanced developer productivity with Telerik UI for Blazor components. +provides automated configuration commands for the Telerik AI-powered development tools. These commands help you quickly set up the [Telerik MCP server](slug:ai-mcp-server) for enhanced developer productivity with Telerik UI for Blazor components. #end #prerequisites -* Check the tool-specific prerequisites for the [Telerik Blazor MCP Server](slug:ai-mcp-server#prerequisites) and the [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension#prerequisites). +* Check the tool-specific prerequisites for the [Telerik Blazor MCP Server](slug:ai-mcp-server#prerequisites). #end #verify-license-key @@ -15,7 +15,7 @@ file to verify that the `TELERIK_LICENSE_PATH` value matches your actual [Teleri #end #command-github-app -command opens the [TelerikBlazor GitHub App installation page](https://github.com/apps/telerikblazor/installations/select_target) in your default browser. Then, follow the [installation instructions for the Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension#installation). +command opens the [TelerikBlazor GitHub App installation page](https://github.com/apps/telerikblazor/installations/select_target) in your default browser. #end #copilot-instructions @@ -29,5 +29,4 @@ command generates a `copilot-instructions.md` file in the `.github` folder under #see-also * [Telerik AI Tooling Overview](slug:ai-overview) * [Telerik Blazor MCP Server](slug:ai-mcp-server) -* [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension) #end diff --git a/_contentTemplates/common/get-started.md b/_contentTemplates/common/get-started.md index e8e262a12..9bca450ad 100644 --- a/_contentTemplates/common/get-started.md +++ b/_contentTemplates/common/get-started.md @@ -241,6 +241,6 @@ The [Telerik License Key](slug:installation-license-key) article provides additi #ai-coding-assistant-ad -Use the [Telerik AI Coding Assistant](slug:ai-overview) through the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension). These tools help you receive tips and generate code snippets that include Telerik UI for Blazor components and API. +Use the [Telerik AI Coding Assistant](slug:ai-overview) through the [Telerik Blazor MCP server](slug:ai-mcp-server). This tool helps you receive tips and generate code snippets that include Telerik UI for Blazor components and APIs. #end \ No newline at end of file diff --git a/ai/agentic-ui-generator/getting-started.md b/ai/agentic-ui-generator/getting-started.md new file mode 100644 index 000000000..7ea163c77 --- /dev/null +++ b/ai/agentic-ui-generator/getting-started.md @@ -0,0 +1,149 @@ +--- +title: Getting Started +page_title: Getting Started with the Telerik UI for Blazor Agentic UI Generator +description: Learn how to install and configure the Telerik UI for Blazor Agentic UI Generator in Visual Studio and Visual Studio Code. +slug: agentic-ui-generator-getting-started +position: 10 +tags: telerik,blazor,ai,agentic,ui,generator,installation +published: True +--- + +# Getting Started with the Agentic UI Generator + +This article describes how to install, configure, and use the Telerik UI for Blazor Agentic UI Generator in Visual Studio and Visual Studio Code. + +## Prerequisites + +An AI-powered IDE that supports MCP servers, for example, Visual Studio, Visual Studio Code, Cursor. + +## Installation + +The Agentic UI Generator is available as an MCP (Model Context Protocol) server that integrates with AI-powered IDEs like Visual Studio Code, Cursor, and other MCP-compatible tools. + +### Configuration Steps + +This section contains information about how to set up the Agentic UI Generator in Visual Studio and Visual Studio Code. + +#### Visual Studio + +1. In your browser, go to the [API Keys](https://www.telerik.com/account/downloads/api-keys) page in your Telerik account. If you already have an existing API key, you can skip steps 2-6 and continue from step 7, instead of creating a new key. +2. Click **Generate New Key +**. +3. In the **Key Note** field, add a note that describes the API key. +4. Click **Generate Key**. +5. Select **Copy and Close**. Once you close the window, you can no longer copy the generated key. For security reasons, the **API Keys** page displays only a portion of the key. +6. Store the generated NuGet API key as you will need it in the next steps. +7. To enable the Agentic UI Generator in your application, in Visual Studio, add a `.mcp.json` file to the solution folder. +8. In the `.mcp.json` file, set your API Key as `x-api-key` value, as demonstrated in the JSON configuration below. + +>caption .mcp.json + +````JSON.skip-repl +{ + "servers": { + "telerik-ui-generator": { + "type": "http", + "url": "https://uiagent.mcp.telerik.com/mcp/blazor", + "headers": { + "x-api-key": "YOUR API KEY" + } + } + } +} +```` + +To enable global automatic discovery of the Agentic UI Generator in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`. + +> Once the MCP server configuration is added, make sure that the `telerik-ui-generator` tool is [enabled (checked) in the Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server). This dropdown opens when clicking the wrench icon 🔧 at the bottom of the Copilot Window. The Telerik Agentic UI Generator may get disabled when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue with MCP servers in general. + +#### Visual Studio Code + +1. In your browser, go to the [API Keys](https://www.telerik.com/account/downloads/api-keys) page in your Telerik account. If you already have an existing API key, you can skip steps 2-6 and continue from step 7, instead of creating a new key. +2. Click **Generate New Key +**. +3. In the **Key Note** field, add a note that describes the API key. +4. Click **Generate Key**. +5. Select **Copy and Close**. Once you close the window, you can no longer copy the generated key. For security reasons, the **API Keys** page displays only a portion of the key. +6. Store the generated NuGet API key as you will need it in the next steps. +7. To enable the Agentic UI Generator in a specific [workspace](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-workspace), Blazor app, or [globally](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-configuration), add a `.vscode` folder with an `mcp.json` file at the root of the workspace, app, or your user folder, respectively. + +> This section applies to VS Code 1.102.1 and newer versions. + +Make sure that [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) is enabled in the VS Code settings. + +9. In the `mcp.json` file, set your API Key as `x-api-key` value, as demonstrated in the JSON configuration below. + +>caption .vscode/mcp.json + +````JSON.skip-repl +{ + "servers": { + "telerik-ui-generator": { + "type": "http", + "url": "https://uiagent.mcp.telerik.com/mcp/blazor", + "headers": { + "x-api-key": "YOUR API KEY" + } + } + } +} +```` + +To use the Agentic UI Generator in all workspaces and apps, make sure that [`chat.mcp.discovery.enabled`](vscode://settings/chat.mcp.discovery.enabled) is enabled in [`settings.json`](https://code.visualstudio.com/docs/configure/settings#_settings-json-file). + +>caption VS Code settings.json + +````JSON.skip-repl +{ + // ... + "chat.mcp.discovery.enabled": true, +} +```` + +After adding the configuration, restart your IDE to load the Agentic UI Generator. + +## Basic Usage + +The Agentic UI Generator can be used in two primary modes: basic usage through the main tool, or advanced usage by calling specific MCP tools directly. + +### Call the Agentic UI Generator + +To use the Agentic UI Generator, you can call it in two ways: + +#### Method 1: Using the Tool Handle + +Prefix your prompt with `#telerik_ui_generator` followed by your request: + +````TEXT.skip-repl +#telerik_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends +```` + +#### Method 2: Using Natural Language + +Prefixing your prompt with `#telerik_ui_generator` will make it more likely for the Agentic UI Generator to get called. Alternatively, you can use natural language and simply describe what you want. The AI assistant automatically recognizes when to use the Agentic UI Generator: + +````TEXT.skip-repl +Create a product management page with a Telerik grid for displaying products, a form for adding new items, and filtering options +```` + +The generator analyzes your prompt and creates the appropriate Blazor components, markup, and styling. + +## Advanced Usage + +For more granular control, you can call individual tools that make up the Agentic UI Generator: + +| Tool Handle | Description | +|------------|-------------| +| `telerik_ui_generator` | Main generator for building full UI flows. Coordinates all other tools to deliver complete solutions. | +| `telerik_layout_assistant` | Applies suitable CSS utility classes from the Progress Design System for styling and positioning elements. Use this tool when you need help with spacing, typography, colors, layout structure, or transforms. | +| `telerik_component_assistant` | 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_style_assistant` | 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_icon_assistant` | 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. | + +You can call these tools directly when you need specific functionality, allowing for more precise control over the generation process. + +> Tagging specific tools in Visual Studio currently is not available. To increase the probability that a tool will be called, either explicitly mention the tool in your prompt, or specify that in your Copilot instructions. + +## See Also + +* [Agentic UI Generator Overview](slug:agentic-ui-generator-overview) +* [Agentic UI Generator Prompt Library](slug:agentic-ui-generator-prompt-library) +* [Telerik Design System](https://www.telerik.com/design-system/docs/) diff --git a/ai/agentic-ui-generator/index.md b/ai/agentic-ui-generator/index.md deleted file mode 100644 index 23237750d..000000000 --- a/ai/agentic-ui-generator/index.md +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Overview -meta_title: Overview of the Telerik UI for Blazor Agentic UI Generator -description: Learn about the Telerik UI for Blazor Agentic UI Generator, an intelligent prompt-driven development assistant that accelerates the creation of modern web applications. -slug: agentic-ui-generator-overview -position: 0 -tags: telerik,blazor,ai,agentic,ui,generator -published: True ---- - -# Telerik UI for Blazor Agentic UI Generator - -The Agentic UI Generator is an intelligent, prompt-driven AI development assistant designed to accelerate the creation and styling of modern web applications. Built around Telerik and Kendo UI, the Agent enables developers to move from idea to quality UI with speed, precision, and confidence. - -## What Is the Agentic UI Generator - -At its core, the Agentic UI Generator integrates five specialized tools: -* UI Generator -* Layout Assistant -* Component Assistant -* Style Assistant -* Icon Assistant - -The tools are working together in an agentic flow to deliver complete, beautiful, on-brand and enterprise-ready UIs. The main generator coordinates these tools to handle component generation, styling, theming, and design system integration seamlessly. - -### How It Works - -The Blazor Agentic UI Generator uses an intelligent approach where specialized tools work together to handle different aspects of UI development. When you provide a prompt, the main generator analyzes your requirements and coordinates the appropriate tools to deliver the desired outcome. For more control over specific aspects of your UI, you can also call individual tools directly as described in the [Advanced Use](#advanced-use) section. - -### Intended Use - -The Agentic UI Generator is designed to help with various development scenarios: - -#### Create Individual Components - -Build specific Telerik components with specific configurations and features like filtering, validation, and data binding - -````TEXT.skip-repl -#telerik_ui_generator Create a Select component with filtering and the option to add new items -```` - -#### Create Full Responsive Pages - -* Build complete dashboards, landing pages, and listing pages in existing applications -* Generate pages similar to the [Progress Design System page templates](https://www.telerik.com/design-system/docs/ui-templates/templates/automotive-industry/) - -````TEXT.skip-repl -#telerik_ui_generator I have created an empty application that now needs a login screen and an admin dashboard. Create a new PoC -```` - -#### Modify Existing Pages - -* Enhance existing dashboards by adding new sections -* Insert new sections that match existing layout style and responsiveness - -````TEXT.skip-repl -#telerik_ui_generator Insert a new section in the middle of an existing 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 -```` - -#### Create and Modify Themes - -* Generate new themes inside existing applications. Add dark mode or high-contrast themes - -````TEXT.skip-repl -#telerik_ui_generator Generate a complete dark theme for my app based on a prompt so my UI looks on-brand in dark mode as well -```` - -#### Implement Responsive Layout - -* Create new responsive pages and sections -* Convert existing pages to be responsive for mobile and tablet views - -````TEXT.skip-repl -#telerik_ui_generator Update the existing page layout to make it responsive -```` - -For specific examples of these use cases, see the [Sample Prompts](#sample-prompts) section. - -## Installing the Agentic UI Generator - -The Agentic UI Generator is available as an MCP (Model Context Protocol) server that integrates with AI-powered IDEs like Visual Studio Code, Cursor, and other MCP-compatible tools. - -### Prerequisites - -An AI-powered IDE that supports MCP servers, for example, Visual Studio, Visual Studio Code, Cursor. - -### Configuration Steps - -This section contains information about how to set up the Agentic UI Generator in Visual Studio and Visual Studio Code. - -#### Visual Studio - -1. Log in with a valid [Telerik user account](https://www.telerik.com/account/). -2. To enable the Agentic UI Generator in a specific Blazor app, add a `.mcp.json` file to the solution folder and paste the configuration from the [Agentic UI Generator | MCP Configuration page](https://uiagent.mcp.telerik.com/preview). - -To enable global automatic discovery of the Agentic UI Generator in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`. - -#### Visual Studio Code - -1. Log in with a valid [Telerik user account](https://www.telerik.com/account/). -2. Go to the [Agentic UI Generator Preview Configuration](https://uiagent.mcp.telerik.com/preview). -3. Click the **Add to VS Code** button. This will open a tab named **MCP Server: telerik-ui-generator** in your VS Code instance. -4. In the new VS Code tab, click **Install**. - -After adding the configuration, restart your IDE to load the MCP server. - -## Using the Agentic UI Generator - -The Agentic UI Generator can be used in two primary modes: basic usage through the main tool, or advanced usage by calling specific MCP tools directly. - -### Call the Agentic UI Generator - -To use the Agentic UI Generator, you can call it in two ways: - -#### Method 1: Using the Tool Handle - -Prefix your prompt with `#telerik_ui_generator` followed by your request: - -````TEXT.skip-repl -#telerik_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends -```` - -#### Method 2: Using Natural Language - -Prefixing your prompt with `#telerik_ui_generator` will make it more likely for the Agentic UI Generator to get called. Alternatively, you can use natural language and simply describe what you want. The AI assistant automatically recognizes when to use the Agentic UI Generator: - -````TEXT.skip-repl -Create a product management page with a grid for displaying products, a form for adding new items, and filtering options -```` - -The generator analyzes your prompt and creates the appropriate Blazor components, markup, and styling. - -### Target the Tools (Advanced) - -For more granular control, you can call individual tools that make up the Agentic UI Generator: - -| Tool Handle | Description | -|------------|-------------| -| `telerik_ui_generator` | Main generator for building full UI flows. Coordinates all other tools to deliver complete solutions. | -| `telerik_layout_assistant` | Applies suitable CSS utility classes from the Progress Design System for styling and positioning elements. Use this tool when you need help with spacing, typography, colors, layout structure, or transforms. | -| `telerik_component_assistant` | Answers questions and generates code related to Teelrik 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_style_assistant` | 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_icon_assistant` | 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. | - -You can call these tools directly when you need specific functionality, allowing for more precise control over the generation process. - -## Sample Prompts - -Here are some example prompts that demonstrate the generator's capabilities: - -**Dashboard Creation:** -````TEXT.skip-repl -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 charts, the second data grids, and the bottom contains column summaries -```` - -**Interactive Data Page:** -````TEXT.skip-repl -Insert a new section with a Data Grid on the left to filter, sort, and edit product data. On the right, add a Chart and Date Range Picker 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 -```` - -**Theme Customization:** -````TEXT.skip-repl -Add a dark mode theme to the application with rounded corners and larger spacing between components -```` - -**Responsive Page:** -````TEXT.skip-repl -Create a product catalog page with a responsive grid layout, filtering options, and detail view modals that work seamlessly on mobile, tablet, and desktop -```` - -**Landing Page:** -````TEXT.skip-repl -Build a landing page similar to the automotive industry template with a hero section, feature highlights, statistics, and a call-to-action section -```` - -## Recommendations - -To get the best results from the Agentic UI Generator: - -### Provide Clear Context - -* Be specific about your requirements and desired layout structure. -* Mention any existing components or styles you want to match. -* Attach the files you want to modify as context to your prompt so the tool can understand your existing code structure. -* Specify responsiveness requirements for different screen sizes. -* Reference existing design patterns when applicable (e.g., "similar to the automotive industry template"). - -### Best Practices - -* Don't configure too many MCP tools or extensions simultaneously, as this may affect performance. In case of issues when both the Telerik AI Coding Assistant and the Agentic UI Generator are enabled, disable one of the tools. -* Ensure you have a stable internet connection for AI processing. -* Keep your Blazor project structure organized and follow naming conventions. -* Start with simpler prompts and gradually add complexity. -* Customize the generated code to match your specific business logic and branding. -* Use the advanced tool handles when you need precise control over specific aspects. -* Leverage existing [Telerik Design System](https://www.telerik.com/design-system/docs/) patterns for consistency. - -## See Also - -* [Telerik MCP Server Documentation](slug:ai-mcp-server) -* [Telerik Design System](https://www.telerik.com/design-system/docs/) diff --git a/ai/agentic-ui-generator/overview.md b/ai/agentic-ui-generator/overview.md new file mode 100644 index 000000000..91d0942c0 --- /dev/null +++ b/ai/agentic-ui-generator/overview.md @@ -0,0 +1,107 @@ +--- +title: Overview +meta_title: Overview of the Telerik UI for Blazor Agentic UI Generator +description: Learn about the Telerik UI for Blazor Agentic UI Generator, an intelligent prompt-driven development assistant that accelerates the creation of modern web applications. +slug: agentic-ui-generator-overview +position: 0 +tags: telerik,blazor,ai,agentic,ui,generator +published: True +--- + +# Telerik UI for Blazor Agentic UI Generator + +The Agentic UI Generator is an intelligent, prompt-driven AI development assistant designed to accelerate the creation and styling of modern web applications. Built around Telerik and Kendo UI, the Agent enables developers to move from idea to quality UI with speed, precision, and confidence. + +## What Is the Agentic UI Generator + +At its core, the Agentic UI Generator integrates five specialized tools: +* UI Generator +* Layout Assistant +* Component Assistant +* Style Assistant +* Icon Assistant + +The tools are working together in an agentic flow to deliver complete, beautiful, on-brand and enterprise-ready UIs. The main generator coordinates these tools to handle component generation, styling, theming, and design system integration seamlessly. + +## How It Works + +The Blazor Agentic UI Generator uses an intelligent approach where specialized tools work together to handle different aspects of UI development. When you provide a prompt, the main generator analyzes your requirements and coordinates the appropriate tools to deliver the desired outcome. For more control over specific aspects of your UI, you can also call individual tools directly as described in the [Advanced Use](slug:agentic-ui-generator-getting-started#advanced-use) section. + +> We recommend using the Agentic UI Generator in projects that already have Telerik UI for Blazor installed. + +## Intended Use + +The Agentic UI Generator is designed to help with various development scenarios: + +### Create Individual Components + +Build specific Telerik components with specific configurations and features like filtering, validation, and data binding + +````TEXT.skip-repl +#telerik_ui_generator Create a Select component with filtering and the option to add new items +```` + +### Create Full Responsive Pages + +* Build complete dashboards, landing pages, and listing pages in existing applications +* Generate pages similar to the [Progress Design System page templates](https://www.telerik.com/design-system/docs/ui-templates/templates/automotive-industry/) + +````TEXT.skip-repl +#telerik_ui_generator I have created an empty application that now needs a login screen and an admin dashboard. Create a new PoC +```` + +### Modify Existing Pages + +* Enhance existing dashboards by adding new sections +* Insert new sections that match existing layout style and responsiveness + +````TEXT.skip-repl +#telerik_ui_generator Insert a new section in the middle of an existing 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 +```` + +### Create and Modify Themes + +* Generate new themes inside existing applications. Add dark mode or high-contrast themes + +````TEXT.skip-repl +#telerik_ui_generator Generate a complete dark theme for my app based on a prompt so my UI looks on-brand in dark mode as well +```` + +### Implement Responsive Layout + +* Create new responsive pages and sections +* Convert existing pages to be responsive for mobile and tablet views + +````TEXT.skip-repl +#telerik_ui_generator Update the existing page layout to make it responsive +```` + +For specific examples of these use cases, see the [Prompt Library](slug:agentic-ui-generator-prompt-library). + +## Recommendations + +To get the best results from the Agentic UI Generator: + +### Provide Clear Context + +* Be specific about your requirements and desired layout structure. +* Mention any existing components or styles you want to match. +* Attach the files you want to modify as context to your prompt so the tool can understand your existing code structure. +* Specify responsiveness requirements for different screen sizes. +* Reference existing design patterns when applicable (e.g., "similar to the automotive industry template"). + +### Best Practices + +* Don't configure too many MCP tools or extensions simultaneously, as this may affect performance. In case of issues when both the Telerik AI Coding Assistant and the Agentic UI Generator are enabled, disable one of the tools. +* Ensure you have a stable internet connection for AI processing. +* Keep your Blazor project structure organized and follow naming conventions. +* Start with simpler prompts and gradually add complexity. +* Customize the generated code to match your specific business logic and branding. +* Use the advanced tool handles when you need precise control over specific aspects. +* Leverage existing [Telerik Design System](https://www.telerik.com/design-system/docs/) patterns for consistency. + +## See Also + +* [Getting Started with the Agentic UI Generator](slug:agentic-ui-generator-getting-started) +* [Agentic UI Generator Prompt Library](slug:agentic-ui-generator-prompt-library) +* [Telerik Design System](https://www.telerik.com/design-system/docs/) diff --git a/ai/agentic-ui-generator/prompt-library.md b/ai/agentic-ui-generator/prompt-library.md new file mode 100644 index 000000000..9ccc45676 --- /dev/null +++ b/ai/agentic-ui-generator/prompt-library.md @@ -0,0 +1,98 @@ +--- +title: Prompt Library +page_title: Agentic UI Generator Prompt Library +description: Explore example prompts that demonstrate the capabilities of the Telerik UI for Blazor Agentic UI Generator for building modern web applications. +slug: agentic-ui-generator-prompt-library +position: 20 +tags: telerik,blazor,ai,agentic,ui,generator,prompts +published: True +--- + +# 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. + +1. Browse the prompt library to find a prompt that suits your needs. +2. Copy the prompt text (including the `#telerik_ui_generator` handle if present). +3. (optional) Customize the prompt as needed for your specific use case. Make sure the changes comply with the [intended use](slug:agentic-ui-generator-overview#intended-use) and the [recommendations](slug:agentic-ui-generator-overview#recommendations) for the Agentic UI Generator. +4. Run the prompt against your AI-powered IDE. + +>warning Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project. + +## Sample Prompts + +Here are some example prompts that demonstrate the capabilities of the Agentic UI Generator tools. + +### UI Generator Prompts + +The UI generator is the main tool for building full UI flows, which coordinates all other tools to deliver complete solutions. + +
+ +````TEXT.skip-repl +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. +```` + +````TEXT.skip-repl +Build a landing page similar to the automotive industry template with a hero section, feature highlights, statistics, and a call-to-action section. +```` + +
+ +### 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. + +````TEXT.skip-repl +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. + +````TEXT.skip-repl +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. +```` + +### 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. + +
+ +````TEXT.skip-repl +Generate a custom theme for a corporate blue and green color scheme with high contrast accessibility requirements. +```` + +````TEXT.skip-repl +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. + +
+ +````TEXT.skip-repl +Add icons suitable for the Home, Settings, and User Profile buttons in my navigation bar. +```` + +````TEXT.skip-repl +Find appropriate icons for data visualization actions like export, print, refresh, and search in a dashboard toolbar. +```` + +
+ +## See Also + +* [Agentic UI Generator Overview](slug:agentic-ui-generator-overview) +* [Getting Started with the Agentic UI Generator](slug:agentic-ui-generator-getting-started) +* [Telerik Design System](https://www.telerik.com/design-system/docs/) diff --git a/ai/ai-coding-assistant/changelog.md b/ai/ai-coding-assistant/changelog.md new file mode 100644 index 000000000..ca3251313 --- /dev/null +++ b/ai/ai-coding-assistant/changelog.md @@ -0,0 +1,35 @@ +--- +title: Changelog +meta_title: Telerik Blazor AI Coding Assistant Changelog +description: Learn about the latest changes, improvements and bug fixes in the Telerik UI for Blazor AI Coding Assistant. +slug: ai-changelog +tags: AI, changelog, updates +position: 3 +--- + +# Telerik Blazor AI Coding Assistant Changelog + +Learn about the latest changes, improvements and bug fixes in the Telerik UI for Blazor AI Coding Assistant. The updates are structured in a chronological order with the newest ones appearing first. + +## November, 2025 Changelog + +* Updated component snippets with refined code examples. +* Improved API descriptions for better context matching and accuracy. +* Overall improvement of the coding assistant answers through enhanced documentation context. + +> [Microsoft sunset GitHub Copilot extensions](https://github.blog/changelog/2025-09-24-deprecate-github-copilot-extensions-github-apps) on November 10, 2025, in favor of the Model Context Protocol (MCP) standard. + +## August, 2025 Changelog + +* Refactoring of internal tools leading to continuous improvements of the quality of the coding assistant. + +## May, 2025 Changelog + +* Initial launch of the AI Coding Assistant for Blazor. +* Provides intelligent code suggestions, context-aware documentation, and quick access to component APIs. +* Streamlines development workflow with automated code generation and error detection. + +## See Also + +* [Telerik Blazor AI Coding Assistant Overview](slug:ai-overview) +* [MCP Server](slug:ai-mcp-server) diff --git a/ai/copilot-extension.md b/ai/ai-coding-assistant/copilot-extension.md similarity index 99% rename from ai/copilot-extension.md rename to ai/ai-coding-assistant/copilot-extension.md index f54b25e09..bd3f8fd18 100644 --- a/ai/copilot-extension.md +++ b/ai/ai-coding-assistant/copilot-extension.md @@ -6,6 +6,8 @@ slug: ai-copilot-extension tags: telerik,blazor,ai published: True position: 10 +previous_url: /ai/copilot-extension +hidden: True --- # Telerik Blazor GitHub Copilot Extension diff --git a/ai/mcp-server.md b/ai/ai-coding-assistant/mcp-server.md similarity index 97% rename from ai/mcp-server.md rename to ai/ai-coding-assistant/mcp-server.md index ebaaddd7c..2885578f9 100644 --- a/ai/mcp-server.md +++ b/ai/ai-coding-assistant/mcp-server.md @@ -1,14 +1,15 @@ --- -title: MCP Server -page_title: Telerik Blazor MCP Server +title: Getting Started +page_title: Getting Started with the Telerik UI for Blazor AI Coding Assistant description: Learn how to add and use the Telerik Blazor MCP Server as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor MCP server provides proprietary context about Telerik UI for Blazor to AI-powered software. slug: ai-mcp-server tags: telerik,blazor,ai published: True -position: 20 +position: 1 +previous_url: /ai/mcp-server --- -# Telerik Blazor MCP Server +# Getting Started with the Telerik UI for Blazor AI Coding Assistant The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) lets you interact with AI and reach new levels of developer productivity. The MCP server provides proprietary context to AI-powered IDEs, apps and tools. You can use the Telerik Blazor MCP server for Blazor AI code generation and ask about [Telerik UI for Blazor components](https://www.telerik.com/blazor-ui), features, or general usage. You can successfully prompt more complex questions and tasks, and generate tailored code that includes Telerik UI for Blazor components and API. @@ -177,4 +178,4 @@ You can use the Telerik Blazor MCP server with local large language models (LLM) ## See Also -* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension) +* [Telerik Agentic UI Generator](slug:agentic-ui-generator-overview) diff --git a/ai/overview.md b/ai/ai-coding-assistant/overview.md similarity index 77% rename from ai/overview.md rename to ai/ai-coding-assistant/overview.md index 5a4804f43..e767b924e 100644 --- a/ai/overview.md +++ b/ai/ai-coding-assistant/overview.md @@ -5,26 +5,15 @@ description: Learn about the AI-powered developer tools that integrate with your slug: ai-overview tags: telerik,blazor,ai published: True -position: 1 +position: 0 +previous_url: /ai --- # Telerik Blazor AI Coding Assistant Overview The Telerik Blazor AI Coding Assistant improves your developer experience and increases your productivity when implementing Blazor apps that include Telerik UI for Blazor. The coding assistant is an AI code generator that provides proprietary context to AI models in order to produce higher quality code samples with the [Telerik UI for Blazor components](https://www.telerik.com/blazor-ui) and API. -The Telerik AI Coding Assistant is integrated in: - -* The [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension) -* The [Telerik Blazor MCP Server](slug:ai-mcp-server) - -The major differences between these tools are: - -* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like Cursor or GitHub Copilot in **Agent** mode can directly suggest changes to your app and even rebuild it to verify the new AI generated code. -* The responses of the GitHub Copilot extension may contain more explanations how to accomplish the task, and shorter or partial code snippets. When using the MCP server, the AI response is mostly code. - -> [Microsoft is sunsetting GitHub Copilot extensions](https://github.blog/changelog/2025-09-24-deprecate-github-copilot-extensions-github-apps) on November 10, 2025, in favor of the Model Context Protocol (MCP) standard. -> -> From that date, the Telerik and Kendo UI AI Coding Assistants will be available exclusively through our [MCP servers](slug:ai-mcp-server). You can enjoy the same powerful capabilities that are delivered by a modern, open, and officially recommended standard. +The Telerik AI Coding Assistant is integrated in the [Telerik Blazor MCP Server](slug:ai-mcp-server). ## Getting Started @@ -69,7 +58,7 @@ The Telerik Blazor AI Conding Assistant allows the following maximum number of r * Subscription licenses: virtually unlimited number of requests with a fair use threshold of 300 requests per day * Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests. -> All Telerik AI tools share a single request limit for your Telerik account. For example, the [Telerik Copilot extension](slug:ai-copilot-extension) and the [Telerik MCP server](slug:ai-mcp-server) both take up from the same usage quota. +> All Telerik AI tools share a single request limit for your Telerik account. For example, the [Telerik MCP server](slug:ai-mcp-server) and the [Agentic UI Generator](slug:agentic-ui-generator-overview) both take up from the same usage quota. > When using the Telerik MCP server, one prompt may trigger several requests, depending on the prompt complexity. ## Privacy @@ -86,5 +75,4 @@ Make sure to also get familiar with the terms and privacy policy of your selecte ## Next Steps -* Install the [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension). -* Add the [Telerik Blazor MCP Server](slug:ai-mcp-server) to an MCP-enabled client. +* Getting Started with the [Telerik Blazor MCP Server](slug:ai-mcp-server). diff --git a/ai/prompt-library.md b/ai/ai-coding-assistant/prompt-library.md similarity index 98% rename from ai/prompt-library.md rename to ai/ai-coding-assistant/prompt-library.md index c4f49dc6b..3e96771d0 100644 --- a/ai/prompt-library.md +++ b/ai/ai-coding-assistant/prompt-library.md @@ -5,7 +5,8 @@ description: Get familiar with some example prompts that show how to use the Tel slug: ai-prompt-library tags: telerik,blazor,ai published: True -position: 30 +position: 2 +previous_url: /ai/prompt-library --- # Telerik Blazor Prompt Library @@ -208,4 +209,3 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s ## See Also * [Telerik Blazor MCP Server](slug:ai-mcp-server) -* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension) diff --git a/docs-builder.yml b/docs-builder.yml index 191bc3245..3e0f0dbce 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -641,8 +641,11 @@ meta: relativeUrl: /knowledge-base hideChildren: true ai/agentic-ui-generator: - hidden: true + title: Agentic UI Generator position: 0 + ai/ai-coding-assistant: + title: AI Coding Assistant + position: 1 redirects: diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index 79619205b..ab442ecf7 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -115,7 +115,7 @@ If you prefer video instructions, you can also check the video tutorial below. ## Next Steps -* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API. +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/getting-started/vs-code-integration/introduction.md b/getting-started/vs-code-integration/introduction.md index 3561ac068..8fe91ee70 100644 --- a/getting-started/vs-code-integration/introduction.md +++ b/getting-started/vs-code-integration/introduction.md @@ -33,4 +33,3 @@ To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `C ## See Also * [AI Configuration in VS Code](slug:getting-started-vs-code-integration-ai-configuration) -* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension) diff --git a/getting-started/vs-integration/introduction.md b/getting-started/vs-integration/introduction.md index 79193e8d1..51d23c9ab 100644 --- a/getting-started/vs-integration/introduction.md +++ b/getting-started/vs-integration/introduction.md @@ -38,4 +38,3 @@ To access the Telerik Visual Studio extension, go to the **Extensions** > **Tele * [Converting Existing Projects with Visual Studio](slug:getting-started-vs-integration-convert-project) * [Downloading the Latest Telerik UI for Blazor Versions](slug:getting-started-vs-integration-latest-version) * [AI Configuration in Visual Studio](slug:getting-started-vs-integration-ai-configuration) -* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension)