Kendo UI for Angular MCP Server

The Kendo UI for Angular MCP Server lets you interact with AI 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 for Angular AI code generation and 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.

Prerequisites

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

• Node.js 18 or a newer version.
• A compatible MCP client (IDE, code editor or app) that supports MCP tools.
• A Telerik user account.
• An active DevCraft or Kendo UI for Angular license or a Kendo UI for Angular trial.
• An Angular application that includes Kendo UI for Angular.

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-angular-assistant
• 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 the location of your Telerik license file.
• Use a TELERIK_LICENSE argument and paste your Telerik license key. Make sure to update the license key when necessary.

VSCode

For detailed instructions, refer to Use MCP servers in VS Code.

This section applies to VS Code 1.102.1 and newer versions.

Make sure that chat.mcp.enabled is enabled in the VS Code settings.

Workspace Configuration

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 with the following content:

json

{
  "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"
      }
    }
  }
}

Global Configuration

To add the Kendo UI for Angular MCP Server globally for VS Code, run the MCP: Open User Configuration command from the Command Palette and add the above content to the automatically created mcp.json file in your user profile.

Alternatively, manually create an mcp.json file with the above content in your user folder.

Cursor

For detailed instructions, refer to Model Context Protocol.

Workspace Configuration

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 with the following content:

json

{
  "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"
      },
    }
  }
}

Global Configuration

To add the Kendo UI for Angular MCP Server globally for Cursor, add a .cursor folder with the above mcp.json file in your user folder.

Usage

To use the Kendo UI for Angular MCP server:

1. Start your prompt with one of the following:

   • kendo
   • /kendo
   • @kendo
   • kendoangular
   • /kendoangular
   • @kendoangular

   Or, if you are using VSCode you can type #kendo_angular_assistant to make sure the Copilot chat will call the Kendo UI for Angular MCP server.

2. Confirm that the Kendo UI for Angular MCP server is used, because this doesn't happen deterministically. Look for a statement in the output, which is similar to:

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

   If the Kendo UI for Angular MCP server is not used even though it's installed and enabled, then try rephrasing your prompt and use another trigger syntax from the list in step 1.

3. Grant the Kendo UI for Angular MCP server a permission to run for this session, workspace, or always.

4. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information.

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.

Sample Prompts

The following list describes how your prompts may look like:

• "/kendoangular Generate a Kendo UI for Angular Grid with sorting and paging enabled. Bind the Grid to dummy data."
• "/kendoangular Generate a Kendo UI for Angular ComboBox that shows a list of products."
• "/kendoangular Show me sample code for a Kendo UI for Angular Grid with virtual scrolling for the rows and columns."

Number of Requests

A Telerik Subscription license is recommended in order to use the Kendo UI for Angular AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a limited number of requests per year.

Connect to Local AI Model

You can use the Kendo UI for Angular MCP server with local large language models (LLM). For example, run your local model through Ollama and use a third-party package such as MCP-LLM Bridge to connect the model to the Kendo UI for Angular MCP server. This will allow you to use the Kendo UI for Angular AI Coding Assistant without a cloud-based AI model.

See Also

• Kendo UI for Angular extension for GitHub Copilot