Тelerik Reporting Productivity Tools for Visual Studio Code

The extension automates the MCP server setup for you. The MCP Server enables you to use the AI Coding Assistant — an AI-powered code generator that provides proprietary context to produce high-quality code samples using Telerik Reporting components and APIs.

Telerik Reporting MCP Configuration

Provides automated configuration commands for the Telerik AI-powered development tools. These commands help you quickly set up the Telerik MCP server for enhanced developer productivity with Telerik Reporting components.

Configure MCP Server

The Telerik Reporting: Configure MCP Server command provides two configuration scopes to set up the Telerik Reporting MCP Server:

• Workspace—Creates an mcp.json file in a .vscode folder in your current workspace. This configuration applies only to the current workspace.
• Global—Creates an mcp.json file in your operating system user folder (for example, C:\Users\___\AppData\Roaming\Code\User\.mcp.json on Windows or /Users/___/Library/Application Support/Code/User/mcp.json on macOS). This configuration applies to all VS Code workspaces.

Add GitHub Copilot Custom Instructions

The Telerik Reporting: Add GitHub Copilot Custom Instructions - command generates a copilot-instructions.md file in the .github folder under the solution. This file contains custom instructions that help GitHub Copilot provide better assistance when working with Telerik Reporting components. The generated file includes the following default instructions:

• Guidance to use the Telerik MCP Server whenever applicable
• Guidance to prioritize the usage of Telerik Reporting
• Guidance to use best coding practices related to Telerik Reporting

If the file already exists, the default Telerik Reporting Copilot instructions will be added to the existing content.

Overview of Telerik Reporting Angular Scaffolding

Тhe Telerik Reporting Productivity Tools extension provides scaffolding for the Telerik Reporting native Angular viewer.

To create a new test app, you can use the Angular CLI:

ng new ReportingAngularApp

1. In VS Code, in the Explorer, within your Angular application source folder, right-click where you want to add a reporting component and select New Telerik Reporting Angular Project Item.

2. VS Code will prompt you that @progress/telerik-reporting-schematics is missing. To install it, click npm i ... in the prompt.

3. The Telerik Reporting Angular Scaffolding wizard will open, showing the available Angular component options.

4. Configure your preferred options and click Create. This will generate an Angular component with a pre-configured Telerik Reporting Native Angular report viewer.

5. Include the new component in your project. Add it to your routing or to the HTML of an existing component.

Extensions Settings

The Telerik Reporting Productivity Tools extension now includes configurable settings for managing product update notifications directly within Visual Studio Code. This update provides users with greater control over their development environment, allowing them to easily enable or disable update alerts according to their preferences.

1. Go to setting menu in VS Code and select "Settings" option from the context menu.

2. Go to "User" -> "Extensions" section:

3. Select "Telerik Reporting":

4. See the option that lets the user to enable or disable the product update notifications.

Help Resources

• Learn More about Telerik Reporting
• Telerik Reporting Documentation
• Telerik Reporting Online Demos
• Telerik Reporting Community Forums
• Suggest a Feature for Telerik Reporting
• Contact the Telerik Reporting Support

License

This code is distributed under the terms and conditions of the Progress Software Corporation End User License Agreement for Visual Studio Code Extensions.