Skip to content

Commit eee3a13

Browse files
dimodidimodi
authored
docs(common): Add AI code assistant docs (#2959)
* docs(Copilot): Initial commit * split to two pages * Complete AI Code Assistant docs * Rename Copilot extension file * polishing
1 parent f35dbc0 commit eee3a13

17 files changed

+303
-11
lines changed

‎ai/copilot-extension.md

Lines changed: 70 additions & 0 deletions
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: Learn how to add and use the Telerik Blazor GitHub Copilot extension for better developer productivity. The Telerik Blazor GitHub Copilot extension provides proprietary context about Telerik UI for Blazor to AI-powered software.
5+
slug: ai-copilot-extension
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 to 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 modes 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 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 [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):
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

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: MCP Server
3+
page_title: Telerik Blazor MCP Server
4+
description: Learn how to add and use the Telerik Blazor MCP Server for better developer productivity. The Telerik Blazor MCP server provides proprietary context about Telerik UI for Blazor to AI-powered software.
5+
slug: ai-mcp-server
6+
tags: telerik,blazor,ai
7+
published: True
8+
position: 20
9+
---
10+
11+
# Telerik Blazor MCP Server
12+
13+
The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) lets you interact 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.
14+
15+
## Prerequisites
16+
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+
23+
## Installation
24+
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+
For detailed instructions, 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+
For detailed instructions, 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
92+
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+
````
114+
115+
### Cursor
116+
117+
For detailed instructions, 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+
````
156+
157+
## Usage
158+
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 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 [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):
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.
195+
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.
199+
200+
## See Also
201+
202+
* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension)

‎common-features/adaptive-rendering.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Explore how the components with popup elements can react to the cha
55
slug: adaptive-rendering
66
tags: telerik,blazor,adaptive,rendering,mobile
77
published: True
8-
position: 1
8+
position: 10
99
---
1010

1111
# Adaptive Rendering

‎common-features/dimensions.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How dimensions work and are set in the Telerik UI for Blazor compon
55
slug: common-features/dimensions
66
tags: telerik,blazor,dimensions,width,height,percent,pixel
77
published: True
8-
position: 7
8+
position: 80
99
---
1010

1111
# Dimensions

‎common-features/icons.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ slug: common-features-icons
66
tags: telerik,blazor,icon,font,built-in
77
published: True
88
previous_url: /common-features/font-icons
9-
position: 1
9+
position: 20
1010
---
1111

1212
# Blazor SVG and Font Icons

‎common-features/input-adornments.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How to add prefix and suffix adornments in the input elements of th
55
slug: common-features/input-adornments
66
tags: telerik,blazor,input,adornments,prefix,suffix
77
published: True
8-
position: 2
8+
position: 30
99
---
1010

1111
# Input Adornments

‎common-features/input-validation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How to validate Blazor inputs.
55
slug: common-features/input-validation
66
tags: telerik,blazor,validation,data,annotation,form
77
published: True
8-
position: 3
8+
position: 40
99
---
1010
# Input Validation
1111

‎common-features/loading-sign.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Components that peform long running operations can show a loading i
55
slug: common-features-loading-sign
66
tags: telerik,blazor,loading,sign,busy,indicator,data
77
published: True
8-
position: 5
8+
position: 70
99
---
1010

1111
# Loading Sign

‎common-features/microsoft-extensions-ai-integration.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How to integrate the UI for Blazor components with Microsoft.Extens
55
slug: common-features-microsoft-extensions-ai-integration
66
tags: telerik,blazor,aiprompt,ai,extensions,integration
77
published: True
8-
position: 4
8+
position: 50
99
---
1010

1111
# Integration with Microsoft.Extensions.AI

‎docs-builder.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -591,6 +591,9 @@ meta:
591591
common-features:
592592
title: Common Features
593593
position: 15
594+
ai:
595+
title: AI Coding Assistant
596+
position: 14
594597
styling-and-themes:
595598
title: Styling and Themes
596599
position: 12

‎getting-started/client-blazor.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@ If you prefer video instructions, you can also check the video tutorial below.
107107

108108
<iframe width="560" height="315" src="https://www.youtube.com/embed/fwR8Yxe7DPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
109109

110+
## Next Steps
111+
112+
* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API.
113+
110114
## See Also
111115

112116
* [Workflow Details for Telerik UI for Blazor](slug:getting-started/what-you-need)

‎getting-started/hybrid-blazor.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +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-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API.
130131

131132
## See Also
132133

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,14 @@ The extension for Visual Studio Code provides the following advantages:
2020

2121
* It allows you to [add the Telerik Components to an existing project](slug:getting-started-vs-code-integration-convert-project ) with a few clicks.
2222

23-
24-
2523
## Get the Extension
2624

2725
@[template](/_contentTemplates/common/general-info.md#vs-code-x-download)
2826

2927
To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `Cmd`+`Shift`+`P` on Mac to open the VS Code extension launcher.
3028

3129
![launch Telerik Blazor VS Code extension](images/launch-extension.png)
30+
31+
## See Also
32+
33+
* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension)

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +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-copilot-extension)

‎getting-started/web-app.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,10 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a
121121

122122
@[template](/_contentTemplates/common/get-started.md#add-component-sample)
123123

124+
## Next Steps
125+
126+
* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API.
127+
124128
## See Also
125129

126130
* [Workflow Details for Telerik UI for Blazor](slug:getting-started/what-you-need)

0 commit comments

Comments
 (0)