Skip to content
Open
Changes from all commits
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
271 changes: 176 additions & 95 deletions ai/mcp-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,145 +7,223 @@ 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-assistant"` | `"-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.

> 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.
* When installing the MCP server by using the .NET tooling (`dnx` or `dotnet tool install`), the [license key file]({%slug set-up-your-license%}) will be retrieved automatically if it is present in the default directory on your system (`%AppData%\Telerik\telerik-license.txt` on Windows and `~/.telerik/telerik-license.txt` on Linux.). No additional action is required.
* When using the .NET tooling, but your [license key file]({%slug set-up-your-license%}) is not in the default directory, use one of the options below.
* When using Node.js, add your [license key file]({%slug set-up-your-license%}) as an environment variable in your `mcp.json` file using one of the options below:

## Visual Studio
* As a license file path (recommended)

For complete setup instructions, see [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
```json
"env": {
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE"
}
```

> 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.
* As a license key value

### Workspace-Specific Setup:
```json
"env": {
"TELERIK_LICENSE": "YOUR_LICENSE_KEY_HERE"
}
```

1. Add `.mcp.json` to your solution folder:
> 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.

```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

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).
> * 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).

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

Add the `.mcp.json` file to your user directory (`%USERPROFILE%`, e.g., `C:\Users\YourName\.mcp.json`).
* 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`).

## Visual Studio Code
```json .NET 10
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dnx",
"args": ["Telerik.MAUI.MCP", "--yes"],
}
}
}
```
```json .NET 8/9
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dotnet",
"args": ["tool", "run", "telerik-maui-assistant"],
}
}
}
```
```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"
}
}
}
}
```

For complete setup instructions, see [Use MCP servers in Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
2. Restart Visual Studio.
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 1.102.1 or newer is required to use the Telerik MCP Server
## Visual Studio Code

The basic setup in Visual Studio Code follows these steps:
> * 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).

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):
The basic setup in Visual Studio Code involves the following steps:

```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"
}
}
}
}
```
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"],
}
}
}
```
```json .NET 8/9
{
"servers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dotnet",
"args": ["tool", "run", "telerik-maui-assistant"],
}
}
}
```
```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"],
}
}
}
```
```json .NET 8/9
{
"mcpServers": {
"telerik-maui-assistant": {
"type": "stdio",
"command": "dotnet",
"args": ["tool", "run", "telerik-maui-assistant"],
}
}
}
```
```json Node.js
{
"mcpServers": {
"telerik-maui-assistant": {
Expand All @@ -164,7 +242,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 +258,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 +284,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