Getting Started with the Agentic UI Generator
The Agentic UI Generator is an intelligent development tool delivered through the Telerik ASP.NET Core 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 set up locally and get started in minutes—follow the Quick Start guide to configure your local environment through the Telerik CLI.
Prerequisites
To use the Telerik ASP.NET Core MCP server, you need:
- .NET 8 or newer.
- A compatible MCP client, such as VS Code or Cursor, with support for 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 ASP.NET Core to an existing one.
Follow these steps to set up the Agentic UI Generator and use it in your IDE:
-
Install the Telerik CLI globally by executing the following command in any standard command-line interface (CLI) or terminal on your operating system:
SHdotnet tool install -g Telerik.CLI -
Configure the Telerik NuGet feed, activate or update your Telerik license, and set up the Telerik MCP server with the Telerik CLI:
SHtelerik setup aspnetcoreSHdotnet tool install Telerik.AspNetCore.MCP telerik setup aspnetcore -
(Optional) If you want to use the Agentic UI Generator in a new Telerik ASP.NET Core app, then create it with the Telerik CLI or the Telerik UI for ASP.NET Core project templates.
The manual setup is an alternative to configuring the Telerik MCP Server through the Telerik CLI.
-
Ensure you have a supported license and set up your Telerik license key globally on your machine or in the
.mcp.jsonconfiguration. The server automatically recognizes your license and activates the available MCP tools. -
Create or update the
.mcp.jsonfile in the root folder of your solution (if you are using Visual Studio), or themcp.jsonfile in your workspace (if you are using Visual Studio Code or Cursor):For more information about using MCP servers in Visual Studio, refer to Use MCP servers in Visual Studio.
JSON{ "servers": { "telerik-aspnetcore-mcp": { "type": "stdio", "command": "dnx", "args": ["Telerik.AspNetCore.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.jsonfile 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 workspace or ASP.NET Core app, add a
.vscodefolder with anmcp.jsonfile at the root of the workspace with the following content:JSON{ "servers": { "telerik-aspnetcore-mcp": { "type": "stdio", "command": "dnx", "args": ["Telerik.AspNetCore.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.jsonfile 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 ASP.NET Core app, add a
.cursorfolder with anmcp.jsonfile at the root of the workspace with the following content:JSON{ "mcpServers": { "telerik-aspnetcore-mcp": { "type": "stdio", "command": "dnx", "args": ["Telerik.AspNetCore.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 installing it globally. To enable the Telerik MCP Server in a specific ASP.NET Core app, add a
.mcp.jsonfile to the solution folder (if you are using Visual Studio), or anmcp.jsonfile 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:
bashdotnet tool install Telerik.AspNetCore.MCP- Configure MCP in VS Code with local tools by using
.vscode/mcp.json:
JSON{ "servers": { "telerik-aspnetcore-mcp": { "type": "stdio", "command": "dotnet", "args": ["tool", "run", "telerik-aspnetcore-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-aspnetcore-mcpas 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 your IDE's AI chat interface and begin your prompt with
Telerikto increase the likelihood that the Agentic UI Generator orchestrator is called. In VS Code, you can start your prompt with the#telerik_ui_generatorhandle 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 ASP.NET Core 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 Claude Haiku 4.5 and GPT 5.1 mini).