Skip to content

Commit f544fdc

Browse files
dimodidimodi
committed
Complete AI Code Assistant docs
1 parent d0b36e5 commit f544fdc

11 files changed

+256
-83
lines changed

‎ai/ai-coding-assistant.md

-60
This file was deleted.

‎ai/coding-assistant.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: Copilot Extension
3+
page_title: Telerik Blazor GitHub Copilot Extension
4+
description:
5+
slug: ai-coding-assistant
6+
tags: telerik,blazor,ai
7+
published: True
8+
position: 10
9+
---
10+
11+
# Telerik Blazor GitHub Copilot Extension
12+
13+
The Telerik Blazor [GitHub Copilot](https://github.com/features/copilot) extension provides proprietary Telerik UI for Blazor context. The extension can help you reach new levels of developer productivity by providing useful tips and generating tailored code snippets that include Telerik UI for Blazor components and API.
14+
15+
## Prerequisites
16+
17+
To use the Telerik GitHub Copilot extension for Blazor, you need to have:
18+
19+
* An active [GitHub Copilot](https://github.com/features/copilot) subscription. You can enable or configure GitHub Copilot on the [Copilot Settings page in your GitHub account](https://github.com/settings/copilot).
20+
* A [Telerik user account](https://www.telerik.com/account/).
21+
* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
22+
23+
## Installation
24+
25+
To install the Telerik Blazor Copilot extension:
26+
27+
1. Go the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page and click the **Install** button.
28+
1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. Normally, select your GitHub account.
29+
1. Click the **Install & Authorize** button. This will authorize the GitHub Copilot extension to integrate with your GitHub account.
30+
1. Enter your GitHub password.
31+
1. You will be redirected to telerik.com. Enter your Telerik account credentials if prompted. This will authorize the GitHub Copilot extension to integrate with your Telerik account.
32+
1. Upon successful Telerik authentication, you will be redirected once again to a page that confirms successful Copilot extension installation.
33+
1. Restart your [Copilot-enabled apps](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio and VS Code).
34+
1. Start a new chat session in Copilot.
35+
36+
## Usage
37+
38+
To use the Telerik Blazor Copilot extension:
39+
40+
1. Open the GitHub Copilot chat window in your [Copilot-enabled app](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio or VS Code).
41+
1. Make sure you are in **Ask** mode and not in **Edit** or **Agent** mode. The Edit and Agent mode do not use the Telerik Copilot extension. However, the Agent mode can use the [Telerik Blazor MCP server](slug:ai-mcp-server).
42+
1. Start your prompt with `@telerikblazor` and type your request. Make sure that `@telerikblazor` is recognized and highlighted, otherwise the extension may not be installed.
43+
1. Verify that you see **TelerikBlazor working...** in the output.
44+
1. Grant permission to the Telerik Blazor extension to read your workspace files.
45+
1. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information.
46+
47+
### Sample Prompts
48+
49+
The following list describes how your prompts may look like:
50+
51+
* `@telerikblazor` Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data.
52+
* `@telerikblazor` What is DebounceDelay for the Telerik TextBox?
53+
* `@telerikblazor` Why am I getting a TelerikBlazor was undefined JavaScript error?
54+
55+
## Number of Requests
56+
57+
> The usage limits below will take place after after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests.
58+
59+
The Telerik Blazor Copilot extension allows the following maximum number of requests, depending on your license type:
60+
61+
* Perpetual licenses: 50 requests per year
62+
* Subscription licenses: 300 requests per day
63+
* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests.
64+
65+
> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik Copilot extension and the Telerik MCP server both take up from the same usage quota.
66+
67+
## See Also
68+
69+
* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials)
70+
* [Telerik Blazor MCP Server](slug:ai-mcp-server)

‎ai/mcp-server.md

+178-15
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,202 @@
11
---
22
title: MCP Server
3-
page_title: Telerik MCP Server
3+
page_title: Telerik Blazor MCP Server
44
description:
55
slug: ai-mcp-server
66
tags: telerik,blazor,ai
77
published: True
8-
position: 10
8+
position: 20
99
---
1010

11-
# Telerik MCP Server
11+
# Telerik Blazor MCP Server
1212

13-
Telerik UI for Blazor provides a [GitHub Copilot](https://github.com/features/copilot) extension. If you are using GitHub Copilot, the extension can generate code snippets that include Telerik UI for Blazor components and API.
13+
The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) enables you achieve interation with AI and reach new levels of developer productivity. The MCP server provides proprietary context to AI-powered IDEs, apps and tools. You can use the Telerik Blazor MCP server to ask about Telerik UI for Blazor components, features, or general usage. You can successfully prompt more complex questions and tasks, and generate tailored code that includes Telerik UI for Blazor components and API.
1414

1515
## Prerequisites
1616

17+
To use the Telerik Blazor MCP server, you need:
18+
19+
* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*.
20+
* A [Telerik user account](https://www.telerik.com/account/).
21+
* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
22+
1723
## Installation
1824

19-
The [Agent mode of GitHub Copilot](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) allows you to prompt AI for more complex tasks that require a multi-step process and affect more files.
25+
Use the documentation of your AI-powered MCP client to add the Telerik MCP server to a specific workspace or globally. You can see installation tips and examples for some popular MCP clients below.
26+
27+
The generic settings of the Telerik Blazor MCP server are:
28+
29+
* Server name: `telerik-blazor-assistant`
30+
* Type: `stdio` (standard input/output transport)
31+
* Command: `npx` (the MCP server works through an npm package)
32+
* Supported arguments: `-y`
33+
* npm package name: `@progress/telerik-blazor-mcp`
34+
* You also need to add your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the `mcp.json` file. There are two options:
35+
* (recommended) Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location.
36+
* Use a `TELERIK_LICENSE_KEY` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary.
37+
38+
### Visual Studio
39+
40+
Refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
41+
42+
To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder.
43+
44+
> caption SOLUTIONDIR/.mcp.json
45+
46+
````JSON.skip-repl
47+
{
48+
"inputs": [
49+
// ...
50+
],
51+
"servers": {
52+
"telerik-blazor-assistant": {
53+
"type": "stdio",
54+
"command": "npx",
55+
"args": ["-y", "@progress/telerik-blazor-mcp"],
56+
"env": {
57+
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
58+
}
59+
}
60+
}
61+
}
62+
````
63+
64+
To enable automatic global discovery of the Telerik MCP Server in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`.
65+
66+
### VS Code
67+
68+
Refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
69+
70+
To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.vscode` folder with an `mcp.json` file at the root of the workspace:
71+
72+
>caption .vscode/mcp.json at the workspace root
73+
74+
````JSON.skip-repl
75+
{
76+
"servers": {
77+
"telerik-blazor-assistant": {
78+
"type": "stdio",
79+
"command": "npx",
80+
"args": ["-y", "@progress/telerik-blazor-mcp"],
81+
"env": {
82+
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
83+
}
84+
}
85+
}
86+
}
87+
````
88+
89+
To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.json` file](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings):
90+
91+
>caption VS Code settings.json
2092
21-
To use the Telerik MCP server in Copilot Agent mode:
93+
````JSON.skip-repl
94+
{
95+
// ...
96+
"chat.mcp.discovery.enabled": true,
97+
"mcp": {
98+
"inputs": [
99+
// ...
100+
],
101+
"servers": {
102+
"telerik-blazor-assistant": {
103+
"type": "stdio",
104+
"command": "npx",
105+
"args": ["-y", "@progress/telerik-blazor-mcp"],
106+
"env": {
107+
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
108+
}
109+
}
110+
}
111+
}
112+
}
113+
````
22114

23-
1. Create a `.vscode/mcp.json` file in your workspace (application root).
24-
1. Go to the [`telerik-blazor-mcp`](https://www.npmjs.com/package/@progress/telerik-blazor-mcp?activeTab=readme) npm package page and copy-paste the contents of `mcp.json`.
25-
1. At the bottom of the Copilot Chat pane, select **Agent** from the dropdown that contains **Ask**, **Edit**, and **Agent**.
115+
### Cursor
26116

27-
> Do not click the **Add Server** button at the bottom-right of the open JSON file.
28-
> Do not execute `npm install @progress/telerik-blazor-mcp` manually.
29-
> Do not use `@telerikblazor` in your prompts, because the Copilot Agent mode does not use extensions.
117+
Refer to [Model Context Protocol](https://docs.cursor.com/context/model-context-protocol).
118+
119+
To [enable the Telerik MCP Server in a specific workspace](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-workspace) or Blazor app, add a `.cursor` folder with an `mcp.json` file at the root of the workspace.
120+
121+
>caption .cursor/mcp.json at the workspace root
122+
123+
````JSON.skip-repl
124+
{
125+
"mcpServers": {
126+
"telerik-blazor-assistant": {
127+
"type": "stdio",
128+
"command": "npx",
129+
"args": ["-y", "@progress/telerik-blazor-mcp"],
130+
"env": {
131+
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
132+
}
133+
}
134+
}
135+
}
136+
````
137+
138+
To [add the Telerik MCP Server globally for Cursor](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings), add a `.cursor` folder with an `mcp.json` file in your user folder:
139+
140+
>caption .cursor/mcp.json inside your user folder
141+
142+
````JSON.skip-repl
143+
{
144+
"mcpServers": {
145+
"telerik-blazor-assistant": {
146+
"type": "stdio",
147+
"command": "npx",
148+
"args": ["-y", "@progress/telerik-blazor-mcp"],
149+
"env": {
150+
"TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
151+
}
152+
}
153+
}
154+
}
155+
````
30156

31157
## Usage
32158

33-
Start your prompt with `@TelerikBlazor` and type your request.
159+
To use the Telerik MCP Server:
160+
161+
1. Start your prompt with one of the following:
162+
* `telerik`
163+
* `/telerik`
164+
* `@telerik`
165+
* `telerikblazor`
166+
* `/telerikblazor`
167+
* `@telerikblazor`
168+
1. Confirm that the Telerik MCP server is used, because this doesn't happen deterministically. Look for a statement in the output, which is similar to:
169+
* `Running telerik-blazor-assistant` (in VS Code)
170+
* `Calling MCP tool telerik-blazor-assistant` (in Cursor)
171+
172+
If the Telerik MCP server is not used even though it's installed and enabled, then try rephrasing your prompt and use another trigger syntax from the list in step 1.
173+
1. Grant the Telerik tool a permission to run for this session, workspace, or always.
174+
1. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information.
175+
176+
To increase the probability of the Telerik MVC Server being used, or to call it without the need to mention "telerik" explicitly, add custom instructions to your AI-powered tool. Here are examples for [GitHub Copilot](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat) and [Cursor](https://docs.cursor.com/context/rules).
177+
178+
### Sample Prompts
179+
180+
The following list describes how your prompts may look like:
181+
182+
* Telerik Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model that is defined in the same .razor file and provide dummy data.
183+
* Telerik What is DebounceDelay for the Telerik TextBox?
184+
* Telerik Why am I getting a TelerikBlazor was undefined JavaScript error?
185+
186+
## Number of Requests
187+
188+
> The usage limits below will take place after after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests.
189+
190+
The Telerik Blazor MCP Server allows the following maximum number of requests, depending on your license type:
191+
192+
* Perpetual licenses: 50 requests per year
193+
* Subscription licenses: 300 requests per day
194+
* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests.
34195

35-
If you want to prompt for code that is not related to your previous prompts, then use a new Chat, so that the new context is not polluted by irrelevant old information.
196+
> One prompt may trigger several requests to the MCP server, depending on the complexity.
197+
>
198+
> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik MCP server and the Telerik Copilot extension both take up from the same usage quota.
36199
37200
## See Also
38201

39-
* [Telrik Blazor extension for GitHub Copilot](slug:ai-tooling-ai-coding-assistant).
202+
* [Telerik Blazor extension for GitHub Copilot](slug:ai-coding-assistant)

‎docs-builder.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -592,7 +592,7 @@ meta:
592592
title: Common Features
593593
position: 15
594594
ai:
595-
title: AI Tooling
595+
title: AI Coding Assistant
596596
position: 14
597597
styling-and-themes:
598598
title: Styling and Themes

‎getting-started/client-blazor.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ If you prefer video instructions, you can also check the video tutorial below.
109109

110110
## Next Steps
111111

112-
* Use the [Telerik Blazor MCP server](slug:ai-tooling-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-tooling-ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API.
112+
* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API.
113113

114114
## See Also
115115

‎getting-started/hybrid-blazor.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ Refer to the following articles for more information on each technology stack:
127127
## Next Steps
128128

129129
* [Explore the specifics of Telerik UI for Blazor in native MAUI](slug:hybrid-blazor-apps)
130-
* Use the [Telerik Blazor MCP server](slug:ai-tooling-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-tooling-ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API.
130+
* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API.
131131

132132
## See Also
133133

‎getting-started/vs-code-integration/introduction.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,4 @@ To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `C
3030

3131
## See Also
3232

33-
* [Telerik GitHub Copilot extension for Blazor](slug:ai-tooling-ai-coding-assistant)
33+
* [Telerik GitHub Copilot extension for Blazor](slug:ai-coding-assistant)

‎getting-started/vs-integration/introduction.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,4 @@ To access the Telerik Visual Studio extension, go to the **Extensions** > **Tele
3535
* [Creating New Projects with Visual Studio](slug:getting-started-vs-integration-new-project)
3636
* [Converting Existing Projects with Visual Studio](slug:getting-started-vs-integration-convert-project)
3737
* [Downloading the Latest Telerik UI for Blazor Versions](slug:getting-started-vs-integration-latest-version)
38-
* [Telerik GitHub Copilot extension for Blazor](slug:ai-tooling-ai-coding-assistant)
38+
* [Telerik GitHub Copilot extension for Blazor](slug:ai-coding-assistant)

‎getting-started/web-app.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a
123123

124124
## Next Steps
125125

126-
* Use the [Telerik Blazor MCP server](slug:ai-tooling-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-tooling-ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API.
126+
* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-coding-assistant) to generate code snippets that include Telerik UI for Blazor components and API.
127127

128128
## See Also
129129

0 commit comments

Comments
 (0)