Skip to content
Merged
Changes from 1 commit
Commits
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
305 changes: 206 additions & 99 deletions ai/mcp-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,145 +7,249 @@ tags: telerik,maui,ai,ai server,dotnetmaui,coding assistant
position: 1
---

# Telerik .NET MAUI MCP Server
# Telerik UI for .NET MAUI MCP Server

The Telerik MAUI [MCP (Model Context Protocol) Server](https://modelcontextprotocol.io/introduction) enhances your AI-powered development experience by providing specialized context about Telerik UI for .NET MAUI components.
The Telerik MAUI [MCP (Model Context Protocol) server](https://modelcontextprotocol.io/introduction) enhances your AI-powered development experience by providing specialized context about Telerik UI for .NET MAUI components.

This MCP server enables AI-powered IDEs and tools to generate more accurate, tailored code that leverages [Telerik UI for .NET MAUI components](https://www.telerik.com/maui-ui) and APIs. You can ask complex questions about Telerik components, request specific implementations, and generate comprehensive code solutions.

>tip The Telerik .NET MAUI MCP Server works in **Chat**(**Ask**) and **Agent** modes.
>tip The Telerik MAUI MCP server works in **Chat** (**Ask**) and **Agent** modes.


## Prerequisites

To use the Telerik MAUI MCP server, you need:

* [Node.js](https://nodejs.org/en) 18 or newer.
* An [MCP-compatible client](https://modelcontextprotocol.io/clients) that supports **MCP tools** (latest version recommended).
* [.NET](https://learn.microsoft.com/en-us/dotnet/core/whats-new/dotnet-8/overview) 8 or later, or [Node.js](https://nodejs.org/en) 18 or later.
* An [MCP-compatible client](https://modelcontextprotocol.io/clients) that supports MCP tools (latest version recommended).

@[template](/_contentTemplates/common/ai-coding-assistant.md#getting-started)

## Installation

Install the Telerik MAUI MCP server using npm:
Depending on your environment, you can install the Telerik MAUI MCP server in any of the following ways:

```bash
npm i @progress/telerik-maui-mcp
```
* By using the `dnx` script (.NET 10 or later only) or the `dotnet` CLI (.NET 8 and .NET 9)

### Configuration
```bash .NET 10
dnx Telerik.MAUI.MCP
```
```bash .NET 8/9
dotnet tool install Telerik.MAUI.MCP
```

Use these settings when configuring the server in your MCP client:
* By using npm:

| Setting | Value |
|---------|-------|
| Package Name | `@progress/telerik-maui-mcp` |
| Type | `stdio` (standard input/output transport) |
| Command | `npx` |
| Arguments | `-y` |
| Server Name | `telerik-maui-assistant` (customizable) |
```bash
npm i @progress/telerik-maui-mcp
```

### License Configuration
Next, make sure the configuration in your `mcp.json` is [correct](#configuring-mcp-json), and then [add your Telerik license](#configuring-your-license).

Add your [Telerik license key]({%slug set-up-your-license%}) as an environment parameter in your `mcp.json` file using one of these options:
### Configuring mcp.json

Option 1: License File Path (Recommended)
Use the settings in the following table to configure the Telerik MAUI MCP server in the [`mcp.json` file](https://code.visualstudio.com/docs/copilot/customization/mcp-servers) of your code editor. Select the correct value based on your development environment.

```json
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE"
}
```
| Setting Name | .NET 10 Value | .NET 8 / .NET 9 Value | Node.js Value |
|---------|---------------|-----------------------|---------------|
| Package Name | `"Telerik.MAUI.MCP"` | `"Telerik.MAUI.MCP"` | `"@progress/telerik-maui-mcp"` |
| Type | `"stdio"` | `"stdio"` | `"stdio"` |
| Command | `"dnx"` | `"dotnet"` | `"npx"` |
| Arguments | `"Telerik.MAUI.MCP", "--yes"` | `"tool", "run", "telerik-maui-mcp"` | `"-y"` |
| Server Name | `"telerik-maui-assistant"` | `"telerik-maui-assistant"` | `"telerik-maui-assistant"` |

Option 2: Direct License Key
### Configuring Your License

```json
"env": {
"TELERIK_LICENSE": "YOUR_LICENSE_KEY_HERE"
}
```
An active Telerik UI for .NET MAUI license is required to use the Telerik MAUI MCP server. Add your [Telerik license key]({%slug set-up-your-license%}) as an environment variable in your `mcp.json` file using one of these options:

> Option 1 is recommended unless you're sharing settings across different systems. Remember to [update your license key]({%slug set-up-your-license%}#updating-your-license-key) when necessary.
* As a license file path (recommended)

## Visual Studio
```json
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE"
}
```

For complete setup instructions, see [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
* As a license key value

> Early Visual Studio 17.14 versions require the Copilot Chat window to be open when opening a solution for the MCP server to work properly.
```json
"env": {
"TELERIK_LICENSE": "YOUR_LICENSE_KEY_HERE"
}
```

### Workspace-Specific Setup:
> Using a license file path is recommended unless you're sharing settings across different systems. Remember to [update your license key]({%slug set-up-your-license%}#updating-your-license-key) when necessary.

1. Add `.mcp.json` to your solution folder:
## Visual Studio

```json
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-maui-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
> * Early Visual Studio 17.14 versions require the Copilot Chat window to be open when a solution loads for the MCP server to work properly.
> * For complete setup instructions, see [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).

1. Add an `.mcp.json` file to either of the following locations:

* For a workspace-specific setup, add the file to the solution's folder.
* For a global setup, add the file to your user directory, `%USERPROFILE%` (for example, `C:\Users\YourName\.mcp.json`).

```json .NET 10
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dnx",
"args": ["Telerik.MAUI.MCP", "--yes"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
```json .NET 8/9
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dotnet",
"args": ["tool", "run", "telerik-maui-mcp"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
```json Node.js
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-maui-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```

2. Restart Visual Studio.
3. Enable the `telerik-maui-assistant` tool in the [Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server).

### Global Setup:

Add the `.mcp.json` file to your user directory (`%USERPROFILE%`, e.g., `C:\Users\YourName\.mcp.json`).
3. Enable the Telerik MAUI MCP server in the [Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server).

## Visual Studio Code

For complete setup instructions, see [Use MCP servers in Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).

> Visual Studio Code 1.102.1 or newer is required to use the Telerik MCP Server

The basic setup in Visual Studio Code follows these steps:

1. Enable [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) in Visual Studio Code settings.
2. Create `.vscode/mcp.json` in your workspace root (or user folder for global setup):

```json
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-maui-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
> * Visual Studio Code 1.102.1 or later is required to use the Telerik MAUI MCP Server.
> * For complete setup instructions, see [Use MCP servers in Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).

The basic setup in Visual Studio Code involves the following steps:

1. Enable [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) in the Visual Studio Code settings.
2. Create a `.vscode/mcp.json` file in your workspace root (or user folder for global setup):

```json .NET 10
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dnx",
"args": ["Telerik.MAUI.MCP", "--yes"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
```json .NET 8/9
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dotnet",
"args": ["tool", "run", "telerik-maui-mcp"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
```json Node.js
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-maui-mcp@latest"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```

3. For global discovery, enable [`chat.mcp.discovery.enabled`](vscode://settings/chat.mcp.discovery.enabled) in `settings.json`:

```json
{
"chat.mcp.discovery.enabled": true
}
```
```json
{
"chat.mcp.discovery.enabled": true
}
```

4. Restart Visual Studio Code.

## Cursor

For complete setup instructions, see [Model Context Protocol](https://docs.cursor.com/context/mcp).
> For complete setup instructions, see [Model Context Protocol](https://docs.cursor.com/context/mcp).

Create `.cursor/mcp.json` in your workspace root (or user folder for global setup):
Create a `.cursor/mcp.json` file in your workspace root (or user folder for global setup):

```json
```json .NET 10
{
"mcpServers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dnx",
"args": ["Telerik.MAUI.MCP", "--yes"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
```json .NET 8/9
{
"mcpServers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dotnet",
"args": ["tool", "run", "telerik-maui-mcp"],
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
// or
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
}
}
}
}
```
```json Node.js
{
"mcpServers": {
"telerik-maui-assistant": {
Expand All @@ -164,7 +268,9 @@ Create `.cursor/mcp.json` in your workspace root (or user folder for global setu

## Usage

To use the Telerik MCP Server:
By default, MCP clients do not call MCP tools in a deterministic way. Some MCP clients like VS Code allow you to explicitly reference the desired MCP tool in your prompt.

To use the Telerik MAUI MCP server:

1. Start your prompt with one of these triggers:
- `#telerik`
Expand All @@ -178,18 +284,19 @@ To use the Telerik MCP Server:

3. Grant permissions when prompted (per session, workspace, or always).

4. Start fresh sessions for unrelated prompts to avoid context pollution.
5. Use in **Chat**(**Ask**) and **Agent** modes.
4. Start a fresh session for unrelated prompts to avoid context pollution.

5. Use in **Chat** (**Ask**) and **Agent** modes.

### Improving Server Usage

To increase the likelihood of the Telerik MCP server being used, add custom instructions to your AI tool:
To increase the likelihood of the Telerik MAUI MCP server being used, add custom instructions to your AI tool:
- [GitHub Copilot custom instructions](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat)
- [Cursor rules](https://docs.cursor.com/context/rules)

### Sample Prompts

The following examples demonstrate useful prompts for the Telerik .NET MAUI MCP Server:
The following examples demonstrate useful prompts for the Telerik MAUI MCP server:

* "`#telerik-maui-assistant Create new maui project with Telerik. Add sample usage of the DataGrid component.`"
* "`#telerik-maui-assistant Create a DataGrid with 3 columns - Name, Country, City. Add the corresponding business object in the code behind and populate it with sample data. Add 20 entries to the data.`"
Expand All @@ -203,9 +310,9 @@ The following examples demonstrate useful prompts for the Telerik .NET MAUI MCP

You can use the Telerik MAUI MCP server with local large language models (LLMs):

1. Run a local model, for example, through [Ollama](https://ollama.com).
1. Run a local model, for example, [Ollama](https://ollama.com).
2. Use a bridge package like [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge).
3. Connect your local model to the Telerik MCP server.
3. Connect your local model to the Telerik MAUI MCP server.

This setup allows you to use the Telerik AI Coding Assistant without cloud-based AI models.

Expand Down
Loading