Kendo UI for Angular MCP Server

The Kendo UI for Angular MCP Server enables you to achieve integration with your already existing AI workflows and reach new levels of developer productivity. The MCP server provides proprietary context to AI-powered IDEs, apps and tools. You can use the Kendo UI for Angular MCP server to ask about Kendo UI for Angular components, features, or general usage. You can successfully prompt more complex questions and tasks, and generate tailored code that includes Kendo UI for Angular components and API.

As of version 1.3 the Kendo UI for Angular MCP server supports two modes of operation that depends on your Telerik license type:

• Agentic UI Generator—Includes all four specialized tools (Component, Layout, Styling, and Icon), coordinated by a comprehensive orchestrator designed for complete UI generation.
• AI Coding Assistant—Includes the Component Tool and Icon Tool, coordinated by an orchestrator optimized for component-level development.

Agentic UI Generator Intended Use

• Create Individual Components: Build specific Kendo UI for Angular components with particular configurations and features like filtering, validation, and data binding.
• Create Full Responsive Pages
  • Build complete dashboards, landing pages, and listing pages in existing applications.
  • Generate pages similar to the Progress Design System page templates.
• Modify Existing Pages: Generate new themes inside existing applications. Add dark mode or high-contrast themes.
• Implement Responsive Layout
  • Create new responsive pages and sections.
  • Convert existing pages to be responsive for mobile and tablet views.

AI Coding Assistant Intended Use

• Initial code generation: Quickly add components to your app to speed up the initial development.
• Component configuration: Enable or disable specific component features, or fine tune the configuration through prompting. More * complex configurations are possible but may require additional manual work to be production-ready.
• Dummy data generation and data binding: Quickly add data to your app for testing and prototyping purposes. Avoid exposing or providing access to your proprietary or production data to AI-enabled tools.
• Step-by-step explanations: Understand the solutions provided by the AI Coding Assistant through the detailed explanations (depends * on the tool, mode, and model used). To further develop your knowledge, check the respective documentation.
• Preliminary troubleshooting: Resolve obvious and easy-to-solve issues affecting your code. For more complex issues, look for assistance from the community or contact the support team.

Prerequisites

To use the Kendo UI for Angular MCP server, you need:

• A compatible MCP client (IDE, code editor or app) that supports MCP tools.
• An active Telerik license that provides access to the Kendo UI for Angular MCP server.

Installation

Use the documentation of your AI-powered MCP client to add the Kendo UI for Angular MCP server to a specific workspace or globally. You can see installation tips and examples for some popular MCP clients below.

The generic settings of the Kendo UI for Angular MCP server are:

• Server name: kendo-mcp
• Type: stdio (standard input/output transport)
• Command: npx (the MCP server works through an npm package)
• Supported arguments: -y
• npm package name: @progress/kendo-angular-mcp
• You also need to add your Telerik licence key as an env parameter in the mcp.json file. There are two options:
  • (recommended) Use a TELERIK_LICENSE_PATH argument and point to your Telerik license file location.
  • Use a TELERIK_LICENSE argument and paste your Telerik license key. Make sure to update the license key when necessary.

You can ignore the env parameter if you have the Telerik license key set up as a global environment variable on your machine. And if the MCP client supports passing global environment variables to MCP servers.

Authentication

The Kendo UI for Angular MCP server requires an active Subscription or trial license and a valid key for authentication. You can configure your license key either globally on your machine or locally in the mcp.json configuration file.

• (Recommended) When set globally, the MCP server automatically recognizes the license and you can ignore the env parameter in the mcp.json setup.
• When configured locally, you have to define either one of the following variables inside the mcp.json file:
  • TELERIK_LICENSE_PATH—to point to your license file location.
  • TELERIK_LICENSE—to paste your license key directly.

For detailed instructions on obtaining and managing your license key, see Kendo UI for Angular Licensing.

Configuration Examples

VSCode - Copilot

Refer to Use MCP servers in VS Code.

To enable the Kendo UI for Angular MCP server in a specific workspace or Angular app, add a .vscode folder with an mcp.json file at the root of the workspace:

.vscode/mcp.json at the workspace root

{
  "servers": {
    "kendo-angular-assistant": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@progress/kendo-angular-mcp@latest"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      }
    }
  }
}

You can ignore the env parameter if you have the Telerik license key set up as a global environment variable on your machine. And if the MCP client supports passing global environment variables to MCP servers.

Cursor

Refer to Model Context Protocol.

To enable the Kendo UI for Angular MCP server in a specific workspace or Angular app, add a .cursor folder with an mcp.json file at the root of the workspace.

.cursor/mcp.json at the workspace root

{
  "mcpServers": {
    "kendo-angular-assistant": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@progress/kendo-angular-mcp@latest"],
      "env": {
        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
        // or
        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
      },
    }
  }
}

You can ignore the env parameter if you have the Telerik license key set up as a global environment variable on your machine. And if the MCP client supports passing global environment variables to MCP servers.

Usage

To increase the probability of the Kendo UI for Angular MCP Server being used, or to call it without the need to mention "kendo" explicitly, add custom idea instructions to your AI-powered tool. Here are examples for GitHub Copilot and Cursor.

Agentic UI Generator

To use the Agentic UI Generator mode:

1. Open the AI chat interface in your IDE—Start a new chat session to begin interacting with the Agentic UI Generator.
2. Start your prompt with #kendo_ui_generator (the main MCP tool to start the agentic workflow in the Agentic UI Generator).
3. This will trigger an agentic workflow using the other available MCP tools to retrieve relevant context based on your prompt.
4. Inspect the output and verify that the Kendo UI for Angular MCP Server is used. Look for a statement in the output, which is similar to:
   • Running kendo-angular-mcp-server (in VS Code)
   • Calling MCP tool kendo-angular-mcp-server (in Cursor)
5. If requested, grant the Kendo UI for Angular MCP server a permission to run for this session, workspace, or always.

Also check more useful documentation about how to use the Agentic UI Generator here:

• Getting Started
• Use Cases
• Best Practices for more usage tips.
• Prompt Library

AI Coding Assistant

To use the AI Coding Assistant mode:

1. Start your prompt with #kendo_angular_assistant (the main MCP tool to start the agentic workflow in the coding agent).

2. This will trigger an agentic workflow using the other available MCP tools to retrieve relevant context based on your prompt.

3. Inspect the output and verify that the Kendo UI for Angular MCP Server is used. Look for a statement in the output, which is similar to:

   • Running kendo-angular-mcp-server (in VS Code)
   • Calling MCP tool kendo-angular-mcp-server (in Cursor)

   If the Kendo UI for Angular 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.

4. If requested, grant the Kendo UI for Angular MCP server a permission to run for this session, workspace, or always.

Also check more useful documentation about how to use the AI Coding Assistant here:

• Getting Started
• Use Cases
• Best Practices
• Prompt Library

AI Tools Usage

Access to the Kendo UI for Angular AI Tools is determined by your Telerik license type. Each license tier provides different levels of access and functionality:

• License Requirements
• Usage Limits