Skip to content

docs: add tabbed ide configurations #12900 #3443

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
IvanDanchev merged 2 commits into from
Jan 15, 2026
Merged

docs: add tabbed ide configurations #12900 #3443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4be28af
docs: add tabbed ide configurations #12900
IvanDanchev Jan 15, 2026
546f097
docs: add pr review suggestions #12900
IvanDanchev Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions ai/agentic-ui-generator/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,7 @@ Follow these steps to set up the Agentic UI Generator:

The server name `telerik-blazor-mcp` can be customized as desired. The name helps distinguish the MCP server in your configuration and does not affect how you invoke the generator tool in your prompt.

> For more details on how to configure the MCP server, refer to the instructions for your specific IDE below:
> * [Visual Studio](slug:ai-installation#visual-studio)
> * [Visual Studio Code](slug:ai-installation#visual-studio-code)
> * [Cursor](slug:ai-installation#cursor)
> For IDE-specific setup instructions and advanced configuration options, see [MCP Server Configuration](slug:ai-installation#mcp-clients-configuration).

1. Ensure you have a [supported license]({% slug ai-overview#license-requirements %}) 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 appropriate tools]({% slug ai-overview#ai-tools-overview-and-comparison %}).

Expand Down
5 changes: 1 addition & 4 deletions ai/ai-coding-assistant/mcp-server.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,7 @@ Follow these steps to set up the AI Coding Assistant:
````
The server name `telerik-blazor-mcp` can be customized as desired. The name helps distinguish the MCP server in your configuration and does not affect how you invoke the AI Code Assistant in your prompt.

> For more details on how to configure the MCP server, refer to the instructions for your specific IDE below:
> * [Visual Studio](slug:ai-installation#visual-studio)
> * [Visual Studio Code](slug:ai-installation#visual-studio-code)
> * [Cursor](slug:ai-installation#cursor)
> For IDE-specific setup instructions and advanced configuration options, see [MCP Server Configuration](slug:ai-installation#mcp-clients-configuration).

1. Ensure you have a [supported license]({% slug ai-overview#license-requirements %}) 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 appropriate tools]({% slug ai-overview#ai-tools-overview-and-comparison %}).

Expand Down
18 changes: 14 additions & 4 deletions ai/installation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Use the documentation of your AI-powered MCP client to enable the Telerik MCP Se

* Server name: `telerik-blazor-mcp` (an arbitrary name that depends on your preferences)
* Type: `stdio` (standard input/output transport)
* Command: `dnx` (the MCP server works through a NuGet package). The `dnx` value is valid when setting up the MCP Server on .NET 10. For .NET 8 or 9, see [.NET 8 and 9 Local Tool Installation](#-net-8-and-9-local-tool-installation)
* Command: `dnx` (the MCP server works through the [Telerik.Blazor.MCP](https://www.nuget.org/packages/Telerik.Blazor.MCP) NuGet package). The `dnx` value is valid when setting up the MCP Server on .NET 10. For .NET 8 or 9, see [.NET 8 and 9 Local Tool Installation](#-net-8-and-9-local-tool-installation)
* Supported arguments: `--yes`
* NuGet package name: `Telerik.Blazor.MCP`

Expand All @@ -59,7 +59,12 @@ When configured locally, you have to define either one of the following argument
* `TELERIK_LICENSE_PATH`—The full path to your license file location, including the license file name itself.
* `TELERIK_LICENSE`—Paste your license key directly. Make sure to update the license key when necessary.

### Visual Studio
### MCP Clients Configuration

Below you can find installation tips and MCP server configuration for some popular MCP clients.

<TabStrip>
<TabStripTab title="Visual Studio">

Refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/copilot/visual-studio-github-copilot-extension?view=vs-2022#model-context-protocol-mcp-support).

Expand Down Expand Up @@ -90,7 +95,8 @@ To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` fil

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.

### Visual Studio Code
</TabStripTab>
<TabStripTab title="Visual Studio Code">

Refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/copilot-mcp-architecture).

Expand Down Expand Up @@ -132,7 +138,8 @@ To use the Agentic UI Generator in all workspaces and apps, make sure that [`cha

After adding the configuration, restart your IDE to load the Agentic UI Generator.

### Cursor
</TabStripTab>
<TabStripTab title="Cursor">

Refer to [Model Context Protocol](https://cursor.com/docs/context/mcp), which enables Cursor to connect to external tools.

Expand All @@ -158,6 +165,9 @@ To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.
}
````

</TabStripTab>
</TabStrip>

### .NET 8 and 9 Local Tool Installation

For .NET 8 and 9 projects, you can install the MCP server as a local tool without global installation:
Expand Down
65 changes: 57 additions & 8 deletions ai/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ The Telerik Blazor MCP Server improves your developer experience and increases y

The Telerik Blazor MCP Server is a local MCP server that operates in two modes based on your Telerik license: **Agentic UI Generator** (for DevCraft Complete or Ultimate subscription licenses) and **AI Coding Assistant** (for Telerik UI for Blazor or DevCraft UI subscription licenses).

The server is distributed via NuGet, which provides robust package management, streamlined authentication with your Telerik license key, and seamless integration with .NET development workflows.
The server is distributed via the ([Telerik.Blazor.MCP](https://www.nuget.org/packages/Telerik.Blazor.MCP)) NuGet package, which provides robust package management, streamlined authentication with your Telerik license key, and seamless integration with .NET development workflows.

## General Workflow

Expand All @@ -32,14 +32,63 @@ For tool-specific usage guidance, visit the [Agentic UI Generator Getting Starte

## AI Tools Overview and Comparison

The Telerik Blazor MCP server supports two modes of operation that depend on your Telerik license type:
* Agentic UI Generator&mdash;This mode provides advanced capabilities for building complete user interfaces with responsive layouts and custom theming.
* AI Coding Assistant&mdash;A mode designed for streamlined component integration and configuration tasks.
* Agentic UI Generator&mdash;This tool provides advanced capabilities for building complete user interfaces with responsive layouts and custom theming.
* AI Coding Assistant&mdash;A tool designed for streamlined component integration and configuration tasks.

<table>
<colgroup>
<col width="20%" />
<col width="30%" />
<col width="35%" />
</colgroup>
<thead>
<tr>
<th></th>
<th>Agentic UI Generator</th>
<th>AI Coding Assistant</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Orchestrator Tool</strong></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
</tr>
<tr>
<tr>
<td><strong>Component Tool</strong></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
</tr>
<tr>
<td><strong>Icon Tool</strong></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
</tr>
<tr>
<td><strong>Layout Tool</strong></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
<td>No</td>
</tr>
<tr>
<td><strong>Styling Tool</strong></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
<td>No</td>
</tr>
<tr>
<td><strong>Validator Tool</strong></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
<td><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg></td>
</tr>
<tr>
<td><strong>Scope</strong></td>
<td>Complete pages, dashboards with layout, styling, components, and responsivenes.</td>
<td>Individual components with proper data binding and configuration.</td>
</tr>
</tbody>
</table>


| Mode | Available With | When to Use | What it Generates | Included Tools |
|------|----------------|----------------|----------------|----------------|
| Agentic UI Generator | [DevCraft Complete or DevCraft Ultimate](https://www.telerik.com/purchase.aspx?filter=dotnet#product-bundles) subscription license | - Build complete pages, dashboards, or entire UI sections from scratch. <br>- Apply comprehensive styling, theming, and responsive design. <br>- Create a full visual design with layout and theme | Individual components with proper data binding and configuration. Complete pages with layout, styling, components, and responsiveness | - UI Generator <br>- Component Tool <br>- Layout Tool <br>- Icon Tool <br>- Style Tool <br>- Validator Tool |
| AI Coding Assistant | [Telerik UI for Blazor](https://www.telerik.com/purchase.aspx?filter=dotnet#individual-products) or [DevCraft UI](https://www.telerik.com/purchase.aspx?filter=dotnet#product-bundles) subscription license | - Add or configure individual Telerik UI for Blazor components.<br>- Ask component-specific questions (APIs, properties, events).<br>- Find icons for your buttons and components.| Individual components with proper data binding and configuration | - Orchestrator<br>- Component Tool<br>- Icon Tool<br>- Validator Tool |

## License Requirements

Expand Down
Loading