New to Telerik UI for Blazor? Start a free 30-day trial

Getting Started with the Agentic UI Generator

Updated on Jun 25, 2026

The Agentic UI Generator is an intelligent development tool delivered through the Telerik Blazor MCP Server that enables UI generation from natural language prompts. Once configured and authenticated, you can use the Agentic UI Generator tool (#telerik_ui_generator) together with the available specialized MCP assistants.

You can get started in two ways:

Try it in the browser (no setup required)—the Blazor REPL includes a built-in Agentic UI Generator integration, allowing you to generate, run, and evaluate Telerik UI for Blazor components directly in the browser. To use it, describe your UI requirements using natural language in the REPL's chat interface, and iterate with follow-up prompts. Sign in and get 10 monthly requests to evaluate the Agentic UI Generator without leaving the browser.
Set up locally—get started in minutes—follow the Quick Start guide to configure your local environment either through the Telerik CLI or by installing the telerik-blazor-plugin.

Prerequisites

To use the Telerik Blazor MCP server, you need:

.NET 8 or newer.
A compatible MCP client (IDE, code editor, or app) that supports MCP server integrations.
An active Telerik license - trial or subscription.

Quick Start

Use the Telerik CLI to handle the entire setup automatically - whether you are starting a new project or adding Telerik UI for Blazor to an existing one. Alternatively, install the telerik-blazor-plugin, which delivers the Agentic UI Generator functionality as skills.

Follow these steps to set up the Agentic UI Generator and use it in your IDE:

CLI AI Plugin Manual Setup

Install the Telerik CLI globally by executing the following command in any standard command-line interface (CLI) or terminal on your operating system:
SH
```
dotnet tool install -g Telerik.CLI
```
Configure the Telerik Nuget feed, activate (update) your Telerik license, and set up the Telerik MCP server with the Telerik CLI:
.NET 10 .NET 8 or 9
SH
```
telerik setup blazor
```
SH
```
dotnet tool install Telerik.Blazor.MCP
```
SH
```
telerik setup blazor
```
(optional) If you want to use the Agentic UI Generator in a new Telerik Blazor app, then create it with the Telerik CLI or the Telerik Blazor project templates.

The telerik-blazor-plugin provides an alternative to setting up the Telerik MCP Server via the Telerik CLI. The plugin wraps the Telerik MCP server and starts it automatically - no manual mcp.json configuration required.

VS Code Copilot Claude Code GitHub Copilot CLI

Agent Plugins is a preview feature in VS Code. It requires VS Code 1.100 or later with the chat.plugins.enabled: true setting.

To install the Telerik UI for Blazor AI Plugin:

Ensure you have a supported license and set up your Telerik license key globally on your machine.
Open VS Code Settings (Cmd+, / Ctrl+,) and search for chat.marketplaces.
Add the telerik/ai-plugins marketplace entry, or add it directly via settings.json:
JSON
```
"chat.plugins.marketplaces": ["telerik/ai-plugins"]
```
Press F1 and select Chat: Manage Plugin Marketplaces.
Select telerik/ai-plugins -> Show plugins.
In the Agent Plugins tab, find telerik-blazor-plugin and click Install.

Ensure you have a supported license and set up your Telerik license key globally on your machine.
Add the telerik/ai-plugins marketplace, then install the plugin:

/plugin marketplace add telerik/ai-plugins
/plugin install telerik-blazor-plugin@telerik-ai-plugins

While a session is running, reload plugins after any local changes with /reload-plugins.

Requires Claude Code with plugin support.

Ensure you have a supported license and set up your Telerik license key globally on your machine.
Add the marketplace and install the plugin:

copilot plugin marketplace add telerik/ai-plugins
copilot plugin install telerik-blazor-plugin@telerik-ai-plugins

To refresh after changes, exit and reopen the session or run /restart.

Requires GitHub Copilot CLI.

Once installed, invoke the UI Generator skill in the IDE chat interface:

TEXT

/telerik-blazor-plugin:telerik-blazor-ui-generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.

If you already have the Telerik MCP server configured in your IDE, disable or remove it before installing the plugin. The plugin wraps the same MCP server and starts it automatically — running both simultaneously may cause conflicts and increased token usage.

The manual setup is an alternative to configuring the Telerik MCP Server through the Telerik CLI or the Telerik AI Plugin.

Ensure you have a supported license and set up your Telerik license key globally on your machine or in the .mcp.json configuration. The server automatically recognizes your license and activates the available MCP tools.

Create/update the .mcp.json file in the root folder of your solution (if you are using Visual Studio), or the mcp.json file in your workspace (if you are using Visual Studio Code or Cursor):

Visual Studio Visual Studio Code Cursor .NET 8 and 9 Manual Setup

For more information about using MCP servers in Visual Studio, refer to Use MCP servers in Visual Studio.

JSON

{
  "servers": {
    "telerik-blazor-mcp": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.Blazor.MCP", "--yes"],
      // set any of the arguments in the 'env' configuration below, if you haven't set up your license file globally 
      //"env": {
      //  "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
      //  // or
      //  "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      //}
    }
  },
  "inputs": []
}

To add the Telerik MCP server globally for Visual Studio, manually create an .mcp.json file with the content posted above in your user folder.

For more information about using MCP servers in Visual Studio Code, refer to Use MCP servers in VS Code.

To enable the Telerik MCP Server in a specific in a specific workspace or Blazor app, add a .vscode folder with an mcp.json file at the root of the workspace with the following content:

JSON

{
  "servers": {
    "telerik-blazor-mcp": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.Blazor.MCP", "--yes"],
      // set any of the arguments in the 'env' configuration below, if you haven't set up your license file globally 
      //"env": {
      //  "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
      //  // or
      //  "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      //}
    }
  }
}

To add the Telerik MCP server globally for Visual Studio Code, manually create an mcp.json file with the content posted above in your user folder.

For more information about using MCP servers in 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 with the following content:

JSON

{
  "mcpServers": {
    "telerik-blazor-mcp": {
      "type": "stdio",
      "command": "dnx",
      "args": ["Telerik.Blazor.MCP", "--yes"],
      // set any of the arguments in the 'env' configuration below, if you haven't set up your license file globally 
      //"env": {
      //  "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
      //  // or
      //  "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      //}
    }
  }
}

For .NET 8 and 9 projects, you can install the MCP server as a local tool without global installation. To enable the Telerik MCP Server in a specific Blazor app, add a .mcp.json file to the solution folder (if you are using Visual Studio), or an mcp.json file in your workspace (if you are using Visual Studio Code or Cursor).

Install the Telerik MCP server by executing the following command in any standard command-line interface (CLI) or terminal on your operating system:

bash

dotnet tool install Telerik.Blazor.MCP

MCP Configuration for VS Code .vscode/mcp.json using local tools:

JSON

{
   "servers": {
      "telerik-blazor-mcp": {
         "type": "stdio",
         "command": "dotnet",
         "args": ["tool", "run", "telerik-blazor-mcp"],
         // set any of the arguments in the 'env' configuration below, if you haven't set up your license file globally 
         //"env": {
         //  "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
         //  // or
         //  "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
         //}
      }
   },
   "inputs": []
}

You can customize the server name telerik-blazor-mcp as desired. The name helps distinguish the MCP server in your configuration and does not affect how you invoke the Agentic UI Generator in your prompt.

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.

Open the AI chat interface of your IDE and start your prompt with Telerik to make it more likely for the Agentic UI Generator orchestrator to get called. If you are using VS Code, then you can start your prompt with the #telerik_ui_generator handle to invoke the orchestrator:
TEXT
```
#telerik_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.
```

Use Cases

The Agentic UI Generator is designed to help with various development scenarios:

Generate 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
- Enhance existing dashboards by adding new sections.
- Insert new sections that match existing layout style and responsiveness.
Create and modify themes
Implement Responsive Layout
- Create new responsive pages and sections.
- Convert existing pages to be responsive for mobile and tablet views.

For a comprehensive collection of sample prompts covering general UI tasks, layout organization, component implementation, styling, accessibility, and icon selection, see the Agentic UI Generator Prompt Library.

While the Agentic UI Generator performs great with powerful models like Claude Sonnet 4.6, GPT-5.2, or Gemini 3 Pro, it also excels with smaller models as well (such as Haiku and GPT 5.1 mini).

Getting Started with the Agentic UI Generator

Prerequisites

Quick Start

Use Cases

See Also