From 404d84fea22ed3c33ede2547f82407102cdb7945 Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Tue, 4 Nov 2025 16:24:23 +0200 Subject: [PATCH 1/5] docs: update ai tools structure --- ai/agentic-ui-generator/getting-started.md | 87 ++++++++ ai/agentic-ui-generator/overview.md | 105 ++++++++++ ai/agentic-ui-generator/prompt-library.md | 64 ++++++ ai/ai-coding-assistant/copilot-extension.md | 76 +++++++ ai/ai-coding-assistant/mcp-server.md | 181 +++++++++++++++++ ai/ai-coding-assistant/overview.md | 91 +++++++++ ai/ai-coding-assistant/prompt-library.md | 212 ++++++++++++++++++++ 7 files changed, 816 insertions(+) create mode 100644 ai/agentic-ui-generator/getting-started.md create mode 100644 ai/agentic-ui-generator/overview.md create mode 100644 ai/agentic-ui-generator/prompt-library.md create mode 100644 ai/ai-coding-assistant/copilot-extension.md create mode 100644 ai/ai-coding-assistant/mcp-server.md create mode 100644 ai/ai-coding-assistant/overview.md create mode 100644 ai/ai-coding-assistant/prompt-library.md diff --git a/ai/agentic-ui-generator/getting-started.md b/ai/agentic-ui-generator/getting-started.md new file mode 100644 index 000000000..0432a5cd5 --- /dev/null +++ b/ai/agentic-ui-generator/getting-started.md @@ -0,0 +1,87 @@ +--- +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. 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. + +## 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 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 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. + +## 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/overview.md b/ai/agentic-ui-generator/overview.md new file mode 100644 index 000000000..d598a069b --- /dev/null +++ b/ai/agentic-ui-generator/overview.md @@ -0,0 +1,105 @@ +--- +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. + +## 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..ff31d27f4 --- /dev/null +++ b/ai/agentic-ui-generator/prompt-library.md @@ -0,0 +1,64 @@ +--- +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 Agentic UI Generator. + +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 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 +```` + +## 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/copilot-extension.md b/ai/ai-coding-assistant/copilot-extension.md new file mode 100644 index 000000000..7bc4d0d01 --- /dev/null +++ b/ai/ai-coding-assistant/copilot-extension.md @@ -0,0 +1,76 @@ +--- +title: Copilot Extension +page_title: Telerik Blazor GitHub Copilot Extension +description: Learn how to add and use the Telerik Blazor GitHub Copilot extension as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor GitHub Copilot extension provides proprietary context about Telerik UI for Blazor to AI-powered software. +slug: ai-copilot-extension +tags: telerik,blazor,ai +published: True +position: 10 +previous_url: /ai/copilot-extension +--- + +# Telerik Blazor GitHub Copilot Extension + +The Telerik Blazor [GitHub Copilot](https://github.com/features/copilot) extension provides proprietary context for the [Telerik UI for Blazor components](https://www.telerik.com/blazor-ui). The extension works as a Blazor AI code generator and can help you reach new levels of developer productivity. You can get useful tips and generate tailored code snippets that include Telerik UI for Blazor components and API. + +> [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. + +## Prerequisites + +To use the Telerik GitHub Copilot extension for Blazor, you need to have: + +* An active [GitHub Copilot](https://github.com/features/copilot) subscription. You can enable or configure GitHub Copilot on the [Copilot Settings page in your GitHub account](https://github.com/settings/copilot). +* [Enabled Copilot extensions](https://github.com/settings/copilot/features) in your GitHub account. +* A [Telerik user account](https://www.telerik.com/account/). +* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui). +* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). +* Using the latest version of your [Copilot-enabled app](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) is recommended (for example, Visual Studio or VS Code). + +Check [AI Coding Assistant Overview](slug:ai-overview) for more recommendations and usage information. + +## Installation + +To install the Telerik Blazor Copilot extension: + +1. Make sure you are logged in [GitHub](https://github.com). +1. Go to the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page and click the **Install** button. If you have already installed the extension, you will see a **Configure** button instead. +1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. Normally, select your GitHub account. +1. Click the **Install & Authorize** button. This will authorize the GitHub Copilot extension to integrate with your GitHub account. +1. Enter your GitHub password. +1. You will be redirected to telerik.com. Enter your Telerik account credentials if prompted. This will authorize the GitHub Copilot extension to integrate with your Telerik account. +1. Upon successful Telerik authentication, you will be redirected once again to a page that confirms successful Copilot extension installation. +1. Restart your [Copilot-enabled apps](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio and VS Code). +1. Start a new chat session in Copilot. + +You can also start the installation from the Telerik UI for Blazor extensions for [Visual Studio](slug:getting-started-vs-integration-ai-configuration#install-telerik-blazor-copilot-extension) and [VS Code](slug:getting-started-vs-code-integration-ai-configuration). Then, continue the installation from step 2. + +## Usage + +To use the Telerik Blazor Copilot extension: + +1. Open the GitHub Copilot chat window in your [Copilot-enabled app](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio or VS Code). +1. Make sure you are in **Ask** mode and not in **Edit** or **Agent** mode. The Edit and Agent modes do not use the Telerik Copilot extension. However, the Agent mode can use the [Telerik Blazor MCP server](slug:ai-mcp-server). +1. Start your prompt with `@telerikblazor` and type your request. Make sure that `@telerikblazor` is recognized and highlighted, otherwise the extension may not be installed. +1. Verify that you see a label similar to **TelerikBlazor working...** or **TelerikBlazor generating response...** in the output. +1. Grant permission to the Telerik Blazor extension to read your workspace files. + +Also check the general [AI Coding Assistant Recommendations](slug:ai-overview#recommendations) for more usage tips. + +### Sample Prompts + +The following list describes how your prompts may look like: + +* "`@telerikblazor` Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data." +* "`@telerikblazor` Generate a Telerik ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data." +* "`@telerikblazor` Show me sample code for a Telerik Blazor Grid with virtual scrolling for the rows and columns." + +## Usage Limits + +@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) + +## See Also + +* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials) +* [Telerik Blazor MCP Server](slug:ai-mcp-server) diff --git a/ai/ai-coding-assistant/mcp-server.md b/ai/ai-coding-assistant/mcp-server.md new file mode 100644 index 000000000..e58c10fcd --- /dev/null +++ b/ai/ai-coding-assistant/mcp-server.md @@ -0,0 +1,181 @@ +--- +title: MCP Server +page_title: Telerik Blazor MCP Server +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 +previous_url: /ai/mcp-server +--- + +# Telerik Blazor MCP Server + +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. + +## Prerequisites + +To use the Telerik Blazor MCP server, you need: + +* [Node.js](https://nodejs.org/en) 18 or a newer version. +* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*. Using the latest version of the MCP client is highly recommended. +* A [Telerik user account](https://www.telerik.com/account/). +* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui). +* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). + +Check [AI Coding Assistant Overview](slug:ai-overview) for more recommendations and usage information. + +## Installation + +There are two ways to install the Telerik Blazor MCP server: + +* Use a manual approach, which is described below. +* Use an automated process provided by the Telerik extensions for [Visual Studio](slug:getting-started-vs-integration-ai-configuration) and [VS Code](slug:getting-started-vs-code-integration-ai-configuration). + +To install the Telerik MCP server manually, use the documentation of your AI-powered MCP client. You can enable the MCP server for specific workspaces or globally. The sections below provide installation tips and examples for some popular MCP clients like [Visual Studio](#visual-studio), [VS Code](#vs-code), and [Cursor](#cursor). The generic settings of the Telerik Blazor MCP server are: + +* npm package name: `@progress/telerik-blazor-mcp` +* Type: `stdio` (standard input/output transport) +* Command: `npx` +* Arguments: `-y` +* Server name: `telerik_blazor_assistant`. This name depends on your preferences. The suggestion here matches the MCP tool name in the npm package. See the notes below. +* Your [Telerik license key](#license-key) as an `env` parameter + +> * Some MCP clients expect the MCP servers to be listed under a `servers` JSON key, while others expect `mcpServers`. +> * Some MCP clients expect an `mcp.json` file, while others like Visual Studio 2022 expect an `.mcp.json` file. +> * Some MCP clients, including older Visual Studio versions, may not accept a server name that uses hyphens (`-`) or underscores (`_`). In such cases, update the MCP client version or use a different server name. + +### License Key + +To use the Telerik MCP Server, your configuration must provide your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the MCP `.json` file. There are two options: + +* Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location. This approach is recommended, unless you are sharing your VS Code settings across different computers with different operating systems or user names. +* Use a `TELERIK_LICENSE` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary. + +### Visual Studio + +For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers). You can also install the Telerik Blazor MCP server through the [Telerik UI for Blazor Visual Studio extension](slug:getting-started-vs-integration-ai-configuration). + +> Early Visual Studio 17.14 versions require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used. + +To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder. + +>caption .mcp.json + +````JSON.skip-repl +{ + "servers": { + "telerik_blazor_assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp@latest"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } +} +```` + +To enable global automatic discovery of the Telerik MCP Server in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`. + +> Once the Telerik MCP server is added, make sure that the `telerik_blazor_assistant` 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 on a wrench icon 🔧 at the bottom of the Copilot Window. The Telerik MCP server may get disabled when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue with MCP servers in general. + +### VS Code + +For detailed instructions, refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers). You can also install the Telerik Blazor MCP server through the [Telerik UI for Blazor VS Code extension](slug:getting-started-vs-code-integration-ai-configuration). + +> 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. + +To enable the Telerik MCP Server 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. + +>caption .vscode/mcp.json + +````JSON.skip-repl +{ + "servers": { + "telerik_blazor_assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp@latest"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } +} +```` + +To use the Telerik MCP server 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, +} +```` + +### Cursor + +For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/mcp). + +To [enable the Telerik MCP Server in a specific workspace, Blazor app, or globally](https://docs.cursor.com/context/mcp#using-mcp-json), add a `.cursor` folder with an `mcp.json` file at the root of the workspace, app, or your user folder, respectively. + +>caption .cursor/mcp.json + +````JSON.skip-repl +{ + "mcpServers": { + "telerik_blazor_assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp@latest"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } +} +```` + +## Usage + +By default, MCP clients do not call MCP tools in a deterministic way. Some MCP clients like [VS Code](#vs-code) allow you to explicitly reference the desired MCP tool in your prompt. + +To use the Telerik MCP Server: + +1. Start your prompt with `Telerik` to make it more likely for the Telerik MCP server to get called. If you are using VS Code, then start your prompt with: + * `#` and the MCP server name that you used in `mcp.json` (for example, `#telerik_blazor_assistant`) + * `#` and the name of the Telerik Blazor MCP tool (`#telerik_blazor_assistant`) +1. Confirm that the Telerik MCP server is used. Look for a statement in the output, which is similar to: + * `Running telerik_blazor_assistant` (in VS Code) + * `Calling MCP tool telerik_blazor_assistant` (in Cursor) +1. Grant the Telerik tool permission to run for the current session, workspace, or always. + +Also check the general [AI Coding Assistant Recommendations](slug:ai-overview#recommendations) for more usage tips. + +To call the Telerik MCP server without the need to type `Telerik` or `#telerik_blazor_assistant` explicitly, add custom instructions to your AI-powered tool. Here are examples for [GitHub Copilot](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat) and [Cursor](https://docs.cursor.com/context/rules). + +### Sample Prompts + +The following list describes how your prompts may look like. Check the [Prompt Library](slug:ai-prompt-library) for more examples. + +* "Telerik Generate a Blazor Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data." +* "Telerik Generate a ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data." +* "Telerik Show me sample code for a Blazor Grid with virtual scrolling for the rows and columns." + +## Usage Limits + +@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) + +## Connect to Local AI Model + +You can use the Telerik Blazor MCP server with local large language models (LLM). For example, run your local model through [Ollama](https://ollama.com) and use a third-party package such as [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge) to connect the model to the Telerik MCP server. This will allow you to use the Telerik AI Coding Assistant without a cloud-based AI model. + +## See Also + +* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension) diff --git a/ai/ai-coding-assistant/overview.md b/ai/ai-coding-assistant/overview.md new file mode 100644 index 000000000..a7ce17d40 --- /dev/null +++ b/ai/ai-coding-assistant/overview.md @@ -0,0 +1,91 @@ +--- +title: Overview +page_title: Telerik Blazor AI Tooling Overview +description: Learn about the AI-powered developer tools that integrate with your IDE or code editor for greater productivity and enhanced developer experience. +slug: ai-overview +tags: telerik,blazor,ai +published: True +position: 1 +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. + +## Getting Started + +To use the Telerik Blazor AI Coding Assistant, you need: + +* A [Telerik user account](https://www.telerik.com/account/). +* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui). +* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). +* @[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) + +## Intended Use + +You can use the Telerik AI Coding Assistant for: + +* Initial code generation: Quickly add components to your app to speed up the initial development. +* Component configuration: Enable or disable specific component features, or fine tune the configuration through prompting. More complex configurations are possible but may require additional manual work to be production-ready. +* Dummy data generation and data binding: Quickly add data to your app for testing and prototyping purposes. Avoid exposing or providing access to your proprietary or production data to AI-enabled tools. +* Step-by-step explanations: Understand the solutions provided by the AI Coding Assistant through the detailed explanations (depends on the tool, mode, and model). To further develop your knowledge, check the respective documentation. +* Preliminary troubleshooting: Resolve obvious and easy-to-solve issues affecting your code. For more complex issues, search the product documentation or look for assistance from the community. + +>warning Always double-check the suggested code and solutions of any AI-powered tool before applying them to your app. + +> The Telerik AI Coding Assistant is not intended for styling and theme customization. If you are looking for AI-powered styling and theming, check out [Telerik ThemeBuilder](https://www.telerik.com/themebuilder). + +## Recommendations + +Consider the following recommendations when working with the Telerik AI Coding Assistant: + +* When switching between tasks and files, start a new session in a new chat window to avoid polluting the context with irrelevant or outdated information. +* At the time of publishing, Claude Sonnet 4 and GPT-5 produce better results. +* Sometimes, the AI Coding Assistant might generate custom styles. To avoid any custom styling, include a similar statement in your prompts: `Don't add custom CSS styles`. + +## Telerik Document Processing AI Coding Assistant + +You can also use the AI Coding Assistant for [Telerik Document Processing](https://www.telerik.com/document-processing-libraries) to generate high-quality code samples and speed up your development. Read the full guide in the dedicated [DPL AI Coding Assistant](https://docs.telerik.com/devtools/document-processing/ai-coding-assistant/overview) article. + +## Usage Limits + +The Telerik Blazor AI Conding Assistant allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): + +* Perpetual licenses: include 50 requests per year to let you explore and try out the AI Coding Assistant. If you'd like ongoing, higher-volume access, switch to a Subscription license. +* 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. +> When using the Telerik MCP server, one prompt may trigger several requests, depending on the prompt complexity. + +## Privacy + +The Telerik Blazor AI Coding Assistant operates under the following conditions: + +* The Assistant does not have access to your workspace and application code. Note that when using the Telerik MCP server (or any other MCP server), the LLM generates parameters for the MCP server request, which may include parts of your application code. +* The Assistant does not use your prompts to train Telerik AI models. +* The Assistant does not generate the actual responses and has no access to these responses. The Assistant only provides a better context that helps your selected model (for example, GPT, Gemini, Claude) provide better responses. +* The Assistant does not associate your prompts to your Telerik user account. Your prompts and generated context are anonymized and stored for statistical and troubleshooting purposes. +* The Assistant stores metrics about how often and how much you use it in order to ensure compliance with the [allowed number of requests that correspond to your current license](#usage-limits). + +Make sure to also get familiar with the terms and privacy policy of your selected AI model and AI client. + +## 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. diff --git a/ai/ai-coding-assistant/prompt-library.md b/ai/ai-coding-assistant/prompt-library.md new file mode 100644 index 000000000..16a2989bd --- /dev/null +++ b/ai/ai-coding-assistant/prompt-library.md @@ -0,0 +1,212 @@ +--- +title: Prompt Library +page_title: Telerik Blazor Prompt Library +description: Get familiar with some example prompts that show how to use the Telerik AI Coding Assistant for better developer productivity. +slug: ai-prompt-library +tags: telerik,blazor,ai +published: True +position: 30 +previous_url: /ai/prompt-library +--- + +# Telerik Blazor Prompt Library + +This article provides a list of sample prompts for use with the [Telerik Blazor MCP Server](slug:ai-mcp-server). They can help you get a better idea what the Telerik AI Coding Assistant can do and how to compose your prompts. This collection is not exhaustive and you can prompt the Telerik AI Coding Assistant about other scenarios and components as well. + +## How to Use the Prompts + +All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-server). The [`#telerik_blazor_assistant` handle](slug:ai-mcp-server#usage) assumes that this is the server name you have [entered in the `mcp.json` file during installation](slug:ai-mcp-server#installation). + +1. Browse the prompt library to find a prompt that suits your needs. +2. Copy the prompt text including the `#telerik_blazor_assistant` handle. +3. (optional) Customize the prompt as needed for your specific use case. Make sure the changes comply with the [intended use](slug:ai-overview#intended-use) and the [recommendations](slug:ai-overview#recommendations) for the AI Coding Assistant. +4. Run the prompt against the MCP server. + +>warning Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project. + +## Grid + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Create a basic Grid component that displays employee data with columns for ID, Name, Position, and Salary. Include sorting and pagination functionality. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Implement a Grid with enabled filtering and show how to set up different filter types for text, numeric, and date columns. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Set up a Grid that loads data from a REST API endpoint. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Set up a Grid with virtual scrolling to handle large datasets efficiently +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a Grid having Edit button on each row, and conditional formatting based on cell values. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Implement Grid with enabled grouping and expand/collapse functionality for the groups. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Set up a Grid with еnabled multiple selection. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Set up a Grid with еnabled checkbox selection. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create an editable Grid that includes validation for different data types. +```` + +
+ +## Scheduler + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Create a Scheduler component with month, week, and day views. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a Scheduler with sample event data and enabled basic event creation, editing, and deletion functionality. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a resource-based Scheduler with sample data grouped by Name of the event owner. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a Scheduler that allows users to toggle between different views and displays appointments. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a Scheduler that allows to create weekly repeating events. +```` + +
+ +## Chart + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Build a column chart that shows quarterly sales by region. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Build a column chart that shows quarterly sales by region with drill-down functionality to show monthly data when clicking on a quarter. +```` + +
+ +## Form + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant How to create a form with three TextBox fields. +```` + +````TEXT.skip-repl + #telerik_blazor_assistant Generate a Form with required field validation for email and password inputs. +```` + +
+ +## Upload + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Create a simple Upload component allowing chunk file upload. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create an Upload component allowing single file upload to a predefined saving location. +```` + +
+ +## DropDownList + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Create two cascading DropDownLists where the second list depends on the first selection. Use Categories and Products data with a simple relationship. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a DropDownList with countries data and enabled filtering. +```` + +
+ +## DatePicker + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Create a DatePicker that disables weekends. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create two DatePickers for "From" and "To" date selection where the "To" picker's min date updates based on "From" selection. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Render a DatePicker with a default selected date. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Configure the DatePicker to show week numbers in its calendar popup. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Change the display format in the DatePicker so dates show as 'MM/dd/yyyy'. +```` + +
+ +## Calendar + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Create a Calendar component in which all past days are disabled. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a Calendar component in which all weekends are disabled. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a Calendar that shows the past 5 years. +```` + +
+ +## MultiSelect + +
+ +````TEXT.skip-repl +#telerik_blazor_assistant Create a MultiSelect with an array of product objects and show the selected product names below the component. +```` + +````TEXT.skip-repl +#telerik_blazor_assistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count. +```` + +
+ +## See Also + +* [Telerik Blazor MCP Server](slug:ai-mcp-server) +* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension) From d7bed66c3a5be82cb1264f1186e9a76e64a2f98a Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Thu, 6 Nov 2025 11:12:44 +0200 Subject: [PATCH 2/5] docs: add generator prompts --- ai/agentic-ui-generator/index.md | 201 --------------------- ai/agentic-ui-generator/prompt-library.md | 36 ++-- ai/copilot-extension.md | 75 -------- ai/mcp-server.md | 180 ------------------ ai/overview.md | 90 --------- ai/prompt-library.md | 211 ---------------------- docs-builder.yml | 3 - 7 files changed, 24 insertions(+), 772 deletions(-) delete mode 100644 ai/agentic-ui-generator/index.md delete mode 100644 ai/copilot-extension.md delete mode 100644 ai/mcp-server.md delete mode 100644 ai/overview.md delete mode 100644 ai/prompt-library.md 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/prompt-library.md b/ai/agentic-ui-generator/prompt-library.md index ff31d27f4..5fd964686 100644 --- a/ai/agentic-ui-generator/prompt-library.md +++ b/ai/agentic-ui-generator/prompt-library.md @@ -14,7 +14,7 @@ This article provides example prompts that demonstrate the capabilities of the T ## 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 Agentic UI Generator. +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). @@ -25,36 +25,48 @@ All prompts in this library target the Agentic UI Generator. The `#telerik_ui_ge ## Sample Prompts -Here are some example prompts that demonstrate the generator's capabilities: +Here are some example prompts that demonstrate the capabilities of the Agentic UI Generator tools. -### Dashboard Creation +### UI Generator Prompts ````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 +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. ```` -### Interactive Data 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. +```` + +### Layout Assistant Prompts ````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 +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. ```` -### Theme Customization +### Component Assistant Prompts ````TEXT.skip-repl -Add a dark mode theme to the application with rounded corners and larger spacing between components +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. ```` -### Responsive Page +### Style Assistant Prompts ````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 +Generate a custom theme for a corporate blue and green color scheme with high contrast accessibility requirements. ```` -### Landing Page +````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 + +````TEXT.skip-repl +Add icons suitable for the Home, Settings, and User Profile buttons in my navigation bar. +```` ````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 +Find appropriate icons for data visualization actions like export, print, refresh, and search in a dashboard toolbar. ```` ## See Also diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md deleted file mode 100644 index 134187c45..000000000 --- a/ai/copilot-extension.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Copilot Extension -page_title: Telerik Blazor GitHub Copilot Extension -description: Learn how to add and use the Telerik Blazor GitHub Copilot extension as a Blazor AI coding assistant and code generator for better developer productivity. The Telerik Blazor GitHub Copilot extension provides proprietary context about Telerik UI for Blazor to AI-powered software. -slug: ai-copilot-extension -tags: telerik,blazor,ai -published: True -position: 10 ---- - -# Telerik Blazor GitHub Copilot Extension - -The Telerik Blazor [GitHub Copilot](https://github.com/features/copilot) extension provides proprietary context for the [Telerik UI for Blazor components](https://www.telerik.com/blazor-ui). The extension works as a Blazor AI code generator and can help you reach new levels of developer productivity. You can get useful tips and generate tailored code snippets that include Telerik UI for Blazor components and API. - -> [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. - -## Prerequisites - -To use the Telerik GitHub Copilot extension for Blazor, you need to have: - -* An active [GitHub Copilot](https://github.com/features/copilot) subscription. You can enable or configure GitHub Copilot on the [Copilot Settings page in your GitHub account](https://github.com/settings/copilot). -* [Enabled Copilot extensions](https://github.com/settings/copilot/features) in your GitHub account. -* A [Telerik user account](https://www.telerik.com/account/). -* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui). -* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). -* Using the latest version of your [Copilot-enabled app](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) is recommended (for example, Visual Studio or VS Code). - -Check [AI Coding Assistant Overview](slug:ai-overview) for more recommendations and usage information. - -## Installation - -To install the Telerik Blazor Copilot extension: - -1. Make sure you are logged in [GitHub](https://github.com). -1. Go to the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page and click the **Install** button. If you have already installed the extension, you will see a **Configure** button instead. -1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. Normally, select your GitHub account. -1. Click the **Install & Authorize** button. This will authorize the GitHub Copilot extension to integrate with your GitHub account. -1. Enter your GitHub password. -1. You will be redirected to telerik.com. Enter your Telerik account credentials if prompted. This will authorize the GitHub Copilot extension to integrate with your Telerik account. -1. Upon successful Telerik authentication, you will be redirected once again to a page that confirms successful Copilot extension installation. -1. Restart your [Copilot-enabled apps](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio and VS Code). -1. Start a new chat session in Copilot. - -You can also start the installation from the Telerik UI for Blazor extensions for [Visual Studio](slug:getting-started-vs-integration-ai-configuration#install-telerik-blazor-copilot-extension) and [VS Code](slug:getting-started-vs-code-integration-ai-configuration). Then, continue the installation from step 2. - -## Usage - -To use the Telerik Blazor Copilot extension: - -1. Open the GitHub Copilot chat window in your [Copilot-enabled app](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio or VS Code). -1. Make sure you are in **Ask** mode and not in **Edit** or **Agent** mode. The Edit and Agent modes do not use the Telerik Copilot extension. However, the Agent mode can use the [Telerik Blazor MCP server](slug:ai-mcp-server). -1. Start your prompt with `@telerikblazor` and type your request. Make sure that `@telerikblazor` is recognized and highlighted, otherwise the extension may not be installed. -1. Verify that you see a label similar to **TelerikBlazor working...** or **TelerikBlazor generating response...** in the output. -1. Grant permission to the Telerik Blazor extension to read your workspace files. - -Also check the general [AI Coding Assistant Recommendations](slug:ai-overview#recommendations) for more usage tips. - -### Sample Prompts - -The following list describes how your prompts may look like: - -* "`@telerikblazor` Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data." -* "`@telerikblazor` Generate a Telerik ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data." -* "`@telerikblazor` Show me sample code for a Telerik Blazor Grid with virtual scrolling for the rows and columns." - -## Usage Limits - -@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) - -## See Also - -* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials) -* [Telerik Blazor MCP Server](slug:ai-mcp-server) diff --git a/ai/mcp-server.md b/ai/mcp-server.md deleted file mode 100644 index ebaaddd7c..000000000 --- a/ai/mcp-server.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: MCP Server -page_title: Telerik Blazor MCP Server -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 ---- - -# Telerik Blazor MCP Server - -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. - -## Prerequisites - -To use the Telerik Blazor MCP server, you need: - -* [Node.js](https://nodejs.org/en) 18 or a newer version. -* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*. Using the latest version of the MCP client is highly recommended. -* A [Telerik user account](https://www.telerik.com/account/). -* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui). -* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). - -Check [AI Coding Assistant Overview](slug:ai-overview) for more recommendations and usage information. - -## Installation - -There are two ways to install the Telerik Blazor MCP server: - -* Use a manual approach, which is described below. -* Use an automated process provided by the Telerik extensions for [Visual Studio](slug:getting-started-vs-integration-ai-configuration) and [VS Code](slug:getting-started-vs-code-integration-ai-configuration). - -To install the Telerik MCP server manually, use the documentation of your AI-powered MCP client. You can enable the MCP server for specific workspaces or globally. The sections below provide installation tips and examples for some popular MCP clients like [Visual Studio](#visual-studio), [VS Code](#vs-code), and [Cursor](#cursor). The generic settings of the Telerik Blazor MCP server are: - -* npm package name: `@progress/telerik-blazor-mcp` -* Type: `stdio` (standard input/output transport) -* Command: `npx` -* Arguments: `-y` -* Server name: `telerik_blazor_assistant`. This name depends on your preferences. The suggestion here matches the MCP tool name in the npm package. See the notes below. -* Your [Telerik license key](#license-key) as an `env` parameter - -> * Some MCP clients expect the MCP servers to be listed under a `servers` JSON key, while others expect `mcpServers`. -> * Some MCP clients expect an `mcp.json` file, while others like Visual Studio 2022 expect an `.mcp.json` file. -> * Some MCP clients, including older Visual Studio versions, may not accept a server name that uses hyphens (`-`) or underscores (`_`). In such cases, update the MCP client version or use a different server name. - -### License Key - -To use the Telerik MCP Server, your configuration must provide your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the MCP `.json` file. There are two options: - -* Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location. This approach is recommended, unless you are sharing your VS Code settings across different computers with different operating systems or user names. -* Use a `TELERIK_LICENSE` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary. - -### Visual Studio - -For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers). You can also install the Telerik Blazor MCP server through the [Telerik UI for Blazor Visual Studio extension](slug:getting-started-vs-integration-ai-configuration). - -> Early Visual Studio 17.14 versions require the Copilot Chat window to be open and active when you open a solution. Otherwise the Telerik MCP server is not used. - -To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder. - ->caption .mcp.json - -````JSON.skip-repl -{ - "servers": { - "telerik_blazor_assistant": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@progress/telerik-blazor-mcp@latest"], - "env": { - "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" - } - } - } -} -```` - -To enable global automatic discovery of the Telerik MCP Server in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`. - -> Once the Telerik MCP server is added, make sure that the `telerik_blazor_assistant` 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 on a wrench icon 🔧 at the bottom of the Copilot Window. The Telerik MCP server may get disabled when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue with MCP servers in general. - -### VS Code - -For detailed instructions, refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers). You can also install the Telerik Blazor MCP server through the [Telerik UI for Blazor VS Code extension](slug:getting-started-vs-code-integration-ai-configuration). - -> 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. - -To enable the Telerik MCP Server 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. - ->caption .vscode/mcp.json - -````JSON.skip-repl -{ - "servers": { - "telerik_blazor_assistant": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@progress/telerik-blazor-mcp@latest"], - "env": { - "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" - } - } - } -} -```` - -To use the Telerik MCP server 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, -} -```` - -### Cursor - -For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/mcp). - -To [enable the Telerik MCP Server in a specific workspace, Blazor app, or globally](https://docs.cursor.com/context/mcp#using-mcp-json), add a `.cursor` folder with an `mcp.json` file at the root of the workspace, app, or your user folder, respectively. - ->caption .cursor/mcp.json - -````JSON.skip-repl -{ - "mcpServers": { - "telerik_blazor_assistant": { - "type": "stdio", - "command": "npx", - "args": ["-y", "@progress/telerik-blazor-mcp@latest"], - "env": { - "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" - } - } - } -} -```` - -## Usage - -By default, MCP clients do not call MCP tools in a deterministic way. Some MCP clients like [VS Code](#vs-code) allow you to explicitly reference the desired MCP tool in your prompt. - -To use the Telerik MCP Server: - -1. Start your prompt with `Telerik` to make it more likely for the Telerik MCP server to get called. If you are using VS Code, then start your prompt with: - * `#` and the MCP server name that you used in `mcp.json` (for example, `#telerik_blazor_assistant`) - * `#` and the name of the Telerik Blazor MCP tool (`#telerik_blazor_assistant`) -1. Confirm that the Telerik MCP server is used. Look for a statement in the output, which is similar to: - * `Running telerik_blazor_assistant` (in VS Code) - * `Calling MCP tool telerik_blazor_assistant` (in Cursor) -1. Grant the Telerik tool permission to run for the current session, workspace, or always. - -Also check the general [AI Coding Assistant Recommendations](slug:ai-overview#recommendations) for more usage tips. - -To call the Telerik MCP server without the need to type `Telerik` or `#telerik_blazor_assistant` explicitly, add custom instructions to your AI-powered tool. Here are examples for [GitHub Copilot](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat) and [Cursor](https://docs.cursor.com/context/rules). - -### Sample Prompts - -The following list describes how your prompts may look like. Check the [Prompt Library](slug:ai-prompt-library) for more examples. - -* "Telerik Generate a Blazor Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data." -* "Telerik Generate a ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data." -* "Telerik Show me sample code for a Blazor Grid with virtual scrolling for the rows and columns." - -## Usage Limits - -@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) - -## Connect to Local AI Model - -You can use the Telerik Blazor MCP server with local large language models (LLM). For example, run your local model through [Ollama](https://ollama.com) and use a third-party package such as [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge) to connect the model to the Telerik MCP server. This will allow you to use the Telerik AI Coding Assistant without a cloud-based AI model. - -## See Also - -* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension) diff --git a/ai/overview.md b/ai/overview.md deleted file mode 100644 index 5a4804f43..000000000 --- a/ai/overview.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Overview -page_title: Telerik Blazor AI Tooling Overview -description: Learn about the AI-powered developer tools that integrate with your IDE or code editor for greater productivity and enhanced developer experience. -slug: ai-overview -tags: telerik,blazor,ai -published: True -position: 1 ---- - -# 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. - -## Getting Started - -To use the Telerik Blazor AI Coding Assistant, you need: - -* A [Telerik user account](https://www.telerik.com/account/). -* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui). -* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). -* @[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests) - -## Intended Use - -You can use the Telerik AI Coding Assistant for: - -* Initial code generation: Quickly add components to your app to speed up the initial development. -* Component configuration: Enable or disable specific component features, or fine tune the configuration through prompting. More complex configurations are possible but may require additional manual work to be production-ready. -* Dummy data generation and data binding: Quickly add data to your app for testing and prototyping purposes. Avoid exposing or providing access to your proprietary or production data to AI-enabled tools. -* Step-by-step explanations: Understand the solutions provided by the AI Coding Assistant through the detailed explanations (depends on the tool, mode, and model). To further develop your knowledge, check the respective documentation. -* Preliminary troubleshooting: Resolve obvious and easy-to-solve issues affecting your code. For more complex issues, search the product documentation or look for assistance from the community. - ->warning Always double-check the suggested code and solutions of any AI-powered tool before applying them to your app. - -> The Telerik AI Coding Assistant is not intended for styling and theme customization. If you are looking for AI-powered styling and theming, check out [Telerik ThemeBuilder](https://www.telerik.com/themebuilder). - -## Recommendations - -Consider the following recommendations when working with the Telerik AI Coding Assistant: - -* When switching between tasks and files, start a new session in a new chat window to avoid polluting the context with irrelevant or outdated information. -* At the time of publishing, Claude Sonnet 4 and GPT-5 produce better results. -* Sometimes, the AI Coding Assistant might generate custom styles. To avoid any custom styling, include a similar statement in your prompts: `Don't add custom CSS styles`. - -## Telerik Document Processing AI Coding Assistant - -You can also use the AI Coding Assistant for [Telerik Document Processing](https://www.telerik.com/document-processing-libraries) to generate high-quality code samples and speed up your development. Read the full guide in the dedicated [DPL AI Coding Assistant](https://docs.telerik.com/devtools/document-processing/ai-coding-assistant/overview) article. - -## Usage Limits - -The Telerik Blazor AI Conding Assistant allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): - -* Perpetual licenses: include 50 requests per year to let you explore and try out the AI Coding Assistant. If you'd like ongoing, higher-volume access, switch to a Subscription license. -* 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. -> When using the Telerik MCP server, one prompt may trigger several requests, depending on the prompt complexity. - -## Privacy - -The Telerik Blazor AI Coding Assistant operates under the following conditions: - -* The Assistant does not have access to your workspace and application code. Note that when using the Telerik MCP server (or any other MCP server), the LLM generates parameters for the MCP server request, which may include parts of your application code. -* The Assistant does not use your prompts to train Telerik AI models. -* The Assistant does not generate the actual responses and has no access to these responses. The Assistant only provides a better context that helps your selected model (for example, GPT, Gemini, Claude) provide better responses. -* The Assistant does not associate your prompts to your Telerik user account. Your prompts and generated context are anonymized and stored for statistical and troubleshooting purposes. -* The Assistant stores metrics about how often and how much you use it in order to ensure compliance with the [allowed number of requests that correspond to your current license](#usage-limits). - -Make sure to also get familiar with the terms and privacy policy of your selected AI model and AI client. - -## 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. diff --git a/ai/prompt-library.md b/ai/prompt-library.md deleted file mode 100644 index c4f49dc6b..000000000 --- a/ai/prompt-library.md +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: Prompt Library -page_title: Telerik Blazor Prompt Library -description: Get familiar with some example prompts that show how to use the Telerik AI Coding Assistant for better developer productivity. -slug: ai-prompt-library -tags: telerik,blazor,ai -published: True -position: 30 ---- - -# Telerik Blazor Prompt Library - -This article provides a list of sample prompts for use with the [Telerik Blazor MCP Server](slug:ai-mcp-server). They can help you get a better idea what the Telerik AI Coding Assistant can do and how to compose your prompts. This collection is not exhaustive and you can prompt the Telerik AI Coding Assistant about other scenarios and components as well. - -## How to Use the Prompts - -All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-server). The [`#telerik_blazor_assistant` handle](slug:ai-mcp-server#usage) assumes that this is the server name you have [entered in the `mcp.json` file during installation](slug:ai-mcp-server#installation). - -1. Browse the prompt library to find a prompt that suits your needs. -2. Copy the prompt text including the `#telerik_blazor_assistant` handle. -3. (optional) Customize the prompt as needed for your specific use case. Make sure the changes comply with the [intended use](slug:ai-overview#intended-use) and the [recommendations](slug:ai-overview#recommendations) for the AI Coding Assistant. -4. Run the prompt against the MCP server. - ->warning Always double-check the code and solutions proposed by any AI-powered tool before applying them to your project. - -## Grid - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Create a basic Grid component that displays employee data with columns for ID, Name, Position, and Salary. Include sorting and pagination functionality. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Implement a Grid with enabled filtering and show how to set up different filter types for text, numeric, and date columns. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Set up a Grid that loads data from a REST API endpoint. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Set up a Grid with virtual scrolling to handle large datasets efficiently -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a Grid having Edit button on each row, and conditional formatting based on cell values. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Implement Grid with enabled grouping and expand/collapse functionality for the groups. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Set up a Grid with еnabled multiple selection. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Set up a Grid with еnabled checkbox selection. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create an editable Grid that includes validation for different data types. -```` - -
- -## Scheduler - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Create a Scheduler component with month, week, and day views. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a Scheduler with sample event data and enabled basic event creation, editing, and deletion functionality. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a resource-based Scheduler with sample data grouped by Name of the event owner. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a Scheduler that allows users to toggle between different views and displays appointments. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a Scheduler that allows to create weekly repeating events. -```` - -
- -## Chart - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Build a column chart that shows quarterly sales by region. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Build a column chart that shows quarterly sales by region with drill-down functionality to show monthly data when clicking on a quarter. -```` - -
- -## Form - -
- -````TEXT.skip-repl -#telerik_blazor_assistant How to create a form with three TextBox fields. -```` - -````TEXT.skip-repl - #telerik_blazor_assistant Generate a Form with required field validation for email and password inputs. -```` - -
- -## Upload - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Create a simple Upload component allowing chunk file upload. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create an Upload component allowing single file upload to a predefined saving location. -```` - -
- -## DropDownList - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Create two cascading DropDownLists where the second list depends on the first selection. Use Categories and Products data with a simple relationship. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a DropDownList with countries data and enabled filtering. -```` - -
- -## DatePicker - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Create a DatePicker that disables weekends. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create two DatePickers for "From" and "To" date selection where the "To" picker's min date updates based on "From" selection. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Render a DatePicker with a default selected date. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Configure the DatePicker to show week numbers in its calendar popup. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Change the display format in the DatePicker so dates show as 'MM/dd/yyyy'. -```` - -
- -## Calendar - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Create a Calendar component in which all past days are disabled. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a Calendar component in which all weekends are disabled. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a Calendar that shows the past 5 years. -```` - -
- -## MultiSelect - -
- -````TEXT.skip-repl -#telerik_blazor_assistant Create a MultiSelect with an array of product objects and show the selected product names below the component. -```` - -````TEXT.skip-repl -#telerik_blazor_assistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count. -```` - -
- -## 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 5cfb69228..47156ea86 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -639,9 +639,6 @@ meta: res_type: kb relativeUrl: /knowledge-base hideChildren: true - ai/agentic-ui-generator: - hidden: true - position: 0 redirects: From b3b62b81a3f6e213350931ac6c8e54e0358472cf Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 6 Nov 2025 09:48:28 +0200 Subject: [PATCH 3/5] docs(common): add changelog article for AI assistant --- ai/changelog.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 ai/changelog.md diff --git a/ai/changelog.md b/ai/changelog.md new file mode 100644 index 000000000..aff3c8f5b --- /dev/null +++ b/ai/changelog.md @@ -0,0 +1,33 @@ +--- +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: 10 +--- + +# 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. + +## 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) From 8f49c4b535b7ddeec3e01e20e74bae829f030444 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 6 Nov 2025 14:45:14 +0200 Subject: [PATCH 4/5] chore(common): move changelog article to ai assistant folder --- ai/{ => ai-coding-assistant}/changelog.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ai/{ => ai-coding-assistant}/changelog.md (100%) diff --git a/ai/changelog.md b/ai/ai-coding-assistant/changelog.md similarity index 100% rename from ai/changelog.md rename to ai/ai-coding-assistant/changelog.md From 1f048ba7d8e1c4424b83a1178cc1c09dc7b467cb Mon Sep 17 00:00:00 2001 From: IvanDanchev Date: Thu, 6 Nov 2025 17:14:31 +0200 Subject: [PATCH 5/5] docs: add ui generator usage note --- ai/agentic-ui-generator/overview.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ai/agentic-ui-generator/overview.md b/ai/agentic-ui-generator/overview.md index d598a069b..91d0942c0 100644 --- a/ai/agentic-ui-generator/overview.md +++ b/ai/agentic-ui-generator/overview.md @@ -27,6 +27,8 @@ The tools are working together in an agentic flow to deliver complete, beautiful 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: