Skip to content

Commit 2d3c7bc

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1208 from telerik/didi/aiassistant
Add AI Coding Assistant
2 parents 249a718 + 6fd16ce commit 2d3c7bc

File tree

7 files changed

+380
-1
lines changed

7 files changed

+380
-1
lines changed

‎_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ navigation:
3030
styling-and-themes:
3131
title: "Styling and Themes"
3232
position: 5
33+
ai:
34+
title: "AI Coding Assistant"
35+
position: 6
3336
security:
3437
title: "Security"
3538
position: 7

‎_contentTemplates/common/ai-coding-assistant.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#getting-started
2+
* A [Telerik user account](https://www.telerik.com/account/).
3+
* An active [DevCraft or Telerik UI for MAUI license](https://www.telerik.com/purchase/maui-ui) or a [Telerik UI for MAUI trial](https://www.telerik.com/maui-ui).
4+
* A [.NET MAUI application that includes Telerik UI for .NET MAUI]({%slug maui-getting-started%}).
5+
#end
6+
7+
#number-of-requests
8+
A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik MAUI AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a [limited number of requests per year]({%slug ai-overview%}#number-of-requests).
9+
#end

‎ai/copilot-extension.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
title: Copilot Extension
3+
page_title: Telerik MAUI GitHub Copilot Extension
4+
description: Learn how to add and use the Telerik MAUI GitHub Copilot extension as a .NET MAUI AI coding assistant and code generator for better developer productivity. The Telerik MAUI GitHub Copilot extension provides proprietary context about Telerik UI for .NET MAUI to AI-powered software.
5+
slug: ai-copilot-extension
6+
tags: telerik, maui, ai, dotnetmaui, coding assistant, ai server
7+
position: 10
8+
---
9+
10+
# Telerik MAUI GitHub Copilot Extension
11+
12+
The Telerik MAUI [GitHub Copilot](https://github.com/features/copilot) extension is an AI-powered coding assistant that provides specialized knowledge about [Telerik UI for .NET MAUI components](https://www.telerik.com/maui-ui).
13+
14+
This extension enhances GitHub Copilot with proprietary context about Telerik MAUI controls, helping you:
15+
16+
* Generate code snippets using Telerik MAUI components.
17+
* Get contextual suggestions for component properties and methods.
18+
* Access best practices and implementation patterns.
19+
* Speed up development with AI-powered code completion.
20+
21+
## Prerequisites
22+
23+
Before using the Telerik MAUI GitHub Copilot extension, ensure you have:
24+
25+
* 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).
26+
@[template](/_contentTemplates/common/ai-coding-assistant.md#getting-started)
27+
* The latest version of 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 Visual Studio Code).
28+
29+
## Installation
30+
31+
Follow these steps to install and configure the Telerik MAUI Copilot extension:
32+
33+
1. Go to the [Telerik MAUI GitHub App](https://github.com/apps/telerikmaui) page and click the **Install** button.
34+
1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. Select your GitHub account.
35+
1. Click the **Install & Allow** button. This will allow the GitHub Copilot extension to integrate with your GitHub account.
36+
1. Enter your GitHub password when prompted.
37+
1. You will be redirected to telerik.com. Enter your Telerik account credentials if prompted. This step links the GitHub Copilot extension with your Telerik account.
38+
1. Upon successful Telerik authentication, you will be redirected to a confirmation page that indicates successful Copilot extension installation.
39+
1. Restart 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 and Visual Studio Code).
40+
1. Start a new chat session in Copilot.
41+
42+
## Usage
43+
44+
To use the Telerik MAUI Copilot extension:
45+
46+
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).
47+
1. Ensure you are in **Chat** 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 MAUI MCP server]({%slug ai-mcp-server%}).
48+
1. Start your prompt with `@telerikmaui` and type your request. Verify that `@telerikmaui` is recognized and highlighted; otherwise, the extension may not be properly installed.
49+
1. Look for a status label such as **Telerik MAUI working...** or **Telerik MAUI generating response...** in the output to confirm the extension is active.
50+
1. Grant permission to the Telerik MAUI extension to read your workspace files when prompted.
51+
1. For unrelated queries, start a new chat session in a new window to avoid context pollution from previous conversations.
52+
53+
### Sample Prompts
54+
55+
The following examples demonstrate useful prompts for the Telerik MAUI extension:
56+
57+
* "`@telerikmaui` Generate a DataGrid with sorting and paging enabled."
58+
* "`@telerikmaui` Create a Telerik ComboBox for MAUI with multiple selection enabled."
59+
* "`@telerikmaui` Show me how to implement a Chart with line series."
60+
* "`@telerikmaui` Generate a CollectionView with grouping and filtering capabilities."
61+
62+
## Number of Requests
63+
64+
@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)
65+
66+
## Troubleshooting
67+
68+
If you encounter issues:
69+
70+
* Ensure the `@telerikmaui` mention is properly highlighted in your prompt.
71+
* Verify that you have an active GitHub Copilot subscription.
72+
* Restart your IDE after installation.
73+
* Check that you're in Chat mode, not Edit or Agent mode.
74+
75+
## See Also
76+
77+
* [GitHub Copilot Documentation](https://docs.github.com/en/copilot)
78+
* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials)
79+
* [Telerik MAUI MCP Server]({%slug ai-mcp-server%})
80+
* [Telerik UI for .NET MAUI Documentation](https://docs.telerik.com/devtools/maui/)

‎ai/mcp-server.md

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
---
2+
title: MCP Server
3+
page_title: Telerik MAUI MCP Server
4+
description: Learn how to add and use the Telerik MAUI MCP Server as a .NET MAUI AI coding assistant and code generator for better developer productivity. The Telerik MAUI MCP server provides proprietary context about Telerik UI for .NET MAUI to AI-powered software.
5+
slug: ai-mcp-server
6+
tags: telerik,maui,ai,ai server,dotnetmaui,coding assistant
7+
position: 20
8+
---
9+
10+
# Telerik .NET MAUI MCP Server
11+
12+
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.
13+
14+
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.
15+
16+
## Prerequisites
17+
18+
To use the Telerik MAUI MCP server, you need:
19+
20+
* [Node.js](https://nodejs.org/en) 18 or newer.
21+
* An [MCP-compatible client](https://modelcontextprotocol.io/clients) that supports **MCP tools** (latest version recommended).
22+
23+
@[template](/_contentTemplates/common/ai-coding-assistant.md#getting-started)
24+
25+
## Installation
26+
27+
Install the Telerik MAUI MCP server using npm:
28+
29+
```bash
30+
npm i @progress/telerik-maui-mcp
31+
```
32+
33+
### Configuration
34+
35+
Use these settings when configuring the server in your MCP client:
36+
37+
| Setting | Value |
38+
|---------|-------|
39+
| Package Name | `@progress/telerik-maui-mcp` |
40+
| Type | `stdio` (standard input/output transport) |
41+
| Command | `npx` |
42+
| Arguments | `-y` |
43+
| Server Name | `telerikMauiAssistant` (customizable) |
44+
45+
### License Configuration
46+
47+
Add your [Telerik license key]({%slug set-up-your-license%}) as an environment parameter in your `mcp.json` file using one of these options:
48+
49+
Option 1: License File Path (Recommended)
50+
51+
```json
52+
"env": {
53+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FIL"
54+
}
55+
```
56+
57+
Option 2: Direct License Key
58+
59+
```json
60+
"env": {
61+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY_HERE"
62+
}
63+
```
64+
65+
> 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.
66+
67+
## Visual Studio
68+
69+
For complete setup instructions, see [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
70+
71+
> 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.
72+
73+
### Workspace-Specific Setup:
74+
75+
1. Add `.mcp.json` to your solution folder:
76+
77+
```json
78+
{
79+
"servers": {
80+
"telerikMauiAssistant": {
81+
"type": "stdio",
82+
"command": "npx",
83+
"args": ["-y", "@progress/telerik-maui-mcp@latest"],
84+
"env": {
85+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
86+
// or
87+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
88+
}
89+
}
90+
}
91+
}
92+
```
93+
94+
2. Restart Visual Studio.
95+
3. Enable the `telerikMauiAssistant` 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).
96+
97+
### Global Setup:
98+
99+
Add the `.mcp.json` file to your user directory (`%USERPROFILE%`, e.g., `C:\Users\YourName\.mcp.json`).
100+
101+
## Visual Studio Code
102+
103+
For complete setup instructions, see [Use MCP servers in Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
104+
105+
> Visual Studio Code 1.102.1 or newer is required to use the Telerik MCP Server
106+
107+
The basic setup in Visual Studio Code follows these steps:
108+
109+
1. Enable [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) in Visual Studio Code settings.
110+
2. Create `.vscode/mcp.json` in your workspace root (or user folder for global setup):
111+
112+
```json
113+
{
114+
"servers": {
115+
"telerik-maui-assistant": {
116+
"type": "stdio",
117+
"command": "npx",
118+
"args": ["-y", "@progress/telerik-maui-mcp@latest"],
119+
"env": {
120+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
121+
// or
122+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
123+
}
124+
}
125+
}
126+
}
127+
```
128+
129+
3. For global discovery, enable [`chat.mcp.discovery.enabled`](vscode://settings/chat.mcp.discovery.enabled) in `settings.json`:
130+
131+
```json
132+
{
133+
"chat.mcp.discovery.enabled": true
134+
}
135+
```
136+
137+
4. Restart Visual Studio Code.
138+
139+
## Cursor
140+
141+
For complete setup instructions, see [Model Context Protocol](https://docs.cursor.com/context/mcp).
142+
143+
Create `.cursor/mcp.json` in your workspace root (or user folder for global setup):
144+
145+
```json
146+
{
147+
"mcpServers": {
148+
"telerikMauiAssistant": {
149+
"type": "stdio",
150+
"command": "npx",
151+
"args": ["-y", "@progress/telerik-maui-mcp@latest"],
152+
"env": {
153+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
154+
// or
155+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
156+
}
157+
}
158+
}
159+
}
160+
```
161+
162+
## Usage
163+
164+
To use the Telerik MCP Server:
165+
166+
1. Start your prompt with one of these triggers:
167+
- `/telerik` / `@telerik` / `#telerik`
168+
- `/telerikmaui` / `@telerikmaui` / `#telerikmaui`
169+
- `#telerik-maui-assistant`
170+
171+
2. Verify server activation by looking for these messages:
172+
- Visual Studio: `Running telerikMauiAssistant`
173+
- Visual Studio Code: `Running telerik-maui-assistant`
174+
- Cursor: `Calling MCP tool telerikMauiAssistant`
175+
176+
3. Grant permissions when prompted (per session, workspace, or always).
177+
178+
4. Start fresh sessions for unrelated prompts to avoid context pollution.
179+
180+
### Improving Server Usage
181+
182+
To increase the likelihood of the Telerik MCP server being used, add custom instructions to your AI tool:
183+
- [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)
184+
- [Cursor rules](https://docs.cursor.com/context/rules)
185+
186+
### Sample Prompts
187+
188+
The following examples demonstrate useful prompts for the Telerik .NET MAUI MCP Server:
189+
190+
* "`/telerik` Generate a DataGrid with sorting and paging. Bind it to a Person model with sample ViewModel."
191+
* "`/telerikmaui` Create a ComboBox showing a product list. Include Product class and sample data."
192+
* "`/telerik` Build a CollectionView with sorting and filtering capabilities."
193+
194+
## Number of Requests
195+
196+
@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)
197+
198+
## Local AI Model Integration
199+
200+
You can use the Telerik MAUI MCP server with local large language models (LLMs):
201+
202+
1. Run a local model, for example, through [Ollama](https://ollama.com).
203+
2. Use a bridge package like [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge).
204+
3. Connect your local model to the Telerik MCP server.
205+
206+
This setup allows you to use the Telerik AI Coding Assistant without cloud-based AI models.
207+
208+
## See Also
209+
210+
* [Telerik MAUI GitHub Copilot Extension]({%slug ai-copilot-extension%})
211+
* [AI Coding Assistant Overview]({%slug ai-overview%})

‎ai/overview.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Overview
3+
page_title: Telerik UI for .NET MAUI AI Tooling Overview
4+
description: Learn about the AI-powered developer tools that integrate with your IDE or code editor for greater productivity and enhanced developer experience.
5+
slug: ai-overview
6+
tags: telerik,maui,dotnetmaui,ai,coding assistant
7+
position: 0
8+
---
9+
10+
# Telerik UI for .NET MAUI AI Coding Assistant
11+
12+
The Telerik UI for .NET MAUI AI Coding Assistant enhances your developer experience and increases productivity when building .NET MAUI applications with Telerik UI for .NET MAUI components.
13+
14+
The coding assistant is an AI code generator that provides specialized context to AI models, enabling them to produce higher-quality code samples using the [Telerik UI for .NET MAUI components](https://www.telerik.com/maui-ui) and APIs.
15+
16+
## Available Tools
17+
18+
The Telerik AI Coding Assistant is available through:
19+
20+
* [Telerik MAUI GitHub Copilot Extension]({%slug ai-copilot-extension%})
21+
* [Telerik MAUI MCP Server]({%slug ai-mcp-server%})
22+
23+
### Key Differences
24+
25+
| Feature | MCP Server | GitHub Copilot Extension |
26+
|------------------------|---------------------------------------------------------------------------|------------------------------------------------------------|
27+
| Prompt Handling | Handles complex, multi-step prompts | Offers shorter, focused code snippets |
28+
| Client Compatibility | Works with MCP-enabled clients (e.g., Cursor, Copilot Agent mode) | Integrated as a Copilot extension |
29+
| Code Suggestions | Can directly suggest changes and rebuild applications to verify code | Provides detailed explanations alongside code suggestions |
30+
| Response Focus | Primarily code-focused | Better for learning and understanding implementation |
31+
32+
## Getting Started
33+
34+
To use the Telerik MAUI AI Coding Assistant, you need:
35+
36+
@[template](/_contentTemplates/common/ai-coding-assistant.md#getting-started)
37+
* @[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)
38+
39+
## Number of Requests
40+
41+
The Telerik MAUI AI Coding Assistant allows the following maximum number of requests based on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):
42+
43+
| License Type | Request Limit |
44+
|--------------|---------------|
45+
| Perpetual | 50 requests per year |
46+
| Subscription | Virtually unlimited with fair use threshold of 300 requests per day |
47+
| Trial | 300 requests per trial period (does not reset with new trial activations) |
48+
49+
> All Telerik AI tools share a single request quota for your Telerik account. Usage from the [Telerik Copilot extension]({%slug ai-copilot-extension%}) and [Telerik MCP server]({%slug ai-mcp-server%}) counts toward the same limit. Complex prompts in the MCP server may consume multiple requests.
50+
51+
## Privacy
52+
53+
The Telerik MAUI AI Coding Assistant operates under strict privacy guidelines:
54+
55+
Data Access:
56+
* No access to your workspace and application code.
57+
* Exception: when using the Telerik MCP server (or any other MCP server), the LLM generates parameters for the MCP server request, which may include parts of your application code.
58+
59+
Data Usage:
60+
* Your prompts are not used to train Telerik AI models.
61+
* Does not generate or access AI responses.
62+
* Provides enhanced context to improve responses from your chosen AI model (GPT, Gemini, Claude, etc.).
63+
64+
Data Storage:
65+
* Prompts and context are anonymized and stored only for statistical analysis and troubleshooting.
66+
* No association between prompts and your Telerik user account.
67+
* Usage metrics are collected to ensure [license compliance](#number-of-requests).
68+
69+
> Make sure also to review the terms and privacy policies of your selected AI model and AI client.
70+
71+
## Next Steps
72+
73+
* Install the [Telerik MAUI GitHub Copilot Extension]({%slug ai-copilot-extension%})
74+
* Configure the [Telerik MAUI MCP Server]({%slug ai-mcp-server%}) with an MCP-enabled client

‎introduction.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ Telerik UI for .NET MAUI library is a commercial UI library. You are welcome to
6565

6666
For any issues you might encounter while working with Telerik UI for .NET MAUI, you can use a number of available support channels:
6767

68+
* The [Telerik MAUI AI Coding Assistant]({%slug ai-overview%}) provides Telerik UI for .NET MAUI tips and produces code snippets that include Telerik UI for .NET MAUI components and API.
6869
* Telerik UI for .NET MAUI license holders and active trialists can take advantage of the outstanding customer support delivered by the developers building the library. To submit a support ticket, use the [UI for .NET MAUI dedicated support](https://www.telerik.com/account/support-tickets) system.
6970
* [Telerik UI for .NET MAUI forum](https://www.telerik.com/forums/maui) is part of the free support you can get from the community and from the Telerik UI for .NET MAUI team on all kinds of general issues and questions you have.
7071
* [Telerik UI for .NET MAUI feedback portal](https://feedback.telerik.com/maui) provides information on the features in discussion and also the planned ones for release.

0 commit comments

Comments
 (0)