Skip to content

Document MCP Configuration Features for Visual Studio and VS Code Extensions #3144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Aug 5, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion .spelling
Original file line number Diff line number Diff line change
Expand Up @@ -6915,4 +6915,12 @@ k-rpanel-toggle
- api/javascript/ui/scheduler.md
workweek
- third-party/using-kendo-with-data-access.md
v3
v3
MCP
mcp
mcp.json
.mcp.json
telerikBlazorAssistant
telerikblazor
McP
copilot-instructions.md
30 changes: 30 additions & 0 deletions _contentTemplates/common/ai-coding-assistant.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,33 @@
#number-of-requests
A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik Blazor AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a [limited number of requests per year](slug:ai-overview#number-of-requests).
#end

#vs-intro
provides automated configuration commands for the Telerik AI-powered development tools. These commands help you quickly set up the [Telerik MCP server](slug:ai-mcp-server) and [GitHub Copilot extension](slug:ai-copilot-extension) for enhanced developer productivity with Telerik UI for Blazor components.
#end

#prerequisites
* Check the tool-specific prerequisites for the [Telerik Blazor MCP Server](slug:ai-mcp-server#prerequisites) and the [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension#prerequisites).
#end

#verify-license-key
file to verify that the `TELERIK_LICENSE_PATH` value matches your actual [Telerik license file location](slug:installation-license-key). Alternatively, replace `TELERIK_LICENSE_PATH` with `TELERIK_LICENSE` and set your license key directly. Using `TELERIK_LICENSE_PATH` is recommended.
#end

#command-github-app
command opens the [TelerikBlazor GitHub App installation page](https://github.com/apps/telerikblazor/installations/select_target) in your default browser. Then, follow the [installation instructions for the Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension#installation).
#end

#copilot-instructions
command generates a `copilot-instructions.md` file in the `.github` folder under the solution. This file contains custom instructions that help GitHub Copilot provide better assistance when working with Telerik UI for Blazor components. The generated file includes the following default instructions:

* Guidance to use the Telerik MCP Server whenever applicable
* Guidance to prioritize the usage of Telerik UI components
* Guidance to use best coding practices related to Telerik UI for Blazor
#end

#see-also
* [Telerik AI Tooling Overview](slug:ai-overview)
* [Telerik Blazor MCP Server](slug:ai-mcp-server)
* [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension)
#end
4 changes: 3 additions & 1 deletion ai/copilot-extension.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ To use the Telerik GitHub Copilot extension for Blazor, you need to have:

To install the Telerik Blazor Copilot extension:

1. Go to 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. 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.
Expand All @@ -35,6 +35,8 @@ To install the Telerik Blazor Copilot extension:
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:
Expand Down
16 changes: 12 additions & 4 deletions ai/mcp-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,34 @@ To use the Telerik Blazor MCP server, you need:

## Installation

Use the documentation of your AI-powered MCP client to add the Telerik MCP server to a specific workspace 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:
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: `telerikBlazorAssistant` (depends on your preferences)
* Your [Telerik license key](#license-key) as an `env` parameter

> * Do not use hyphens (`-`) or underscores (`_`) in the MCP server name in the MCP `.json` file, due to potential compatibility issues with some MCP clients such as Visual Studio or Windsurf.
> * 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.

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:
### 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).
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.

Expand Down Expand Up @@ -72,7 +80,7 @@ To enable global automatic discovery of the Telerik MCP Server in Visual Studio,

### VS Code

For detailed instructions, 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). 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.

Expand Down
51 changes: 51 additions & 0 deletions getting-started/vs-code-integration/ai-configuration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
title: AI Tools Configuration
page_title: AI Tools Configuration in VS Code
description: Learn how to configure Telerik AI-powered tools like the MCP server and GitHub Copilot extension for Telerik UI for Blazor development in Visual Studio Code (VS Code).
slug: getting-started-vs-code-integration-ai-configuration
position: 4
---

# AI Tools Configuration in VS Code

The Telerik UI for Blazor Extension for VS Code @[template](/_contentTemplates/common/ai-coding-assistant.md#vs-intro)

## Prerequisites

To set up the Telerik UI for Blazor AI tools automatically:

* [Install the Telerik UI for Blazor extension for VS Code](slug:getting-started-vs-code-integration-overview).
@[template](/_contentTemplates/common/ai-coding-assistant.md#prerequisites)

To access the automated commands:

1. Open the [Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette) at the center top of the VS Code interface.
1. Select **Show and Run Commands**.
1. Search for the following Telerik commands:
* [Configure MCP Server](#configure-mcp-server)
* [Install Telerik Blazor Copilot Extension](#install-telerik-blazor-copilot-extension)
* [Add GitHub Copilot Custom Instructions](#add-github-copilot-custom-instructions)

## Configure MCP Server

The **Telerik UI for Blazor: Configure MCP Server** command provides two configuration scopes to set up the [Telerik Blazor MCP Server](slug:ai-mcp-server#vs-code):

* **Workspace**—Creates an `mcp.json` file in a `.vscode` folder in your current workspace. This configuration applies only to the current workspace.
* **Global**—Creates an `mcp.json` file in your operating system user folder (for example, `C:\Users\___\AppData\Roaming\Code\User\.mcp.json` on Windows or `/Users/___/Library/Application Support/Code/User/mcp.json` on macOS). This configuration applies to all VS Code workspaces.

> Make sure to open the generated `mcp.json` @[template](/_contentTemplates/common/ai-coding-assistant.md#verify-license-key)

Finally, check for any [usage notes about the Telerik Blazor MCP Server](slug:ai-mcp-server#vs-code).

## Add GitHub Copilot Custom Instructions

The **Telerik UI for Blazor: Add GitHub Copilot Custom Instructions** @[template](/_contentTemplates/common/ai-coding-assistant.md#copilot-instructions)

## Install Telerik Blazor Copilot Extension

The **Telerik UI for Blazor: Install Telerik Blazor Copilot Extension** @[template](/_contentTemplates/common/ai-coding-assistant.md#command-github-app)

## See Also

@[template](/_contentTemplates/common/ai-coding-assistant.md#see-also)
* [VS Code Integration Overview](slug:getting-started-vs-code-integration-overview)
3 changes: 3 additions & 0 deletions getting-started/vs-code-integration/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ 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.

* It provides [automated AI tools configuration](slug:getting-started-vs-code-integration-ai-configuration) for the Telerik MCP server and Telerik extension for GitHub Copilot to enhance your development experience with Telerik UI for Blazor.

## Get the Extension

@[template](/_contentTemplates/common/general-info.md#vs-code-x-download)
Expand All @@ -30,4 +32,5 @@ To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `C

## See Also

* [AI Configuration in VS Code](slug:getting-started-vs-code-integration-ai-configuration)
* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension)
2 changes: 1 addition & 1 deletion getting-started/vs-code-integration/troubleshooting.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Тroubleshooting
page_title: Visual Studio Code Integration Overview
description: Learn how to enhance your experience in developing web applications with Progress Telerik UI for Blazor.
slug: getting-started-vs-code-integration-troubleshooting
position: 4
position: 10
---

# Troubleshooting
Expand Down
44 changes: 44 additions & 0 deletions getting-started/vs-integration/ai-configuration.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
---
title: AI Tools Configuration
page_title: AI Tools Configuration in Visual Studio
description: Learn how to configure Telerik AI-powered tools like the MCP server and GitHub Copilot extension for Telerik UI for Blazor development in Visual Studio.
slug: getting-started-vs-integration-ai-configuration
position: 8
---

# AI Tools Configuration in Visual Studio

The Telerik UI for Blazor Extension for Visual Studio @[template](/_contentTemplates/common/ai-coding-assistant.md#vs-intro)

## Prerequisites

To set up the Telerik UI for Blazor AI tools automatically:

* [Install the Telerik UI for Blazor extension for Visual Studio](slug:getting-started-vs-integration-overview).
@[template](/_contentTemplates/common/ai-coding-assistant.md#prerequisites)

To access the automated commands, open **Extensions** > **Telerik** > **Telerik UI for Blazor** in the Visual Studio menu.

## Configure Telerik MCP Server

The Telerik UI for Blazor extension provides two menu options to [set up the Telerik Blazor MCP server](slug:ai-mcp-server#visual-studio):

* **Configure MCP Server for Solution**—this command creates an `.mcp.json` file in the solution folder. The configuration applies only to the projects in that application.
* **Configure MCP Server Globally**—this command creates an `.mcp.json` file in your operating system user folder (`%USERPROFILE%`, for example, `C:\Users\___\.mcp.json`). This configuration applies to all Visual Studio solutions and projects.

> Make sure to open the generated `.mcp.json` @[template](/_contentTemplates/common/ai-coding-assistant.md#verify-license-key)

Finally, check for any [usage notes about the Telerik Blazor MCP Server](slug:ai-mcp-server#visual-studio).

## Add/Update Copilot Instructions

The **Add/Update Copilot Instructions** @[template](/_contentTemplates/common/ai-coding-assistant.md#copilot-instructions)

## Install Telerik Blazor Copilot Extension

The **Install Telerik Blazor Copilot Extension** @[template](/_contentTemplates/common/ai-coding-assistant.md#command-github-app)

## See Also

@[template](/_contentTemplates/common/ai-coding-assistant.md#see-also)
* [Visual Studio Integration Overview](slug:getting-started-vs-integration-overview)
3 changes: 3 additions & 0 deletions getting-started/vs-integration/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ The Telerik UI for Blazor extension for Visual Studio provides the following adv

* It enables you to easily install or update your [Telerik license key](slug:installation-license-key).

* It provides [automated AI tools configuration](slug:getting-started-vs-integration-ai-configuration) for the Telerik MCP server and Telerik extension for GitHub Copilot to enhance your development experience with Telerik UI for Blazor.

The Telerik UI for Blazor VS extension supports Visual Studio 2022 and 2019. @[template](/_contentTemplates/common/general-info.md#vsx-download)

To access the Telerik Visual Studio extension, go to the **Extensions** > **Telerik** > **Telerik UI for Blazor** menu.
Expand All @@ -35,4 +37,5 @@ 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)
* [AI Configuration in Visual Studio](slug:getting-started-vs-integration-ai-configuration)
* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension)