Telerik.Blazor.MCP 1.0.2

Telerik Blazor MCP Server

The Telerik Blazor MCP Server enables you to achieve integration with your already existing AI workflows 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) that supports MCP tools.
• A Telerik user account.
• An active DevCraft or Telerik UI for Blazor license or a Telerik UI for Blazor trial.
• .NET 10

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: telerik-blazor-mcp (depends on your preferences)

• Type: stdio (standard input/output transport)

• Command: dnx (the MCP server works through an nuget package)

• Supported arguments: --yes

• nuget package name: Telerik.Blazor.MCP

• You also need to add your Telerik licence key.

  • Place the file (recommended):
    • on Windows at %AppData%/Telerik/telerik-license.txt;
    • on macOS or linux at ~/.telerik/telerik-license.txt;

  OR alternatively:

  • 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 when necessary.

.NET 8 & 9 Local Tool Installation

For .NET 8 and 9 projects, you can install the MCP server as a local tool without global installation:

dotnet tool install Telerik.Blazor.MCP

MCP Configuration for .NET 8 & 9 Local Tools

For VS Code .vscode/mcp.json using local tools:

{
  "servers": {
    "telerik-blazor-mcp": {
      "type": "stdio",
      "command": "dotnet",
      "args": ["tool", "run", "telerik-blazor-mcp"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      }
    }
  },
  "inputs": []
}

Authentication

The MCP server requires a valid Telerik account with a valid license. In order to get a valid license key check the Telerik UI for Blazor documentation.

Configuration Examples

Visual Studio

Refer to Use MCP servers in Visual Studio.

To enable the Telerik MCP Server in a specific Blazor app, add a .mcp.json file to the solution folder.

SOLUTIONDIR/.mcp.json

{
  "servers": {
    "telerik-blazor-mcp": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.Blazor.MCP", "--yes"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      }
    }
  },
  "inputs": []
}

• Once the Telerik MCP server is added, make sure that all of its tools are enabled (checked) in the Copilot Chat window's tool selection dropdown in Visual Studio.

VSCode - Copilot

Refer to Use MCP servers in VS Code.

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

{
  "servers": {
    "telerik-blazor-mcp": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.Blazor.MCP", "--yes"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      }
    }
  },
  "inputs": []
}

Cursor

Refer to Model Context Protocol.

To enable the Telerik MCP Server in a specific 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

{
  "mcpServers": {
    "telerik-blazor-mcp": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.Blazor.MCP"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      }
    }
  }
}

Modes of Operation

The Telerik Blazor MCP server supports two modes of operation that depend on your Telerik license type:

AI Coding Assistant

The AI Coding Assistant mode is designed for streamlined component integration and configuration tasks.

Intended Use:

• Initial code generation: Quickly add components to your app to speed up the initial development.
• Component configuration: Enable or disable specific component features, or fine-tune the configuration through prompting. More complex configurations are possible but may require additional manual work to be production-ready.
• Dummy data generation and data binding: Quickly add data to your app for testing and prototyping purposes. Avoid exposing or providing access to your proprietary or production data to AI-enabled tools.
• Step-by-step explanations: Understand the solutions provided by the AI Coding Assistant through the detailed explanations (depends on the tool, mode, and model used). To further develop your knowledge, check the respective documentation.
• Preliminary troubleshooting: Resolve obvious and easy-to-solve issues affecting your code. For more complex issues, look for assistance from the community or contact the support team.

Agentic UI Generator

The Agentic UI Generator mode provides advanced capabilities for building complete user interfaces with responsive layouts and custom theming.

Intended Use:

• Create Individual Components: Build specific Telerik UI for Blazor components with particular configurations and features like filtering, validation, and data binding.
• Create Full Responsive Pages:
  • Build complete dashboards, landing pages, and listing pages in existing applications.
  • Generate pages similar to the Progress Design System page templates.
• Modify Existing Pages: Generate new themes inside existing applications. Add dark mode or high-contrast themes.
• Implement Responsive Layout:
  • Create new responsive pages and sections.
  • Convert existing pages to be responsive for mobile and tablet views.

Usage

To increase the probability of the Telerik UI for Blazor MCP Server being used, or to call it without the need to mention "telerik" explicitly, add custom idea instructions to your AI-powered tool. Here are examples for GitHub Copilot and Cursor.

AI Coding Assistant

To use the AI Coding Assistant mode:

1. Start your prompt with #telerik_blazor_assistant (the main MCP tool to start the agentic workflow in the Coding Assistant).

2. This will trigger an agentic workflow using the other available MCP tools to retrieve relevant context based on your prompt.

3. Inspect the output and verify that the Telerik Blazor 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)

   If the Telerik Blazor MCP server is not used even though it's installed and enabled, double-check the server name in your configuration and try rephrasing your prompt.

4. If requested, grant the Telerik Blazor MCP server a permission to run for this session, workspace, or always.

Also check the general AI Coding Assistant Recommendations for more usage tips.

Agentic UI Generator

To use the Agentic UI Generator mode:

1. Open the AI chat interface in your IDE—Start a new chat session to begin interacting with the Agentic UI Generator.
2. Start your prompt with #telerik_ui_generator (the main MCP tool to start the agentic workflow in the Agentic UI Generator).
3. This will trigger an agentic workflow using the other available MCP tools to retrieve relevant context based on your prompt.
4. Inspect the output and verify that the Telerik Blazor MCP Server is used. Look for a statement in the output, which is similar to:
   • Running telerik_ui_generator (in VS Code)
   • Calling MCP tool telerik_ui_generator (in Cursor)
5. If requested, grant the Telerik Blazor MCP server a permission to run for this session, workspace, or always.

General Tips

• 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 Blazor MCP 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 and Cursor.