|
| 1 | +--- |
| 2 | +title: AI Configuration |
| 3 | +page_title: Visual Studio AI Configuration |
| 4 | +description: Learn how to configure AI-powered tools like MCP servers and GitHub Copilot for Telerik UI for Blazor development in Visual Studio. |
| 5 | +slug: getting-started-vs-integration-ai-configuration |
| 6 | +position: 8 |
| 7 | +--- |
| 8 | + |
| 9 | +# AI Configuration in Visual Studio |
| 10 | + |
| 11 | +The Telerik UI for Blazor Extension for Visual Studio provides automated configuration commands for AI-powered development tools. These commands help you quickly set up [MCP servers](slug:ai-mcp-server) and [GitHub Copilot](slug:ai-copilot-extension) for enhanced developer productivity with Telerik UI for Blazor components. |
| 12 | + |
| 13 | +## Available Commands |
| 14 | + |
| 15 | +To access these commands, go to **Extensions** > **Telerik** > **Telerik UI for Blazor** in the Visual Studio menu. |
| 16 | + |
| 17 | +### Configure MCP Server |
| 18 | + |
| 19 | +The Telerik UI for Blazor extension provides two MCP server configuration options: |
| 20 | + |
| 21 | +#### Configure MCP Server for Solution |
| 22 | + |
| 23 | +The **Configure MCP Server for Solution** command generates a `.mcp.json` file in the solution folder. This configuration applies only to the current solution and any projects within it. |
| 24 | + |
| 25 | +#### Configure MCP Server Globally |
| 26 | + |
| 27 | +The **Configure MCP Server Globally** command generates a `.mcp.json` file under the user profile directory (`%USERPROFILE%`, for example, `C:\Users\<yourusername>`). This configuration applies to all Visual Studio solutions and projects. |
| 28 | + |
| 29 | +Both commands create a properly configured `.mcp.json` file for the [Telerik Blazor MCP Server](slug:ai-mcp-server) with placeholder values for your Telerik license. |
| 30 | + |
| 31 | +>caption Generated .mcp.json |
| 32 | +
|
| 33 | +```json |
| 34 | +{ |
| 35 | + "servers": { |
| 36 | + "telerikBlazorAssistant": { |
| 37 | + "type": "stdio", |
| 38 | + "command": "npx", |
| 39 | + "args": ["-y", "@progress/telerik-blazor-mcp@latest"], |
| 40 | + "env": { |
| 41 | + "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt" |
| 42 | + } |
| 43 | + } |
| 44 | + } |
| 45 | +} |
| 46 | +``` |
| 47 | + |
| 48 | +> Make sure to update the `TELERIK_LICENSE_PATH` value with your actual [Telerik license file location](slug:installation-license-key), or replace it with a `TELERIK_LICENSE` key containing your license key directly. |
| 49 | +
|
| 50 | +### Add/Update Copilot Instructions |
| 51 | + |
| 52 | +The **Add/Update 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. |
| 53 | + |
| 54 | +The generated file includes: |
| 55 | +* Best practices for Razor component development |
| 56 | +* Telerik UI for Blazor specific coding guidelines |
| 57 | +* Component naming conventions |
| 58 | +* Recommended code structure patterns |
| 59 | + |
| 60 | +### Install Telerik Blazor Copilot Extension |
| 61 | + |
| 62 | +The **Install Telerik Blazor Copilot Extension** command opens the GitHub App installation page in your default browser: |
| 63 | + |
| 64 | +`https://github.com/apps/telerikblazor/installations/select_target` |
| 65 | + |
| 66 | +This allows you to quickly install the [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension) for your GitHub account or organization. |
| 67 | + |
| 68 | +## Prerequisites |
| 69 | + |
| 70 | +Before using these AI configuration commands, ensure you have: |
| 71 | + |
| 72 | +* A [Telerik user account](https://www.telerik.com/account/) |
| 73 | +* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or [trial](https://www.telerik.com/blazor-ui) |
| 74 | +* [Node.js](https://nodejs.org/en) 18 or newer (for MCP server functionality) |
| 75 | +* Visual Studio 2022 or 2019 with the latest Telerik UI for Blazor extension |
| 76 | + |
| 77 | +## Important Notes for Visual Studio |
| 78 | + |
| 79 | +* Early Visual Studio 17.14 versions require the Copilot Chat window to be open and active when you open a solution for the MCP server to work properly. |
| 80 | +* After configuring the MCP server, make sure that the `telerikBlazorAssistant` 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). |
| 81 | +* The Telerik MCP server may get disabled and you may see "🔧10/11" in the selected tools dropdown when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue that is being investigated. |
| 82 | + |
| 83 | +## Next Steps |
| 84 | + |
| 85 | +After configuring the AI tools: |
| 86 | + |
| 87 | +1. **For MCP Server**: Follow the [complete MCP server setup guide](slug:ai-mcp-server) to understand usage and troubleshooting. |
| 88 | +2. **For GitHub Copilot**: Learn how to use the [Telerik Blazor Copilot Extension](slug:ai-copilot-extension) effectively. |
| 89 | +3. **For both**: Review the [AI tooling overview](slug:ai-overview) to understand the capabilities and limitations of these tools. |
| 90 | + |
| 91 | +## See Also |
| 92 | + |
| 93 | +* [Telerik Blazor MCP Server](slug:ai-mcp-server) |
| 94 | +* [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension) |
| 95 | +* [AI Tooling Overview](slug:ai-overview) |
| 96 | +* [Visual Studio Integration Overview](slug:getting-started-vs-integration-overview) |
0 commit comments