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

Copilot · nenchef · dimodi · web-flow · commit dccf38b1b9e9 · 2025-08-05T11:39:50.000+03:00
* Initial plan

* Add MCP server and AI configuration documentation for VS and VS Code extensions

Co-authored-by: nenchef &lt;3043283+nenchef@users.noreply.github.com&gt;

* Polish AI generated content

* continued

* Update .spelling

* Update ai/copilot-extension.md

* Update getting-started/vs-code-integration/introduction.md

* Update getting-started/vs-integration/introduction.md

* Update getting-started/vs-code-integration/introduction.md

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: nenchef &lt;3043283+nenchef@users.noreply.github.com&gt;
Co-authored-by: Dimo Dimov &lt;961014+dimodi@users.noreply.github.com&gt;
diff --git a/.spelling b/.spelling
@@ -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
diff --git a/_contentTemplates/common/ai-coding-assistant.md b/_contentTemplates/common/ai-coding-assistant.md
@@ -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
diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md
@@ -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 &amp; Authorize** button. This will authorize the GitHub Copilot extension to integrate with your GitHub account.
 1. Enter your GitHub password.
@@ -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:
diff --git a/ai/mcp-server.md b/ai/mcp-server.md
@@ -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.
 
@@ -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.
 
diff --git a/getting-started/vs-code-integration/ai-configuration.md b/getting-started/vs-code-integration/ai-configuration.md
@@ -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**&mdash;Creates an `mcp.json` file in a `.vscode` folder in your current workspace. This configuration applies only to the current workspace.
+* **Global**&mdash;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)
diff --git a/getting-started/vs-code-integration/introduction.md b/getting-started/vs-code-integration/introduction.md
@@ -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)
@@ -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)
diff --git a/getting-started/vs-code-integration/troubleshooting.md b/getting-started/vs-code-integration/troubleshooting.md
@@ -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
diff --git a/getting-started/vs-integration/ai-configuration.md b/getting-started/vs-integration/ai-configuration.md
@@ -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**&mdash;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**&mdash;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)
diff --git a/getting-started/vs-integration/introduction.md b/getting-started/vs-integration/introduction.md
@@ -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.
@@ -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)
