@progress/telerik-blazor-mcp/README.md

Model Context Protocol for Blazor

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

## 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

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: `telerikBlazorAssistant` (depends on your preferences)
* 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` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary.

> * 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.

## Authentication

The MCP server requires a valid Telerik account with a valid license. In order to get a valid license key check the [Telerik Blazor documentation](https://www.telerik.com/blazor-ui/documentation/installation/license-key).

To set up the license key, you need to set it up as an environment variable in the JSON configuration file.

## Configuration Examples


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

> SOLUTIONDIR/.mcp.json

```json
{
  "servers": {
    "telerikBlazorAssistant": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      }
    }
  }
}
```

### VSCode - Copilot

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:

> .vscode/mcp.json at the workspace root

```json
{
  "servers": {
    "telerikBlazorAssistant": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      }
    }
  }
}
```

### Cursor

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.

> .cursor/mcp.json at the workspace root

```json
{
  "mcpServers": {
    "telerikBlazorAssistant": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@progress/telerik-blazor-mcp@latest"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      },
    }
  }
}
```

## Usage

By default, MCP clients do not call MCP tools in a deterministic way, unless you explicitly reference the MCP tool in your prompt. To use the Telerik MCP Server:

1. Start your prompt with one of the following:
    * `#` and the MCP server name that you used in `mcp.json` (for example, `#telerikBlazorAssistant`)
    * `#` 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 `#telerikBlazorAssistant` 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).