Repository avatar
Other Tools
v1.12.1
active

kendo-react-mcp

io.github.telerik/kendo-react-mcp

MCP server providing KendoReact component knowledge and UI-generation capabilities.

Documentation

Telerik AI Plugins

AI coding agent plugins for Claude Code, GitHub Copilot CLI, and VS Code Copilot that bring Progress / Telerik UI component expertise directly into your development workflow.

Plugins

PluginDescription
telerik-blazor-pluginTelerik UI for Blazor — component implementation, validation, theming, testing, and migration
kendo-react-pluginKendoReact — component implementation, accessibility, theming, testing, migration, and styling
kendo-angular-pluginKendo UI for Angular — component documentation, layout utilities, theming, icons, and accessibility
telerik-winforms-upgrade-pluginGitHub Copilot CLI Upgrade Agent for Telerik UI for WinForms — version upgrades, control conversion, assembly-to-NuGet migration, and licensing
telerik-wpf-upgrade-pluginGitHub Copilot CLI Upgrade Agent for Telerik UI for WPF — version upgrades, assembly-to-NuGet migration (Xaml and NoXaml), and licensing

How It Works

Most plugins wrap a Progress MCP server that gives your coding agent live access to component documentation, APIs, and code generation. The WinForms and WPF Upgrade plugins are different: they extend Microsoft's Upgrade Agent for GitHub Copilot CLI with Telerik WinForms and WPF modernization scenarios and use the Telerik.WinForms.MCP and Telerik.WPF.MCP servers.

A valid Progress product license is required to use the plugins:

PluginLicense
telerik-blazor-pluginTelerik UI for Blazor
kendo-react-pluginKendoReact
kendo-angular-pluginKendo UI for Angular
telerik-winforms-upgrade-pluginTelerik UI for WinForms
telerik-wpf-upgrade-pluginTelerik UI for WPF

Getting Started

Add the telerik/ai-plugins marketplace to your agent, then install the plugin you need.

Claude Code

/plugin marketplace add telerik/ai-plugins
/plugin install kendo-react-plugin@telerik-ai-plugins

GitHub Copilot CLI

copilot plugin marketplace add telerik/ai-plugins
copilot plugin install kendo-react-plugin@telerik-ai-plugins

VS Code Copilot (Agent Plugins is a preview feature — requires VS Code 1.100+ with chat.plugins.enabled: true) — add to settings.json, then browse @agentPlugins in the Extensions view and click Install:

"chat.plugins.marketplaces": ["telerik/ai-plugins"]

For full setup instructions and local dev configuration see docs/local-installation.md.

Using the Skills

Once a plugin is installed, you interact with it by invoking its skills directly in your agent chat.

Skills are typically invoked automatically when the agent recognises a relevant prompt. You can also trigger them explicitly using the /plugin-name:skill-name hashtag (e.g. /kendo-react-plugin:kendo-react-ui-generator).

Set Up a New Project

Use the getting-started skill to scaffold a brand-new project or add the library to an existing one:

PluginSkill
kendo-react-pluginkendo-react-getting-started
kendo-angular-pluginkendo-angular-getting-started
telerik-blazor-plugintelerik-blazor-getting-started

Example prompts:

Create a new KendoReact project called my-app with the Material theme
Add KendoReact to my existing project
Set up a new Telerik Blazor project called my-blazor-app --theme=bootstrap

Or forcefully run the getting-started skill workflow by using slash command:

/kendo-react-plugin:kendo-react-getting-started Create a new KendoReact project called my-app with the Material theme

Build UI

Use the ui-generator skill to build or refine complete pages, sections, forms, and dashboards:

PluginSkill
kendo-react-pluginkendo-react-ui-generator
kendo-angular-pluginkendo-angular-ui-generator
telerik-blazor-plugintelerik-blazor-ui-generator

To ensure that the ui-generator skill is relevant for the task it is prefered to invoke it as a slash command.

Example prompts:

/kendo-react-plugin:kendo-react-ui-generator Build a KendoReact admin dashboard with a data grid, charts, and a sidebar nav
/telerik-blazor-plugin:telerik-blazor-ui-generator Generate a Telerik Blazor order management form with validation
/kendo-angular-plugin:kendo-angular-ui-generator Create an Angular page with a filterable Kendo Grid and a date picker toolbar

Explore Components

Use the component skill to retrieve documentation, API reference, and code examples for any specific component (Grid, Chart, Scheduler, DatePicker, DropDownList, Form, and more):

PluginSkill
kendo-react-pluginkendo-react-component
kendo-angular-pluginkendo-angular-component

Example prompts:

/kendo-react-plugin:kendo-react-component Create a Grid with paging, sorting, and filtering for a product catalog with name, price, category, and actions columns
/kendo-angular-plugin:kendo-angular-component How do I enable virtual scrolling and Excel export on the Kendo Grid?

Add Layout and Spacing

Use the layout skill to retrieve Kendo Design System CSS utility classes for page structure, spacing, flexbox/grid, and responsive behavior. Call it before writing custom layout CSS:

PluginSkill
kendo-react-pluginkendo-react-layout
kendo-angular-pluginkendo-angular-layout

Example prompts:

/kendo-react-plugin:kendo-react-layout Add a responsive section with a dashboard card showing KPIs next to a compact card with a recent alert, using proper spacing and typography
/kendo-angular-plugin:kendo-angular-layout Convert this desktop-first dashboard into a responsive layout that works on tablet and mobile

Style and Theme

Use the style skill to generate CSS variables and custom themes from a natural language description of the desired visual style, including dark mode and high-contrast variants:

PluginSkill
kendo-react-pluginkendo-react-style
kendo-angular-pluginkendo-angular-style

Example prompts:

/kendo-react-plugin:kendo-react-style Generate a custom theme for a corporate blue and green color scheme with high contrast accessibility requirements
/kendo-angular-plugin:kendo-angular-style Create a dark mode theme with a dark background, light text, and subtle border radius on cards and buttons

Find Icons

Use the icon skill to search the icon library by name, action, or concept and get matching icons with usage details:

PluginSkill
kendo-react-pluginkendo-react-icon
kendo-angular-pluginkendo-angular-icon

Example prompts:

/kendo-react-plugin:kendo-react-icon Add icons suitable for the Home, Settings, and User Profile buttons in my navigation bar
/kendo-angular-plugin:kendo-angular-icon Find icons for export, print, refresh, and search actions in a dashboard toolbar

Improve Accessibility

Use the accessibility skill for WCAG 2.2 Level AA guidance and component-specific ARIA, keyboard navigation, focus management, and screen reader requirements:

PluginSkill
kendo-react-pluginkendo-react-accessibility
kendo-angular-pluginkendo-angular-accessibility

Example prompts:

/kendo-react-plugin:kendo-react-accessibility My Grid has a custom cell template with multiple buttons. How do I make keyboard navigation work for the focusable elements inside the cell?
/kendo-angular-plugin:kendo-angular-accessibility How can I improve accessibility for screen reader users navigating a Grid that displays employee data?

Upgrade Versions

Use the version-upgrade skill to guide major version upgrades, including breaking changes, rendering changes, framework compatibility, and safe upgrade planning:

PluginSkill
kendo-react-pluginkendo-react-version-upgrade
kendo-angular-pluginkendo-angular-version-upgrade

Example prompts:

/kendo-react-plugin:kendo-react-version-upgrade Upgrade my project to the latest KendoReact major version and resolve any breaking changes
/kendo-angular-plugin:kendo-angular-version-upgrade What breaking changes should I expect when upgrading Kendo UI for Angular, and how do I plan the migration?

Manage Licensing

Use the licensing skill to understand how license verification works, how to set up your license key, and how to troubleshoot license-related issues:

PluginSkill
kendo-react-pluginkendo-react-product-licensing
kendo-angular-pluginkendo-angular-product-licensing

Example prompts:

/kendo-react-plugin:kendo-react-product-licensing How do I set up my KendoReact license key and why am I seeing a license warning?
/kendo-angular-plugin:kendo-angular-product-licensing Help me troubleshoot an invalid license error in my Kendo UI for Angular project

Contributing

See CONTRIBUTING.md for plugin structure, template rendering, and versioning.

NPM
@progress/kendo-react-mcp
Install Command
npm install @progress/kendo-react-mcp