From f3827b1d769fbab22aba91feb2b928711d25f5cc Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Wed, 14 May 2025 13:36:09 +0300 Subject: [PATCH 1/5] docs(Copilot): Initial commit --- common-features/adaptive-rendering.md | 2 +- common-features/ai-code-assistant.md | 60 +++++++++++++++++++ common-features/dimensions.md | 2 +- common-features/icons.md | 2 +- common-features/input-adornments.md | 2 +- common-features/input-validation.md | 2 +- common-features/loading-sign.md | 2 +- .../microsoft-extensions-ai-integration.md | 2 +- getting-started/client-blazor.md | 4 ++ getting-started/hybrid-blazor.md | 1 + .../vs-code-integration/introduction.md | 6 +- .../vs-integration/introduction.md | 1 + getting-started/web-app.md | 4 ++ getting-started/what-you-need.md | 3 + introduction.md | 6 +- 15 files changed, 88 insertions(+), 11 deletions(-) create mode 100644 common-features/ai-code-assistant.md diff --git a/common-features/adaptive-rendering.md b/common-features/adaptive-rendering.md index 27befe749..13e844e99 100644 --- a/common-features/adaptive-rendering.md +++ b/common-features/adaptive-rendering.md @@ -5,7 +5,7 @@ description: Explore how the components with popup elements can react to the cha slug: adaptive-rendering tags: telerik,blazor,adaptive,rendering,mobile published: True -position: 1 +position: 10 --- # Adaptive Rendering diff --git a/common-features/ai-code-assistant.md b/common-features/ai-code-assistant.md new file mode 100644 index 000000000..4bda5fd64 --- /dev/null +++ b/common-features/ai-code-assistant.md @@ -0,0 +1,60 @@ +--- +title: AI Code Assistant +page_title: Telerik Blazor AI Code Assistant +description: +slug: common-features-ai-code-assistant +tags: telerik,blazor,ai +published: True +position: 60 +--- + +# Telerik Blazor AI Code Assistant + +Telerik UI for Blazor provides a [GitHub Copilot](https://github.com/features/copilot) extension. If you are using GitHub Copilot, the extension can generate code snippets that include Telerik UI for Blazor components and API. + +## Prerequisites + +To use the Telerik GitHub Copilot extension for Blazor, you need to have: + +* An active [https://github.com/features/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). +* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui). + +## Installation + +To install the Telerik GitHub Copilot extension: + +1. Go to the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page. +1. Click the **Install** button. +1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. 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. + +On first usage, you have to authenticate with your Telerik credentials: + +1. Click the **Authorize** button +1. Enter your Telerik email and password. This will authorize the GitHub Copilot extension to integrate with your Telerik account. + +## Usage + +Start your prompt with `@TelerikBlazor` and type your request. + +If you want to prompt for code that is not related to your previous prompts, then use a new Chat, so that the new context is not polluted by irrelevant old information. + +### Add Telerik MCP Server to VS Code + +The [Agent mode of GitHub Copilot](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) allows you to prompt AI for more complex tasks that require a multi-step process and affect more files. + +To use the Telerik MCP server in Copilot Agent mode: + +1. Create a `.vscode/mcp.json` file in your workspace (application root). +1. Go to the [`telerik-blazor-mcp`](https://www.npmjs.com/package/@progress/telerik-blazor-mcp?activeTab=readme) npm package page and copy-paste the contents of `mcp.json`. +1. At the bottom of the Copilot Chat pane, select **Agent** from the dropdown that contains **Ask**, **Edit**, and **Agent**. + +> Do not click the **Add Server** button at the bottom-right of the open JSON file. +> Do not execute `npm install @progress/telerik-blazor-mcp` manually. +> Do not use `@telerikblazor` in your prompts, because the Copilot Agent mode does not use extensions. + +## See Also + +* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials). +* [Integrate Telerik UI for Blazor with Microsoft.Extensions.AI](slug:common-features-microsoft-extensions-ai-integration) diff --git a/common-features/dimensions.md b/common-features/dimensions.md index 69ae34afa..678103181 100644 --- a/common-features/dimensions.md +++ b/common-features/dimensions.md @@ -5,7 +5,7 @@ description: How dimensions work and are set in the Telerik UI for Blazor compon slug: common-features/dimensions tags: telerik,blazor,dimensions,width,height,percent,pixel published: True -position: 7 +position: 80 --- # Dimensions diff --git a/common-features/icons.md b/common-features/icons.md index 72dedde1d..8b0afd751 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -6,7 +6,7 @@ slug: common-features-icons tags: telerik,blazor,icon,font,built-in published: True previous_url: /common-features/font-icons -position: 1 +position: 20 --- # Blazor SVG and Font Icons diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index f812cb07e..695bbf1c6 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -5,7 +5,7 @@ description: How to add prefix and suffix adornments in the input elements of th slug: common-features/input-adornments tags: telerik,blazor,input,adornments,prefix,suffix published: True -position: 2 +position: 30 --- # Input Adornments diff --git a/common-features/input-validation.md b/common-features/input-validation.md index f92eb6735..39ae8a8c3 100644 --- a/common-features/input-validation.md +++ b/common-features/input-validation.md @@ -5,7 +5,7 @@ description: How to validate Blazor inputs. slug: common-features/input-validation tags: telerik,blazor,validation,data,annotation,form published: True -position: 3 +position: 40 --- # Input Validation diff --git a/common-features/loading-sign.md b/common-features/loading-sign.md index fbc708fcd..813b35741 100644 --- a/common-features/loading-sign.md +++ b/common-features/loading-sign.md @@ -5,7 +5,7 @@ description: Components that peform long running operations can show a loading i slug: common-features-loading-sign tags: telerik,blazor,loading,sign,busy,indicator,data published: True -position: 5 +position: 70 --- # Loading Sign diff --git a/common-features/microsoft-extensions-ai-integration.md b/common-features/microsoft-extensions-ai-integration.md index aaed0cebf..83bd9f3fb 100644 --- a/common-features/microsoft-extensions-ai-integration.md +++ b/common-features/microsoft-extensions-ai-integration.md @@ -5,7 +5,7 @@ description: How to integrate the UI for Blazor components with Microsoft.Extens slug: common-features-microsoft-extensions-ai-integration tags: telerik,blazor,aiprompt,ai,extensions,integration published: True -position: 4 +position: 50 --- # Integration with Microsoft.Extensions.AI diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index d5bce66e4..49f486936 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -111,6 +111,10 @@ If you prefer video instructions, you can also check the video tutorial below. +## Next Steps + +* Install the [Telerik GitHub Copilot extension for Blazor](slug:common-features-ai-code-assistant) to generate code snippets that include Telerik UI for Blazor components and API. + ## See Also * [Workflow Details for Telerik UI for Blazor](slug:getting-started/what-you-need) diff --git a/getting-started/hybrid-blazor.md b/getting-started/hybrid-blazor.md index 07afc3b8e..8429551e2 100644 --- a/getting-started/hybrid-blazor.md +++ b/getting-started/hybrid-blazor.md @@ -127,6 +127,7 @@ Refer to the following articles for more information on each technology stack: ## Next Steps * [Explore the specifics of Telerik UI for Blazor in native MAUI](slug:hybrid-blazor-apps) +* Install the [Telerik GitHub Copilot extension for Blazor](slug:common-features-ai-code-assistant) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/getting-started/vs-code-integration/introduction.md b/getting-started/vs-code-integration/introduction.md index 735a5a4ab..025fddaae 100644 --- a/getting-started/vs-code-integration/introduction.md +++ b/getting-started/vs-code-integration/introduction.md @@ -20,8 +20,6 @@ The extension for Visual Studio Code provides the following advantages: * It allows you to [add the Telerik Components to an existing project](slug:getting-started-vs-code-integration-convert-project ) with a few clicks. - - ## Get the Extension @[template](/_contentTemplates/common/general-info.md#vs-code-x-download) @@ -29,3 +27,7 @@ The extension for Visual Studio Code provides the following advantages: To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `Cmd`+`Shift`+`P` on Mac to open the VS Code extension launcher. ![launch Telerik Blazor VS Code extension](images/launch-extension.png) + +## See Also + +* [Telerik GitHub Copilot extension for Blazor](slug:common-features-ai-code-assistant) diff --git a/getting-started/vs-integration/introduction.md b/getting-started/vs-integration/introduction.md index bc4362819..ee234c583 100644 --- a/getting-started/vs-integration/introduction.md +++ b/getting-started/vs-integration/introduction.md @@ -35,3 +35,4 @@ To access the Telerik Visual Studio extension, go to the **Extensions** > **Tele * [Creating New Projects with Visual Studio](slug:getting-started-vs-integration-new-project) * [Converting Existing Projects with Visual Studio](slug:getting-started-vs-integration-convert-project) * [Downloading the Latest Telerik UI for Blazor Versions](slug:getting-started-vs-integration-latest-version) +* [Telerik GitHub Copilot extension for Blazor](slug:common-features-ai-code-assistant) diff --git a/getting-started/web-app.md b/getting-started/web-app.md index bcfbabf04..dcd2ecf87 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -120,6 +120,10 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a @[template](/_contentTemplates/common/get-started.md#add-component-sample) +## Next Steps + +* Install the [Telerik GitHub Copilot extension for Blazor](slug:common-features-ai-code-assistant) to generate code snippets that include Telerik UI for Blazor components and API. + ## See Also * [Workflow Details for Telerik UI for Blazor](slug:getting-started/what-you-need) diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index c5b80bba0..c297f7233 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -271,6 +271,9 @@ The Blazor application is ready to use Telerik components. @[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) +## Next Steps + +* Install the [Telerik GitHub Copilot extension for Blazor](slug:common-features-ai-code-assistant) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/introduction.md b/introduction.md index d35799ef6..db9fcb442 100644 --- a/introduction.md +++ b/introduction.md @@ -221,9 +221,11 @@ To use UI for Blazor commercially, you need to Date: Fri, 16 May 2025 15:22:29 +0300 Subject: [PATCH 3/5] Complete AI Code Assistant docs --- ai/ai-coding-assistant.md | 60 ------ ai/coding-assistant.md | 70 +++++++ ai/mcp-server.md | 193 ++++++++++++++++-- docs-builder.yml | 2 +- getting-started/client-blazor.md | 2 +- getting-started/hybrid-blazor.md | 2 +- .../vs-code-integration/introduction.md | 2 +- .../vs-integration/introduction.md | 2 +- getting-started/web-app.md | 2 +- getting-started/what-you-need.md | 2 +- introduction.md | 2 +- 11 files changed, 256 insertions(+), 83 deletions(-) delete mode 100644 ai/ai-coding-assistant.md create mode 100644 ai/coding-assistant.md diff --git a/ai/ai-coding-assistant.md b/ai/ai-coding-assistant.md deleted file mode 100644 index f1e8c0604..000000000 --- a/ai/ai-coding-assistant.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: AI Coding Assistant -page_title: Telerik Blazor AI Coding Assistant -description: -slug: ai-tooling-ai-coding-assistant -tags: telerik,blazor,ai -published: True -position: 20 ---- - -# Telerik Blazor AI Coding Assistant - -Telerik UI for Blazor provides a [GitHub Copilot](https://github.com/features/copilot) extension. If you are using GitHub Copilot, the extension can generate code snippets that include Telerik UI for Blazor components and API. - -## Prerequisites - -To use the Telerik GitHub Copilot extension for Blazor, you need to have: - -* An active [https://github.com/features/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). -* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui). - -## Installation - -To install the Telerik GitHub Copilot extension: - -1. Go to the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page. -1. Click the **Install** button. -1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. 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. - -On first usage, you have to authenticate with your Telerik credentials: - -1. Click the **Authorize** button -1. Enter your Telerik email and password. This will authorize the GitHub Copilot extension to integrate with your Telerik account. - -## Usage - -Start your prompt with `@TelerikBlazor` and type your request. - -If you want to prompt for code that is not related to your previous prompts, then use a new Chat, so that the new context is not polluted by irrelevant old information. - -### Add Telerik MCP Server to VS Code - -The [Agent mode of GitHub Copilot](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) allows you to prompt AI for more complex tasks that require a multi-step process and affect more files. - -To use the Telerik MCP server in Copilot Agent mode: - -1. Create a `.vscode/mcp.json` file in your workspace (application root). -1. Go to the [`telerik-blazor-mcp`](https://www.npmjs.com/package/@progress/telerik-blazor-mcp?activeTab=readme) npm package page and copy-paste the contents of `mcp.json`. -1. At the bottom of the Copilot Chat pane, select **Agent** from the dropdown that contains **Ask**, **Edit**, and **Agent**. - -> Do not click the **Add Server** button at the bottom-right of the open JSON file. -> Do not execute `npm install @progress/telerik-blazor-mcp` manually. -> Do not use `@telerikblazor` in your prompts, because the Copilot Agent mode does not use extensions. - -## See Also - -* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials). -* [Telerik MCP Server](slug:ai-tooling-mcp-server) diff --git a/ai/coding-assistant.md b/ai/coding-assistant.md new file mode 100644 index 000000000..3a9fd515c --- /dev/null +++ b/ai/coding-assistant.md @@ -0,0 +1,70 @@ +--- +title: Copilot Extension +page_title: Telerik Blazor GitHub Copilot Extension +description: +slug: ai-coding-assistant +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 Telerik UI for Blazor context. The extension can help you reach new levels of developer productivity by providing useful tips and generating tailored code snippets that include Telerik UI for Blazor components and API. + +## 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). +* 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). + +## Installation + +To install the Telerik Blazor Copilot extension: + +1. Go the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page and click the **Install** button. +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. + +## 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 mode 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 **TelerikBlazor working...** in the output. +1. Grant permission to the Telerik Blazor extension to read your workspace files. +1. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information. + +### 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` What is DebounceDelay for the Telerik TextBox? +* `@telerikblazor` Why am I getting a TelerikBlazor was undefined JavaScript error? + +## Number of Requests + +> The usage limits below will take place after after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. + +The Telerik Blazor Copilot extension allows the following maximum number of requests, depending on your license type: + +* Perpetual licenses: 50 requests per year +* Subscription licenses: 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 and the Telerik MCP server both take up from the same usage quota. + +## 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 index 82a1a23dd..035f79be3 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -1,39 +1,202 @@ --- title: MCP Server -page_title: Telerik MCP Server +page_title: Telerik Blazor MCP Server description: slug: ai-mcp-server tags: telerik,blazor,ai published: True -position: 10 +position: 20 --- -# Telerik MCP Server +# Telerik Blazor MCP Server -Telerik UI for Blazor provides a [GitHub Copilot](https://github.com/features/copilot) extension. If you are using GitHub Copilot, the extension can generate code snippets that include Telerik UI for Blazor components and API. +The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) enables you achieve interation 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 to ask about Telerik UI for Blazor components, 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: + +* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*. +* 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). + ## Installation -The [Agent mode of GitHub Copilot](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) allows you to prompt AI for more complex tasks that require a multi-step process and affect more files. +Use the documentation of your AI-powered MCP client to add the Telerik MCP server to a specific workspace or globally. You can see installation tips and examples for some popular MCP clients below. + +The generic settings of the Telerik Blazor MCP server are: + +* Server name: `telerik-blazor-assistant` +* Type: `stdio` (standard input/output transport) +* Command: `npx` (the MCP server works through an npm package) +* Supported arguments: `-y` +* npm package name: `@progress/telerik-blazor-mcp` +* You also need to add your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the `mcp.json` file. There are two options: + * (recommended) Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location. + * Use a `TELERIK_LICENSE_KEY` 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 + +Refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers). + +To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder. + +> caption SOLUTIONDIR/.mcp.json + +````JSON.skip-repl +{ + "inputs": [ + // ... + ], + "servers": { + "telerik-blazor-assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } +} +```` + +To enable automatic global 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`. + +### VS Code + +Refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers). + +To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.vscode` folder with an `mcp.json` file at the root of the workspace: + +>caption .vscode/mcp.json at the workspace root + +````JSON.skip-repl +{ + "servers": { + "telerik-blazor-assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } +} +```` + +To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.json` file](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings): + +>caption VS Code settings.json -To use the Telerik MCP server in Copilot Agent mode: +````JSON.skip-repl +{ + // ... + "chat.mcp.discovery.enabled": true, + "mcp": { + "inputs": [ + // ... + ], + "servers": { + "telerik-blazor-assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } + } +} +```` -1. Create a `.vscode/mcp.json` file in your workspace (application root). -1. Go to the [`telerik-blazor-mcp`](https://www.npmjs.com/package/@progress/telerik-blazor-mcp?activeTab=readme) npm package page and copy-paste the contents of `mcp.json`. -1. At the bottom of the Copilot Chat pane, select **Agent** from the dropdown that contains **Ask**, **Edit**, and **Agent**. +### Cursor -> Do not click the **Add Server** button at the bottom-right of the open JSON file. -> Do not execute `npm install @progress/telerik-blazor-mcp` manually. -> Do not use `@telerikblazor` in your prompts, because the Copilot Agent mode does not use extensions. +Refer to [Model Context Protocol](https://docs.cursor.com/context/model-context-protocol). + +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) or Blazor app, add a `.cursor` folder with an `mcp.json` file at the root of the workspace. + +>caption .cursor/mcp.json at the workspace root + +````JSON.skip-repl +{ + "mcpServers": { + "telerik-blazor-assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } +} +```` + +To [add the Telerik MCP Server globally for Cursor](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings), add a `.cursor` folder with an `mcp.json` file in your user folder: + +>caption .cursor/mcp.json inside your user folder + +````JSON.skip-repl +{ + "mcpServers": { + "telerik-blazor-assistant": { + "type": "stdio", + "command": "npx", + "args": ["-y", "@progress/telerik-blazor-mcp"], + "env": { + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" + } + } + } +} +```` ## Usage -Start your prompt with `@TelerikBlazor` and type your request. +To use the Telerik MCP Server: + +1. Start your prompt with one of the following: + * `telerik` + * `/telerik` + * `@telerik` + * `telerikblazor` + * `/telerikblazor` + * `@telerikblazor` +1. Confirm that the Telerik MCP server is used, because this doesn't happen deterministically. 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) + + If the Telerik MCP server is not used even though it's installed and enabled, then try rephrasing your prompt and use another trigger syntax from the list in step 1. +1. Grant the Telerik tool a permission to run for this session, workspace, or always. +1. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information. + +To increase the probability of the Telerik MVC Server being used, or to call it without the need to mention "telerik" 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: + +* Telerik Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model that is defined in the same .razor file and provide dummy data. +* Telerik What is DebounceDelay for the Telerik TextBox? +* Telerik Why am I getting a TelerikBlazor was undefined JavaScript error? + +## Number of Requests + +> The usage limits below will take place after after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. + +The Telerik Blazor MCP Server allows the following maximum number of requests, depending on your license type: + +* Perpetual licenses: 50 requests per year +* Subscription licenses: 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. -If you want to prompt for code that is not related to your previous prompts, then use a new Chat, so that the new context is not polluted by irrelevant old information. +> One prompt may trigger several requests to the MCP server, depending on the complexity. +> +> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik MCP server and the Telerik Copilot extension both take up from the same usage quota. ## See Also -* [Telrik Blazor extension for GitHub Copilot](slug:ai-tooling-ai-coding-assistant). +* [Telerik Blazor extension for GitHub Copilot](slug:ai-coding-assistant) diff --git a/docs-builder.yml b/docs-builder.yml index 7563fcce1..7507afce3 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -590,7 +590,7 @@ meta: title: Common Features position: 15 ai: - title: AI Tooling + title: AI Coding Assistant position: 14 styling-and-themes: title: Styling and Themes diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index f34074c12..c10179abe 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -113,7 +113,7 @@ If you prefer video instructions, you can also check the video tutorial below. ## Next Steps -* Use the [Telerik Blazor MCP server](slug:ai-tooling-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-tooling-ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/getting-started/hybrid-blazor.md b/getting-started/hybrid-blazor.md index c3cb168e9..fb56ed87e 100644 --- a/getting-started/hybrid-blazor.md +++ b/getting-started/hybrid-blazor.md @@ -127,7 +127,7 @@ Refer to the following articles for more information on each technology stack: ## Next Steps * [Explore the specifics of Telerik UI for Blazor in native MAUI](slug:hybrid-blazor-apps) -* Use the [Telerik Blazor MCP server](slug:ai-tooling-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-tooling-ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/getting-started/vs-code-integration/introduction.md b/getting-started/vs-code-integration/introduction.md index 15c2d50c8..0be52c054 100644 --- a/getting-started/vs-code-integration/introduction.md +++ b/getting-started/vs-code-integration/introduction.md @@ -30,4 +30,4 @@ To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `C ## See Also -* [Telerik GitHub Copilot extension for Blazor](slug:ai-tooling-ai-coding-assistant) +* [Telerik GitHub Copilot extension for Blazor](slug:ai-coding-assistant) diff --git a/getting-started/vs-integration/introduction.md b/getting-started/vs-integration/introduction.md index 0769408be..1cdbdc5cb 100644 --- a/getting-started/vs-integration/introduction.md +++ b/getting-started/vs-integration/introduction.md @@ -35,4 +35,4 @@ To access the Telerik Visual Studio extension, go to the **Extensions** > **Tele * [Creating New Projects with Visual Studio](slug:getting-started-vs-integration-new-project) * [Converting Existing Projects with Visual Studio](slug:getting-started-vs-integration-convert-project) * [Downloading the Latest Telerik UI for Blazor Versions](slug:getting-started-vs-integration-latest-version) -* [Telerik GitHub Copilot extension for Blazor](slug:ai-tooling-ai-coding-assistant) +* [Telerik GitHub Copilot extension for Blazor](slug:ai-coding-assistant) diff --git a/getting-started/web-app.md b/getting-started/web-app.md index 2a68547da..fd79128a0 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -122,7 +122,7 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a ## Next Steps -* Use the [Telerik Blazor MCP server](slug:ai-tooling-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-tooling-ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index 726430259..8691b0471 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -273,7 +273,7 @@ The Blazor application is ready to use Telerik components. ## Next Steps -* Use the [Telerik Blazor MCP server](slug:ai-tooling-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-tooling-ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. +* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API. ## See Also diff --git a/introduction.md b/introduction.md index 6b569775f..9e37ddc90 100644 --- a/introduction.md +++ b/introduction.md @@ -223,7 +223,7 @@ To use UI for Blazor commercially, you need to Date: Fri, 16 May 2025 16:13:34 +0300 Subject: [PATCH 5/5] polishing --- ai/copilot-extension.md | 10 +++++----- ai/mcp-server.md | 14 +++++++------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md index 1d67788a0..3e4dbb78c 100644 --- a/ai/copilot-extension.md +++ b/ai/copilot-extension.md @@ -1,7 +1,7 @@ --- title: Copilot Extension page_title: Telerik Blazor GitHub Copilot Extension -description: +description: Learn how to add and use the Telerik Blazor GitHub Copilot extension 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 @@ -24,7 +24,7 @@ To use the Telerik GitHub Copilot extension for Blazor, you need to have: To install the Telerik Blazor Copilot extension: -1. Go the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page and click the **Install** button. +1. Go to the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page and click the **Install** button. 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. @@ -38,7 +38,7 @@ To install the Telerik Blazor Copilot extension: 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 mode do not use the Telerik Copilot extension. However, the Agent mode can use the [Telerik Blazor MCP server](slug:ai-mcp-server). +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 **TelerikBlazor working...** in the output. 1. Grant permission to the Telerik Blazor extension to read your workspace files. @@ -54,9 +54,9 @@ The following list describes how your prompts may look like: ## Number of Requests -> The usage limits below will take place after after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. +> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. -The Telerik Blazor Copilot extension allows the following maximum number of requests, depending on your license type: +The Telerik Blazor Copilot extension allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): * Perpetual licenses: 50 requests per year * Subscription licenses: 300 requests per day diff --git a/ai/mcp-server.md b/ai/mcp-server.md index f51c2edd4..5340a723a 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -1,7 +1,7 @@ --- title: MCP Server page_title: Telerik Blazor MCP Server -description: +description: Learn how to add and use the Telerik Blazor MCP Server 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 @@ -10,7 +10,7 @@ position: 20 # Telerik Blazor MCP Server -The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) enables you achieve interation 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 to ask about Telerik UI for Blazor components, 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. +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 to ask about Telerik UI for Blazor components, 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 @@ -37,7 +37,7 @@ The generic settings of the Telerik Blazor MCP server are: ### Visual Studio -Refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers). +For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers). To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder. @@ -65,7 +65,7 @@ To enable automatic global discovery of the Telerik MCP Server in Visual Studio, ### VS Code -Refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers). +For detailed instructions, refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers). To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.vscode` folder with an `mcp.json` file at the root of the workspace: @@ -114,7 +114,7 @@ To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings. ### Cursor -Refer to [Model Context Protocol](https://docs.cursor.com/context/model-context-protocol). +For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/model-context-protocol). 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) or Blazor app, add a `.cursor` folder with an `mcp.json` file at the root of the workspace. @@ -170,7 +170,7 @@ To use the Telerik MCP Server: * `Calling MCP tool telerik-blazor-assistant` (in Cursor) If the Telerik MCP server is not used even though it's installed and enabled, then try rephrasing your prompt and use another trigger syntax from the list in step 1. -1. Grant the Telerik tool a permission to run for this session, workspace, or always. +1. Grant the Telerik tool permission to run for this session, workspace, or always. 1. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information. To increase the probability of the Telerik MVC Server being used, or to call it without the need to mention "telerik" 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). @@ -187,7 +187,7 @@ The following list describes how your prompts may look like: > The usage limits below will take place after after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests. -The Telerik Blazor MCP Server allows the following maximum number of requests, depending on your license type: +The Telerik Blazor MCP Server allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing): * Perpetual licenses: 50 requests per year * Subscription licenses: 300 requests per day