Telerik UI for Blazor Productivity Tools for Visual Studio Code

Overview of Telerik UI for Blazor Productivity Tools

The Progress® Telerik® UI for Blazor Productivity Tools within Visual Studio Code increase developer productivity and simplify the process of creating Blazor projects with Telerik UI components.

To use Telerik and Kendo UI components and tools without disruption, you need to apply a valid license key file (LKF) to both new and existing projects. License key files ensure that your applications remain fully supported, secure, and up to date with the latest product versions.

The Telerik UI for Blazor extension can automatically download and manage your license key. Simply log in to your Telerik or Kendo UI account within Visual Studio to enable this feature. Alternatively, you can manually download and apply a license key file.

Removed DEV/TRIAL Distribution Logic:
The extensions no longer differentiate between DEV and TRIAL distributions. All users now receive the same extension package and features, regardless of license status.

The tools are available as a VS Code extension for Windows, Linux, and Mac, and include:

End of Support for .NET 6:
The extension and generated projects no longer support .NET 6. Please use .NET 7 or later for new Blazor projects.

• MCP Configuration—Provides automated configuration commands for the Telerik AI-powered development tools.
• Project Templates—The wizard provides a template with Blank App based on the Microsoft template with added Telerik UI components.
• Scaffolder—The scaffolder allows you to quickly scaffold data-bound components such Data Grid, ListView, Gantt, Scheduler, Drawer, DropDownList, and more.
• Code Snippets—The pack contains a collection of 80+ Telerik UI for Blazor code snippets for fast UI component reference and configuration.
• Converter—The converter helps you add Telerik UI for Blazor components to an existing Blazor application with minimal effort.
• Sharing to REPL—The feature lets you export your code snippet and share the generated URL to social media, community forums, or with a team member.
• Document Processing Libraries—The wizard lets you quickly add processing for the most commonly used flow, fixed and spreadsheet document formats to your app.

Telerik UI for Blazor MCP Configuration

Provides automated configuration commands for the Telerik AI-powered development tools. These commands help you quickly set up the Telerik MCP server and GitHub Copilot extension for enhanced developer productivity with Telerik UI for Blazor components.

Configure MCP Server

The Telerik UI for Blazor: Configure MCP Server command provides two configuration scopes to set up the Telerik Blazor 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 UI for Blazor: 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 UI for Blazor 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 UI components
• Guidance to use best coding practices related to Telerik UI for Blazor

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

Install Telerik Blazor Copilot Extension

The Telerik UI for Blazor: Install Telerik Blazor Copilot Extension - start the installation for TelerikBlazor GitHub App. If you have already installed the extension, you will see a Configure button instead.

Telerik UI for Blazor Project Templates

The Telerik UI for Blazor Template Wizard lets you create new projects that are pre-configured for Telerik UI for Blazor components:

1. In VS Code, open the Command Palette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
2. Select Telerik UI for Blazor Template Wizard: Launch and press Enter.
3. Select your preferred configuration options and click Create Project.

To run the application, open the Terminal on your project and find the Server folder. Note that if you selected a Server type of project, the folder will hold the name of your project. If you selected WebAssembly, the folder you will be looking for is called Server folder. Execute the dotnet run command and you will have your Blazor project up and running.

For more information, see this documentation page.

Telerik UI for Blazor Scaffolder

Scaffolders ease the process of generating and integrating new Telerik UI for Blazor components in existing projects. The tool enables you to create complex Telerik UI for Blazor components with a lot of repetitive configuration (like the Grid, Chart, Inputs, and others), by selecting options from a seamless interactive wizard-like UI. The scaffolder functionality is a great way to get started with the Telerik UI for Blazor components for the first time and experiment with their features.

The Telerik UI for Blazor Scaffolder creates new pages in your Blazor apps with the most used data-bound Telerik Blazor components:

• Data Grid
• TreeList
• Scheduler
• Chart
• ListView
• Gantt
• Form
• Drawer
• Menu
• DropDownList
• Upload
• ComboBox
• and more.

When adding a new project item, the scaffolder will prompt you to input the service and model names and will allow you to configure multiple component-specific properties. For example, if you scaffold a new page with Telerik Blazor Data Grid, you will be able to set its sorting, filtering, grouping, column resizing, and more features.

1. In VS Code, in the Explorer, right-click a Blazor .csproj file and select New Telerik UI for Blazor Project Item....

2. In the scaffolding wizard, select the component that you want to add, configure its options, and click Create Project.

For more information, see this documentation page.

Telerik UI for Blazor Code Snippets

The Telerik UI for Blazor Productivity Tools provide code snippets to simplify and accelerate the implementation of Telerik UI for Blazor components in your project. They facilitate the development process by providing a quick way for adding the components directly in the source code, while also including predefined tab stops for the required options.

1. In the source code in the IDE, type tb (short for Telerik Blazor) or directly type the name of the component (for example, datagrid or gr).
2. From the dropdown menu, choose the snippet template that you want to use.
3. Press Enter to insert the desired component in the source code.
4. If the component provides placeholders for specific properties, cycle through them and set their values by pressing the Tab key.

To make the most out of snippets:

• Learn more about snippets in VS Code.
• Check out the Snippets Viewer extension.

Telerik UI for Blazor Snippets Catalog

• tb-autocomplete: AutoComplete
• tb-autocomplete-filterable: AutoComplete with Filtering
• tb-barcode: Barcode
• tb-breadcrumb: Breadcrumb
• tb-button: Button
• tb-button-settings: Button with settings
• tb-calendar: Calendar
• tb-carousel: Carousel
• tb-checkbox: CheckBox
• tb-checkbox-tristate: CheckBox TriState
• tb-chunkprogressbar: ChunkProgressBar
• tb-colorgradient: ColorGradient
• tb-colorpalette: ColorPalette
• tb-colorpicker: ColorPicker
• tb-combobox: ComboBox
• tb-combobox-filterable: ComboBox with Filtering
• tb-contextmenu: ContextMenu
• tb-dateintput: DateInput
• tb-datepicker: DatePicker
• tb-daterangepicker: DateRangePicker
• tb-datetimepicker: DateTimePicker
• tb-dialog : Dialog
• tb-drawer : Drawer
• tb-dropdownlist: DropDownList
• tb-dropdownlist-filterable: DropDownList with Filtering
• tb-editor: Editor
• tb-filemanager: FileManager
• tb-fileselect: FileSelect
• tb-filter : Filter
• tb-flatcolorpicker: FlatColorPicker
• tb-form: Form
• tb-gantt: Gantt
• tb-gantt-editable: Gantt with Editing
• tb-ganttcolumn: Gantt Bound Column
• tb-grid: Grid
• tb-grid-editable: Grid with Editing
• tb-gridcolumn: Grid Bound Column
• tb-gridcolumn-locked: Grid Locked Column
• tb-gridlayout: GridLayout
• tb-listview: ListView
• tb-listview-editable: ListView with Editing
• tb-loader: Loader
• tb-loadercontainer: LoaderContainer
• tb-maskedtextbox: MaskedTextBox
• tb-menu: Menu
• tb-multicolumncombobox: MultiColumnComboBox
• tb-multiselect: MutiSelect
• tb-multiselect-filterable: MutiSelect with Filtering
• tb-numerictextbox: NumericTextBox
• tb-pager: Pager
• tb-panelbar: PanelBar
• tb-pdfviewer: PdfViewer
• tb-progressbar: ProgressBar
• tb-qrcode: QRCode
• tb-radiogroup: RadioGroup
• tb-rangeslider: RangeSlider
• tb-scheduler: Scheduler
• tb-scheduler-editable: Scheduler with Editing
• tb-signature: Signature
• tb-skeleton: Skeleton
• tb-slider: Slider
• tb-splitter: Splitter
• tb-stacklayout: StackLayout
• tb-stepper: Stepper
• tb-switch: Switch
• tb-tabstrip: TabStrip
• tb-textarea: TextArea
• tb-textbox: TextBox
• tb-tilelayout: TileLayout
• tb-timepicker: TimePicker
• tb-togglebutton: ToggleButton
• tb-tooltip: Tooltip
• tb-treelist: TreeList
• tb-treeList-editable: TreeList with Editing
• tb-treelistcolumn: TreeList Bound Column
• tb-treelistcolumn-locked: TreeList Locked Column
• tb-treeview: TreeView
• tb-upload: Upload
• tb-window: Window
• tb-wizard: Wizard

For more information, see this documentation page.

Telerik UI for Blazor Convert Command

If you want to add Telerik UI for Blazor components to an existing Blazor app, you can use the converter. It adds the NuGet package, static assets, and other references for you, so that you can immediately start using the Telerik UI for Blazor components.

For more information about how to use the convert command, see this documentation page.

Telerik UI for Blazor Sharing to REPL

The Telerik UI for Blazor Productivity Tools provide integration with Telerik REPL for Blazor—a browser-based playground for creating, saving, running and sharing of Blazor code snippets.

You can easily export your code snippet and share the generated URL to social media, community forums or send it to a team mate.

Share Using the Code Editor Context Menu

1. Open a .razor file or a Razor language in the code editor.
2. Select code to share:
   • To send the whole file, clear the selection.
   • To send a part of the file, select the code.
3. Right-click within the code editor and select Share to Telerik REPL for Blazor.

Share Using the Code Editor Command Palette

1. Open a .razor file or a Razor language in the code editor.
2. Select code to share:
   • To send the whole file, clear the selection.
   • To send a part of the file, select the code.
3. Open the Command Pallette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
4. Type Share to Telerik REPL for Blazor.

Share Using the File Explorer Context Menu

1. In the Explorer, right-click a .razor file.
2. Select Share to Telerik REPL for Blazor.

Multiple selection is not supported. Only the file you have right-clicked is sent.

For more information, see this documentation page.

Document Processing Libraries

The Telerik Document Processing Libraries wizard enables you to easily add the required packages when working with the Telerik Document Processing Libraries.

Document Processing Libraries via the File Explorer Context Menu

1. In the Explorer, right-click a file.
2. Select Telerik UI for Blazor: Add Document Processing Libraries.

Document Processing Libraries via the Code Editor Command Palette

1. Open a .razor file or a Razor language in the code editor.
2. Open the Command Pallette menu by pressing Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on Mac.
3. Select Telerik UI for Blazor: Add Document Processing Libraries.

Configuring Your Document Processing Libraries

You can choose which libraries to add to your project. If a library you selected has any dependencies, they are automatically checked.

The following table lists the assemblies that will be selected for each library:

For more information, see this document page

• New OCR Assemblies:
  The DPL wizard now supports adding OCR-related assemblies to your project. The RadPdfProcessing library supports Optical Character Recognition (OCR). OCR is the electronic or mechanical conversion of images of typed, handwritten, or printed text into machine-encoded text from a scanned document.

• AI-Related Libraries:
  The DPL wizard and extensions now include new AI-powered document processing libraries. These provide advanced capabilities such as intelligent document analysis. The GenAI-powered Document Insights feature enables you to easily extract insights from PDF documents using Large Language Models (LLMs). This functionality allows you to summarize document content and ask questions about the document, with the AI providing relevant answers based on the document's content.

For more information, see this documentation page.

• Text Measuring assemblies:
  The DPL wizard and extensions now include new assemblies for the cross-platform text measuring. These provide advanced capabilities for text manipulation, based on SKIA.

For more information, see this documentation page.

Help Resources

• Telerik UI for Blazor Components
• Download Telerik UI for Blazor Free Trial
• Telerik UI for Blazor Documentation
• Telerik UI for Blazor Online Demos
• Telerik UI for Blazor Release History
• Telerik UI for Blazor Pricing and Upsell Options
• Telerik UI for Blazor Community Forums
• Telerik UI for Blazor Suggest a Feature
• Contact the Telerik UI for Blazor 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.