Skip to content

Commit d7eb00c

Browse files
dnikolov-prgIvetNikolovaighristov
authored
Dnikolov/ai coding assistant (#1805)
* init ai reporting coding assistent docs * Create prompt-library.md * Update prompt-library.md * Update prompt-library.md * Update prompt-library.md * chore: WIP: AI CA docs update - matching our docs with recommended contents from other teams. WIP! * chore: updated AI-assistant articles - aligned with the docs from Angular team as of 2025-08-25 * add images for ai coding assistent * Created Prompt Library docs * fix formatting * fix table structure for ai prompt examples * chore: refined AI docs articles - added info for Reporting Area + images; - compliant with Angular docs. refs: no issue. * add questions for repporting service and angular viewers * chore: updated AI Coding Assistant articles - renamed 'Number of Requests' to 'Usage Limits' - added info for licensing modes. - refactored Privacy section * chore: changed handle to use underscores. * chore: update descriptions, use undercore - added underscore in assistant identifiers. - added specifics in tools descriptions. --------- Co-authored-by: IvetNikolova <[email protected]> Co-authored-by: IvetNikolova <[email protected]> Co-authored-by: Ivan Hristov <[email protected]>
1 parent 2327ea6 commit d7eb00c

12 files changed

+738
-0
lines changed

_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ navigation:
2424
security:
2525
position: 20
2626
title: "Security"
27+
ai-coding-assistant:
28+
position: 21
29+
title: "AI Coding Assistant"
2730
getting-started/web-designer:
2831
position: 5
2932
title: "Web Report Designer"
Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
---
2+
title: Reporting Copilot Extension
3+
page_title: Telerik Reporting Copilot Extension
4+
description: "Learn how to add and use the Telerik Reporting GitHub Copilot Extension as a Telerik Reporting AI coding assistant and code generator for increased developer productivity."
5+
slug: ai-copilot-extension
6+
tags: ai, reporting, coding, assistant, getting, started, extension, copilot
7+
published: True
8+
position: 1
9+
---
10+
11+
12+
# Telerik Reporting GitHub Copilot Extension
13+
14+
The Telerik Reporting [GitHub Copilot](https://github.com/features/copilot) extension is an AI-powered coding assistant that provides specialized knowledge about [Telerik Reporting]({%slug telerikreporting/welcome-to-telerik-reporting!%}).
15+
16+
It enables AI-powered IDEs and tools to generate more accurate, tailored code that leverages [Telerik Reporting](https://www.telerik.com/products/reporting.aspx) APIs. You can ask complex questions about integrating Telerik Reporting into web applications, request specific implementations, and receive comprehensive code solutions.
17+
18+
19+
## Prerequisites for the GitHub Copilot Extension
20+
21+
In addition to the [prerequisites for the AI Coding Assistant]({%slug ai-coding-assistant%}#prerequisites-for-the-ai-coding-assistant), before using the Telerik Reporting GitHub Copilot extension, ensure you have:
22+
23+
* 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).
24+
* A [Telerik user account](https://www.telerik.com/account/).
25+
* An active [DevCraft or Telerik Reporting license](https://www.telerik.com/purchase.aspx?filter=web) or a [Telerik Reporting trial](https://www.telerik.com/reporting).
26+
* An application that uses the [Telerik Reporting]({%slug telerikreporting/welcome-to-telerik-reporting!%}).
27+
* (Recommended) 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 Reporting Copilot extension:
32+
33+
1. Go to the [Telerik Reporting GitHub App](https://github.com/apps/telerikreporting) page and click the **Install** button.
34+
35+
![Install the Telerik Reporting GitHub App](images/ai-copilot-extension-install.png)
36+
37+
1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. **Select your GitHub account**.
38+
1. Click the **Install & Authorize** button. This will allow the GitHub Copilot extension to integrate with your GitHub account.
39+
40+
![Authorize the Telerik Reporting GitHub App](images/copilot-extension-authorize.png)
41+
42+
1. Enter your GitHub password when prompted.
43+
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.
44+
1. Upon successful Telerik authentication, you will be redirected to a confirmation page that confirms the Copilot extension has been installed successfully.
45+
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).
46+
1. Start a new chat session in Copilot.
47+
48+
## Usage
49+
50+
> When switching between tasks and files, start a new session in a new chat window to avoid polluting the context with irrelevant or outdated information.
51+
52+
To use the Telerik Reporting Copilot extension:
53+
54+
1. Choose your preferred mode and model.<br/>At the time of publishing, **Claude Sonnet 4** and **GPT-5** produce optimal results.
55+
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).
56+
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 Reporting MCP server]({%slug ai-mcp-server%}).
57+
1. Start your prompt with `@telerikreporting` and type your request. Verify that `@telerikreporting` is recognized and highlighted; otherwise the extension may not have been properly installed.
58+
59+
![Recognized the TelerikReporting Assistant](images/ai-copilot-extension-recognized.png)
60+
61+
1. Look for a status label such as **Telerik Reporting working...** or **Telerik Reporting generating response...** in the output to confirm the extension is active.
62+
63+
![TelerikReporting Assistant is generating a response](images/ai-copilot-extension-generating-response.png)
64+
65+
1. Grant permission to the Telerik Reporting extension to read your workspace files when prompted.
66+
1. For unrelated queries, start a new chat session in a new window to avoid context pollution from previous conversations.
67+
68+
>caption Using the Copilot Extension along with the MCP Server>
69+
If you have both the extension and the [MCP Server]({%slug ai-mcp-server%}) installed, you can use the `#telerik_reporting_assistant` handle. The handle works in both **Ask** and **Agent** modes and triggers responses from the MCP Server instead of the extension.
70+
71+
### Sample Prompts
72+
73+
The following examples demonstrate useful prompts for the Telerik Reporting extension:
74+
75+
* "`@telerikreporting` Add a Telerik Report Viewer to my native Angular application."
76+
* "`@telerikreporting` Connect the Telerik Report Viewer to my Telerik Report Server instance."
77+
78+
>tip Visit the [Telerik Reporting Prompt Library]({%slug ai-prompt-library%}) for more sample prompts.
79+
80+
## Usage Limits
81+
82+
A Telerik [Subscription license](https://www.telerik.com/purchase.aspx?filter=web) is recommended in order to use the Telerik Reporting AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a [limited number of requests per year]({%slug ai-coding-assistant%}#number-of-requests).
83+
84+
## Troubleshooting
85+
86+
If you encounter issues:
87+
88+
* Ensure the `@telerikreporting` mention is properly highlighted in your prompt.
89+
* Verify that you have an active GitHub Copilot subscription.
90+
* Restart your IDE after installation.
91+
* Check that you're in Chat mode, not Edit or Agent mode.
92+
93+
## See Also
94+
95+
* [GitHub Copilot Documentation](https://docs.github.com/en/copilot)
96+
* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials)
97+
* [Telerik Reporting MCP Server]({%slug ai-mcp-server%})
98+
* [Telerik Reporting Prompt Library]({%slug ai-prompt-library%})
99+
* For applications using [Native Angular Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/native-angular-report-viewer/overview%}) see the [Kendo UI for Angular GitHub Copilot Extension](https://www.telerik.com/kendo-angular-ui/components/ai-assistant/copilot-extension) article.
100+
* For applications using [Native Blazor Report Viewer]({%slug telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview%}) see the [Telerik Blazor GitHub Copilot Extension](https://www.telerik.com/blazor-ui/documentation/ai/copilot-extension) article.
14.9 KB
Loading
43.7 KB
Loading
22.7 KB
Loading
52.5 KB
Loading
68.5 KB
Loading
14.3 KB
Loading
21.5 KB
Loading

ai-coding-assistant/mcp-server.md

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
---
2+
title: MCP Server
3+
page_title: Telerik Reporting MCP Server
4+
description: "Learn how to add and use the Telerik Reporting MCP Server as a .NET Telerik Reporting AI coding assistant and code generator for increased developer productivity."
5+
slug: ai-mcp-server
6+
tags: telerik, reporting, ai, server, mcp, dotnet,coding assistant
7+
published: True
8+
position: 2
9+
---
10+
11+
# Telerik Reporting MCP Server
12+
13+
The Telerik Reporting [MCP (Model Context Protocol) Server](https://modelcontextprotocol.io/introduction) enhances your AI-powered development experience by providing specialized context about Telerik Reporting.
14+
15+
This MCP server enables AI-powered IDEs and tools to generate more accurate, tailored code that leverages [Telerik Reporting](https://www.telerik.com/products/reporting.aspx) APIs. You can ask complex questions about integrating Telerik Reporting in web applications, request specific implementations, and generate comprehensive code solutions.
16+
17+
## Prerequisites
18+
19+
To use the Telerik Reporting MCP Server, you need:
20+
21+
* [Node.js](https://nodejs.org/en) 18 or newer.
22+
* An [MCP-compatible client (IDE, code editor, or app)](https://modelcontextprotocol.io/clients) that supports **MCP tools** (latest version recommended).
23+
* A [Telerik user account](https://www.telerik.com/account/).
24+
* An active [DevCraft or Telerik Reporting license](https://www.telerik.com/purchase.aspx?filter=web) or a [Telerik Reporting trial](https://www.telerik.com/reporting).
25+
* An application that uses the [Telerik Reporting]({%slug telerikreporting/welcome-to-telerik-reporting!%}).
26+
27+
28+
## Installation
29+
30+
Install the Telerik Reporting MCP server using npm:
31+
32+
````bash
33+
npm i @progress/telerik-reporting-mcp
34+
````
35+
36+
### Configuration
37+
38+
Use these settings when configuring the server in your MCP client:
39+
40+
|Setting|Value|
41+
|----|----|
42+
| Package Name | `@progress/telerik-reporting-mcp` |
43+
| Type | `stdio` (standard input/output transport) |
44+
| Command | `npx` |
45+
| Arguments | `-y` |
46+
| Server Name | `telerik_reporting_assistant` (customizable) |
47+
48+
### License Configuration
49+
50+
Add your [Telerik license key]({%slug license-key%}) as an environment parameter in your `mcp.json` file using one of these options:
51+
52+
* Option 1: License File Path (Recommended)
53+
54+
````json
55+
"env": {
56+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE"
57+
}
58+
````
59+
60+
61+
* Option 2: Direct License Key
62+
63+
````json
64+
"env": {
65+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY_HERE"
66+
}
67+
````
68+
69+
70+
> **Option** 1 is recommended unless you're sharing settings across different systems. Remember to [update your license key]({%slug license-key%}#updating-your-license-key) when necessary.
71+
72+
## Visual Studio
73+
74+
For complete setup instructions, see [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
75+
76+
> 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.
77+
78+
### Workspace-Specific Setup:
79+
80+
1. Add `.mcp.json` to your solution folder (mind the leading dot '.'):
81+
82+
````json
83+
{
84+
"servers": {
85+
"telerik_reporting_assistant": {
86+
"type": "stdio",
87+
"command": "npx",
88+
"args": ["-y", "@progress/telerik-reporting-mcp@latest"],
89+
"env": {
90+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
91+
// or
92+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
93+
}
94+
}
95+
}
96+
}
97+
````
98+
99+
100+
1. Restart Visual Studio.
101+
1. Enable the `telerik_reporting_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).
102+
103+
### Global Setup:
104+
105+
Add the `.mcp.json` file to your user directory (`%USERPROFILE%`, e.g., `C:\Users\{user}\.mcp.json`).
106+
107+
## Visual Studio Code
108+
109+
For complete setup instructions, see [Use MCP servers in Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
110+
111+
> **Visual Studio Code 1.102.1 or newer** is required to use the Telerik MCP Server
112+
113+
The basic setup in Visual Studio Code follows these steps:
114+
115+
1. Enable [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) in Visual Studio Code settings.
116+
2. Create `.vscode/mcp.json` in your workspace root (or user folder for global setup):
117+
118+
````json
119+
{
120+
"servers": {
121+
"telerik_reporting_assistant": {
122+
"type": "stdio",
123+
"command": "npx",
124+
"args": ["-y", "@progress/telerik-reporting-mcp@latest"],
125+
"env": {
126+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
127+
// or
128+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
129+
}
130+
}
131+
}
132+
}
133+
````
134+
135+
136+
This enables you to call the MCP Server with the `#telerik_reporting_assistant` handle. To use a custom handle, change the server name in the `mcp.json`.
137+
138+
3. For global discovery, enable [`chat.mcp.discovery.enabled`](vscode://settings/chat.mcp.discovery.enabled) in `settings.json`:
139+
140+
````json
141+
{
142+
"chat.mcp.discovery.enabled": true
143+
}
144+
````
145+
146+
147+
4. Restart Visual Studio Code.
148+
149+
![Installed Reporting MCP Server in VS Code](images/installed-reporting-mcp-server-in-vs-code.png)
150+
151+
## Cursor
152+
153+
For complete setup instructions, see [Model Context Protocol](https://docs.cursor.com/context/mcp).
154+
155+
Create `.cursor/mcp.json` in your workspace root (or user folder for global setup):
156+
157+
````json
158+
{
159+
"mcpServers": {
160+
"telerik_reporting_assistant": {
161+
"type": "stdio",
162+
"command": "npx",
163+
"args": ["-y", "@progress/telerik-reporting-mcp@latest"],
164+
"env": {
165+
"TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
166+
// or
167+
"TELERIK_LICENSE": "YOUR_LICENSE_KEY"
168+
}
169+
}
170+
}
171+
}
172+
````
173+
174+
This enables you to call the MCP Server with the `#telerik_reporting_assistant` handle. To use a custom handle, change the server name in the `mcp.json`.
175+
176+
177+
## Usage
178+
179+
> When switching between tasks and files, start a new session in a new chat window to avoid polluting the context with irrelevant or outdated information.
180+
181+
To use the Telerik Reporting MCP Server:
182+
183+
1. Choose your preferred mode and model.<br/>At the time of publishing, **Claude Sonnet 4** and **GPT-5** produce optimal results.
184+
185+
2. Start your prompt with `#telerik_reporting_assistant` (or with '#' followed by your [custom MCP server name](#configuration), if set):
186+
187+
3. Inspect the output and verify that the MCP server is used. Look for messages similar to the ones below:
188+
189+
- Visual Studio: `Running telerikReportingAssistant`
190+
- Visual Studio Code: `Running telerik_reporting_assistant`
191+
- Cursor: `Calling MCP tool telerikReportingAssistant`
192+
193+
4. If the Telerik Reporting MCP server is not used even though it's installed and enabled, double-check the server name in your configuration and try rephrasing your prompt.
194+
5. If requested, grant the Telerik Reporting MCP Server permissions to run for this session, workspace, or always.
195+
196+
6. Start fresh sessions for unrelated prompts to avoid context pollution.
197+
198+
### Improving Server Usage
199+
200+
**Determining the Reporting Area**: To better specify the context for each prompt, the MCP Server will attempt to determine the Telerik Reporting Area the prompt relates to. These areas represent the supported web frameworks and backend technologies, as listed below as pairs consisting of identifier and description:
201+
202+
- AngularWrapper - _Angular Report Viewer (wrapper of the HTML5 Report Viewer)_
203+
- NativeAngular - _Native Angular Report Viewer (built with Kendo UI for Angular)_
204+
- BlazorWrapper- _Blazor Report Viewer (wrapper of the HTML5 Report Viewer)_
205+
- NativeBlazor - _Native Blazor Report Viewer (built with Telerik UI for Blazor)_
206+
- HTML5 - _HTML5 Report Viewer (built with Kendo UI for jQuery)_
207+
- React - _React Report Viewer (wrapper of the HTML5 Report Viewer)_
208+
- RESTService - _Reporting REST Service for .NET Framework_
209+
- RESTServiceCore - _Reporting REST Service for .NET Core/.NET 8+_
210+
- General - _General question_
211+
212+
If the Reporting Area cannot be determined automatically, the MCP Server will display a dialog asking to pick the corresponding area in which the prompt falls in:
213+
214+
![A notification requesting input for the Reporting Area of the asked question](images/mcp-server-reporting-area-prompt.png)
215+
216+
After clicking on 'Respond' button, the MCP Server will display a drop-down list with all the areas and wait for selecting the corresponding Reporting Area. If there is no applicable entry, please select 'General' entry at the end of the list.
217+
218+
![Select a Reporing Area from the dropdown](images/mcp-server-select-reporting-area.png)
219+
220+
**Custom Instructions**: To increase the likelihood of the Telerik MCP server being used, or to call it without the need to mention "telerik-reporting" explicitly, add custom instructions to your AI tool:
221+
222+
- [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)
223+
- [Cursor rules](https://docs.cursor.com/context/rules)
224+
225+
### Sample Prompts
226+
227+
The following examples demonstrate useful prompts for the Telerik Reporting MCP Server:
228+
229+
* "`#telerik_reporting_assistant` Add a Telerik Report Viewer to my native Angular application."
230+
* "`#telerik_reporting_assistant` Connect the Telerik Report Viewer to my Telerik Report Server instance."
231+
232+
>tip Visit the [Telerik Reporting Prompt Library](slug:ai-prompt-library) for more sample prompts.
233+
234+
## Usage Limits
235+
236+
A Telerik [Subscription license](https://www.telerik.com/purchase.aspx?filter=web) is recommended in order to use the Telerik Reporting AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a [limited number of requests per year]({%slug ai-coding-assistant%}#number-of-requests).
237+
238+
## Connect to Local AI Model
239+
240+
You can use the Telerik Reporting MCP server with local large language models (LLMs):
241+
242+
1. Run a local model, for example, through [Ollama](https://ollama.com).
243+
1. Use a bridge package like [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge).
244+
1. Connect your local model to the Telerik MCP server.
245+
246+
This setup allows you to use the Telerik AI Coding Assistant without cloud-based AI models.
247+
248+
## See Also
249+
250+
* [Telerik Reporting GitHub Copilot Extension]({%slug ai-copilot-extension%})
251+
* [AI Coding Assistant Overview]({%slug ai-coding-assistant%})
252+
* [Telerik Reporting Prompt Library]({%slug ai-prompt-library%})
253+
* For applications using [Native Angular Report Viewer]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/native-angular-report-viewer/overview%}) see the [Kendo UI for Angular MCP Server](https://www.telerik.com/kendo-angular-ui/components/ai-assistant/mcp-server) article.
254+
* For applications using [Native Blazor Report Viewer]({%slug telerikreporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/overview%}) see the [Telerik Blazor MCP Server](https://www.telerik.com/blazor-ui/documentation/ai/mcp-server) article.

0 commit comments

Comments
 (0)