Telerik Blogs | Web | JQuery

Kendo UI for jQuery: AI Coding Assistant

2026-03-30T14:22:14Z

See how the Kendo UI for jQuery AI Coding Assistant can help speed up development and prototyping with an MCP server that provides contextually aware code that follows Kendo UI patterns.

AI-powered coding assistants have become an important part of modern software engineering workflows. While AI tools excel at generating code quickly, they still require solid context to deliver their full value. This context becomes even more important when working with a UI library like Progress Kendo UI for jQuery, where correct APIs and configuration patterns matter. This is where the Kendo UI for jQuery AI Coding Assistant comes in.

In this article, we’ll explore what the AI Coding Assistant offers and how it helps speed up component development and prototyping when building applications with Kendo UI for jQuery.

Prerequisites: To use the Kendo UI for jQuery AI Coding Assistant, you’ll need a compatible MCP client (we’ll be using Cursor in this article), an active Kendo UI for jQuery license (or trial) and an application that includes Kendo UI for jQuery.

MCP (Model Context Protocol)

Model Context Protocol (MCP) is an open standard developed by Anthropic that standardizes how applications provide context to AI models and agents. Think of it as a common language that allows different systems to share information with AI in a structured way.

MCP works through servers that expose specific tools and knowledge to AI clients. When we install an MCP server, we’re essentially giving our AI assistant access to specialized expertise in a particular domain. For Kendo UI for jQuery, this means the AI can understand component APIs, configuration options and implementation patterns that it wouldn’t otherwise know about.

The Kendo UI for jQuery AI Coding Assistant is integrated into an MCP Server, which means any MCP-compatible client (like Cursor or VS Code) can tap into this specialized knowledge.

Check out the article The Promise of Model Context Protocol for more details on MCP and what it offers.

Setting Up the MCP Server with Cursor

Cursor is an AI-powered code editor that has native support for MCP servers. Let’s walk through the setup process.

Configuring the MCP Server

The first step is creating the MCP configuration file. In the root of our Kendo UI for jQuery project, we’ll create a .cursor folder with an mcp.json file:

{
  "mcpServers": {
    "kendo-jquery-assistant": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@progress/kendo-jquery-mcp@latest"],
      "env": {
        "TELERIK_LICENSE_PATH": "./telerik-license.txt"
      }
    }
  }
}

This configuration tells Cursor to set up the Kendo UI for jQuery MCP server with the name kendo-jquery-assistant. The TELERIK_LICENSE_PATH environment variable should point to the location of our Telerik license file.

After creating the mcp.json file, you may need to restart Cursor to pick up the new MCP configuration.

Enabling MCP in Cursor Settings

Once we’ve set up the configuration file, we’ll need to verify the MCP server is enabled in Cursor’s settings. We can open Cursor settings and navigate to the “MCP Tools” section, and we should see our kendo-jquery-assistant server listed there. We can toggle it on to enable the server.

When the server appears in the list and is enabled, we’re ready to start using the AI Coding Assistant.

Using the AI Coding Assistant

Before we dive into examples, there are a couple of things to keep in mind when working with the Kendo UI for jQuery AI Coding Assistant.

First, we need to make sure our prompts start with one of these trigger phrases: /kendojquery or @kendojquery, which tells Cursor to use the MCP server.

Second, we should verify that the MCP server is actually being used. We’ll look for confirmation messages like “Running kendo-jquery-assistant” or similar statements in the output. If we don’t see this, we might need to rephrase our prompt or check our configuration.

Building a Grid with the Help of the AI Coding Assistant

Now that we have the Kendo UI for jQuery AI Coding Assistant configured, let’s explore how it enhances our development workflow by building a Kendo UI Grid.

Before we start prompting, here’s the base HTML file we’ll be working with. It includes the Kendo UI theme, jQuery and the Kendo UI for jQuery scripts:


<html>
  <head>
    <meta charset="utf-8" />
    <title>Kendo UI jQuery Grid Exampletitle>

    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.3.0/default/default-main.css" />

    
    <script src="https://code.jquery.com/jquery-3.7.0.min.js">script>

    
    <script src="https://kendo.cdn.telerik.com/2025.4.1321/js/kendo.all.min.js">script>

    
    <script src="telerik-license.js">script>
  head>
  <body>
    <h1>My Kendo UI Gridh1>
  body>
html>

With this foundation in place, we can start using the AI Coding Assistant to build our Grid.

Creating a Basic Grid with Sorting and Paging

We’ll start with a simple prompt to create a Grid from scratch:

Prompt: @kendojquery Generate a Kendo UI for jQuery Grid with sorting and paging enabled. Bind the Grid to dummy data.

The MCP server processes this request and provides us with a complete implementation.

The generated code includes everything we need to get started:


<html>
  <head>
    <meta charset="utf-8" />
    <title>Kendo UI jQuery Grid Exampletitle>

    
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.3.0/default/default-main.css" />

    
    <script src="https://code.jquery.com/jquery-3.7.0.min.js">script>

    
    <script src="https://kendo.cdn.telerik.com/2025.4.1321/js/kendo.all.min.js">script>

    
    <script src="telerik-license.js">script>
  head>
  <body>
    <h1>My Kendo UI Gridh1>

    <div id="grid">div>

    <script>
      $(document).ready(function () {
        // Dummy data for the Grid
        const orderData = [
          { OrderID: 1, OrderDate: new Date("2024-11-06"), Freight: 12.34, ShipCity: "Antwerp", ShipCountry: "Belgium" },
          { OrderID: 2, OrderDate: new Date("2024-03-02"), Freight: 23.45, ShipCity: "Singapore", ShipCountry: "Singapore" },
          { OrderID: 3, OrderDate: new Date("2024-06-26"), Freight: 34.56, ShipCity: "Shanghai", ShipCountry: "China" },
          { OrderID: 4, OrderDate: new Date("2024-09-20"), Freight: 45.67, ShipCity: "Hamburg", ShipCountry: "Germany" },
          { OrderID: 5, OrderDate: new Date("2024-12-12"), Freight: 56.78, ShipCity: "Mumbai", ShipCountry: "India" },
          { OrderID: 6, OrderDate: new Date("2025-02-08"), Freight: 67.89, ShipCity: "Shanghai", ShipCountry: "China" },
          { OrderID: 7, OrderDate: new Date("2025-05-05"), Freight: 78.90, ShipCity: "Tokyo", ShipCountry: "Japan" },
          { OrderID: 8, OrderDate: new Date("2025-08-03"), Freight: 89.01, ShipCity: "Port Klang", ShipCountry: "Malaysia" },
          { OrderID: 9, OrderDate: new Date("2025-10-29"), Freight: 90.12, ShipCity: "Rotterdam", ShipCountry: "Netherlands" },
          { OrderID: 10, OrderDate: new Date("2025-01-23"), Freight: 10.32, ShipCity: "Vancouver", ShipCountry: "Canada" },
          { OrderID: 11, OrderDate: new Date("2024-04-17"), Freight: 21.43, ShipCity: "Colón", ShipCountry: "Panama" },
          { OrderID: 12, OrderDate: new Date("2024-07-11"), Freight: 32.54, ShipCity: "Manila", ShipCountry: "Philippines" }
        ];

        // Initialize the Grid
        $("#grid").kendoGrid({
          dataSource: {
            data: orderData,
            schema: {
              model: {
                fields: {
                  OrderID: { type: "number" },
                  OrderDate: { type: "date" },
                  Freight: { type: "number" },
                  ShipCity: { type: "string" },
                  ShipCountry: { type: "string" }
                }
              }
            },
            pageSize: 5
          },
          columns: [
            { field: "OrderID", title: "Order ID", width: 100 },
            { field: "OrderDate", title: "Order Date", format: "{0:yyyy-MM-dd}", width: 150 },
            { field: "Freight", title: "Freight", format: "{0:c2}", width: 120 },
            { field: "ShipCity", title: "Ship City", width: 150 },
            { field: "ShipCountry", title: "Ship Country" }
          ],
          sortable: true,
          pageable: true,
          height: 400
        });
      });
    script>
  body>
html>

The code includes realistic dummy data, proper Grid initialization with jQuery’s document ready pattern and appropriate configuration for sorting and paging.

This is where the AI Coding Assistant really shines. Instead of receiving generic code that may not work correctly with Kendo UI for jQuery, we’re getting code that follows the library’s practices and patterns.

Adding Filtering Capabilities

Building on our basic Grid, let’s add filtering functionality with a follow-up prompt:

Prompt: @kendojquery Can we add filtering to this Grid?

The MCP server understands our existing context and enhances the implementation:

$("#grid").kendoGrid({
  dataSource: {
    data: orderData,
    schema: {
      // ...
    },
    pageSize: 5
  },
  columns: [
    // ...
  ],
  sortable: true,
  filterable: true, // filterable is added
  pageable: true,
  height: 400
});

The MCP server intelligently added the filterable: true property to our Grid configuration, which demonstrates how we can iteratively build up our components through conversation with the AI.

Enabling Inline Editing

We’ll take our Grid one step further by adding the ability to edit cells inline:

Prompt: @kendojquery Can we make the ship city and ship country columns editable inline?

The MCP server enhances our Grid with editing capabilities:

$("#grid").kendoGrid({
  dataSource: {
    data: orderData,
    schema: {
      OrderID: { type: "number", editable: false },
      OrderDate: { type: "date", editable: false },
      Freight: { type: "number", editable: false },
      // adding editable: true to these columns
      ShipCity: { type: "string", editable: true },
      ShipCountry: { type: "string", editable: true }
    },
    pageSize: 5
  },
  columns: [
    // ...
  ],
  // ...
});

The MCP server understood exactly what we needed. It added the editable property and configured the dataSource schema to specify which fields should be editable. The OrderID, OrderDate and Freight fields are marked as non-editable, while ShipCity and ShipCountry can be edited directly in the Grid cells.

This iterative approach shows the power of working with the AI Coding Assistant. We started with a basic Grid and progressively added sorting, paging, filtering, and now inline editing, all through natural conversation.

Wrap-up

While much of the AI coding hype focuses on newer frameworks, the Kendo UI for jQuery AI Coding Assistant shows that teams working with established technologies like jQuery can still benefit from these same productivity gains.

In this article, we’ve seen how the MCP server provides contextually aware code that follows Kendo UI patterns. Instead of fixing generic AI output or cross-referencing documentation, we can iterate quickly and let the assistant handle the component-specific details.

For more details, check out the official Kendo UI for jQuery AI Coding Assistant documentation. And don’t forget, you can try it yourself, free for 30 days!

Try Kendo UI for jQuery

jQuery 4.0.0 Support: What’s New and How Kendo UI Has You Covered

2026-02-12T21:40:57Z

Hello, world, from jQuery 4! Take a look at the noteworthy changes and see how to get up to date with the framework and with Kendo UI for jQuery.

After almost a decade, jQuery 4.0.0 has arrived. With this release, jQuery removes legacy browser support, drops deprecated APIs, aligns event behavior with modern standards and modernizes the codebase. If you’re maintaining applications that still use jQuery or libraries built on top of it, this release is worth understanding.

And the best part? Progress Kendo UI for jQuery is fully compatible and ready for jQuery 4.

What’s New in jQuery 4?

Below is a breakdown of what actually changed, why it matters and what you need to update in your own code.

Modernized Core

ES modules + Rollup packaging for compatibility with modern bundlers and ) and use import and export statements to dynamically load all other dependencies.
Let’s take the Kendo UI Grid as an example. In order to load the Grid component with all the features, you would need to list 70ish js files (you can check the list here: Data Management Components). With the JavaScript modules, you are required to add a reference or import only one file—the main bundle: . And this will let the browser load all other dependencies by itself.
And, yes, a module is loaded only once. That means that if you load another component that relies on an already loaded dependency it will not be fetched again—it is already loaded by the browser and it will be directly used.
All our major distributions (zip bundles, CDN and so on) include compiled JavaScript modules.
1. Using the JavaScript Modules from CDN
In the CDN, the JavaScript Modules are located in the /mjs/ folder.
You can use them like so:
```
<script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.grid.js" type="module">script>
 <script type="module">
    $("#grid").kendoGrid({
        ...
    });
script>
```
or
```
import 'https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.grid.js';
 $("#grid").kendoGrid({
    ...
});
```
2. Using the JavaScript modules from a downloaded distribution
You can download the distributed bundles from your Telerik account in the download section. In the mjs folder you will find the modules readily available for you to copy to your application and use them.
```
<script src="./mjs/kendo.grid.js" type="module">script>
 <script type="module">
    $("#grid").kendoGrid({
        ...
    });
script>
```
or
```
import './mjs/kendo.grid.js';
 $("#grid").kendoGrid({
    ...
});
```
How To Improve Performance
I think we are all on the same page now—JavaScript modules are cool. But let’s see how they can improve our applications and the loading performance.
Let’s say we have a very simple application with a button that opens a dialog/window and loads a grid with a bunch of data in it. Using the Kendo UI for jQuery components and the plain JS files will look something like this:
index.html
```
<html>
    <head>
        <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    head>
    <body>
        <button id="openBtn">Openbutton>
        
        <div id="gridDialog">
        div>
        
        <link async href="./styles/kendo/web/kendo.default-ocean-blue.css" rel="stylesheet" media="screen" />
        <script defer src="./js/jquery/jquery.min.js">script>
        <script defer src="./js/kendo/js/kendo.all.min.js">script>
        <script defer src="./js/products.js">script> 
        <script defer src="./js/index.js" type="module">script>
    body>
html>
```
index.js
```
$('#openBtn').kendoButton({
    click: openDialog
});

function openDialog() {
    const gridDialog = $("#gridDialog").kendoDialog({
        width: 400,
        content: '
'
    }).data("kendoDialog");
    
    gridDialog.one("show", async () => {
        const gridElm = $('
').appendTo("#dialogContent");
        initGrid(gridElm);
    });
    
    gridDialog.open();
}

function initGrid(gridElm) {
    gridElm.kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
        ]
    });
}
```
Quite a simple example that loads fast and everything works fine. Let’s check the performance score by running a check with the Lighthouse tool in Chrome’s dev console.
At this point, if load performance is a thing for you, you should attempt to optimize the application. With the plain JS Kendo UI bundles, you could more or less save the day by listing only the script that you need, create a custom Kendo UI bundle with only the code you need, and come up with a score of 85-90. You could also apply dynamic loading by using third-party methods or some other magic and possibly get a bit higher than 90. But all this requires a lot of back and forth with the code. Not to mention that it makes it unreadable and unmaintainable (in most cases).
Now let’s see how we can use the browser’s module system to make things better. First, we will need to step back and separate all code into modules that rely on dependencies.
index.html
```
<html>
    <head>
        <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    head>
    <body>
        <button id="openBtn">Openbutton>
        
        <div id="gridDialog">
        div>
        
        <link async href="./styles/kendo/web/kendo.default-ocean-blue.css" rel="stylesheet" media="screen" />
        <script async  src="./js/index.js" type="module">script>
    body>
html>
```
index.js
```
import './jquery/jquery.min.js';
import './kendo/mjs/kendo.button.js';

$('#openBtn').kendoButton({
    click: async () => {
        const { openDialog } = await import("./dialog.js");

        openDialog();
    }
});
```
dialog.js
```
import './kendo/mjs/kendo.dialog.js';

export function openDialog() {
    const gridDialog = $("#gridDialog").kendoDialog({
        width: 400,
        content: '
'
    }).data("kendoDialog");

    gridDialog.one("show", async () => {
        const { initGrid } = await import("./grid.js");
        const gridElm = $('
').appendTo("#dialogContent");

        initGrid(gridElm);
    });

    gridDialog.open();
}
```
grid.js
```
import './kendo/mjs/kendo.grid.js';

export async function initGrid(gridElm) {
    const { products } = await import("./products.js");

    gridElm.kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        UnitsInStock: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        columns: [
            "ProductName",
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
            { field: "Discontinued", width: "130px" }
        ]
    });
}
```
products.js
```
export const products = [{
    ProductID : 1,
    ProductName : "Chai",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "10 boxes x 20 bags",
    UnitPrice : 18.0000,
    UnitsInStock : 39,
    UnitsOnOrder : 0,
    ReorderLevel : 10,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }
},
    ....
```
Now let’s run a performance check once more.
This score is more satisfactory. And now we have more readable code with good separation, which makes it better than before. Plus, we can take advantage and reuse parts of the code we write in our applications.
A bit more drilling down will explain more why using dynamic loading and modules save the day. In the example above, we see that none of the huge scripts (kendo.dialog.js and kendo.grid.js) are loaded until the button is clicked. Therefore, scripts are loaded only when the end user requires a specific functionality in your application. In short, with initial load, only the CSS and the scripts for the Button are loaded. The rest is handled by the browser.
Using JavaScript Modules in Telerik UI for ASP.NET MVC and Core
The new modules are available in the Telerik UI for ASP.NET MVC and Core bundles as well. You can find them in the mjs folder. Using them requires deferred initialization.
This is an example how to use a Telerik UI for ASP.NET Core Grid component with the module system:
```
(Html.Kendo().Grid<My_App.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound("productName");
        columns.Bound("unitPrice");
    })
    .DataSource(dataSource => dataSource
        .Custom()
        .Transport(tr => tr.Read("Products_Read", "Grid"))
        .Schema(sc => sc.Data("data"))
    )
    .Deferred()
)

@section Scripts { 
<script type="module">
    import '@Url.Content("/js/mjs/kendo.grid.js")';
    import '@Url.Content("/js/mjs/kendo.aspnetmvc.js")';

    @Html.Kendo().DeferredScripts(false)
</script>
}
```
Updates in the NPM Packages
The NPM packages (@progress/kendo-ui and kendo-ui-core) are extended with module and browser fields so that you can include scripts according to the module system of your project.
That means that now you can instruct the module loader/bundler (according to its specific configuration) to get the specific module system from the NPM package so that you do not need to alter the preferred compiler/transpiler.
Note that WebPack uses the browser field with priority. You can check that from here as well: WebPack docs.
For example, using WebPack with ECMAScript-based application, you can set up the mainFields option to get the module field:
```
...
  resolve: {
    mainFields: [ 'module', 'browser', 'main' ]
  },
...
```
or make an alias:
```
  resolve: {
    alias: {
      '@progress/kendo-ui': path.resolve(__dirname, 'node_modules/@progress/kendo-ui/esm/kendo.all.js') 
    },
  },
```
Or you can configure it to use CommonJS modules:
```
...
  resolve: {
    mainFields: [ 'main', 'browser', 'module' ]
  },
...
```
or make an alias:
```
  resolve: {
    alias: {
      '@progress/kendo-ui': path.resolve(__dirname, 'node_modules/@progress/kendo-ui/js/kendo.all.js') 
    },
  },
```
Every module loader is different, and you should check the documentation to see how you can set it up according to your needs.
The Future
With this effort, we are looking into new ways to improve the Kendo UI for jQuery and Telerik UI for ASP.NET MVC and Core products. And this step opens new ways to tackle features, functionalities and provide better support.
For example, a small disclosure on what we are working on after releasing the module system is towards better CSP support and an alternative template mechanism.
As always, we are open to feedback. So if you happen to have a suggestion or idea that would make your life better with our products do not hesitate to contact us through our support channels, Feedback Portal, forums or comments.