Kendo UI for Angular WebMCP Tools Overview

Updated on May 21, 2026

WebMCP is an experimental browser standard. It is currently available behind a feature flag in some Chromium-based browsers. The API and behavior may change as the standard evolves. The Kendo UI for Angular WebMCP integration is a preview feature.

WebMCP is a browser standard that lets web applications expose actions to AI agents running in the browser. Instead of the AI reading the DOM or simulating clicks, each component tells the AI exactly what it can do.

Kendo UI for Angular components support WebMCP out-of-the-box via the @progress/kendo-angular-webmcp package. When enabled, a component registers its operations (sorting, filtering, navigation, value changes, and more) as tools that an AI agent can call directly. For example, an AI can sort a Grid, navigate a Scheduler to a date, or set a value in an input—all from a natural language prompt.

See It in Action

When a component has WebMCP enabled, a connected AI agent can control it through natural language. The user types a prompt and the component reacts without the need to click buttons and fill-in forms.

For example:

• "Show only orders from last month"—the Grid filters accordingly.
• "Go to next week"—the Scheduler navigates forward.
• "Set the discount to 15"—the NumericTextBox updates its value.

The result is the same as if the user had interacted with the UI directly.

To learn more, visit the AI-Ready Components page and see the following videos below.

AI Agent-Ready Dashboard

Telerik and Kendo UI Workflows

Enable Browser WebMCP

1. Enable the Browser Flag

WebMCP is currently available behind a browser flag in Chromium-based browsers.

1. Open chrome://flags/#enable-webmcp-testing in your Chromium browser (these URLs cannot be clickable).
2. You should see WebMCP for testing. Set the flag to Enabled.
3. Restart the browser.

2. Install the Telerik & Kendo WebMCP Browser Extension

The browser flag enables the WebMCP API, but you still need an AI client that can discover and call the registered tools. The Telerik & Kendo UI WebMCP browser extension is a browser extension that provides a chat interface connected to an AI model. It reads the tools on the current page and invokes them based on your prompts.

1. Download the Telerik & Kendo UI WebMCP browser extension
2. Unzip the file.
3. Open chrome://extensions/ in your Chromium browser (these URLs cannot be clickable).
4. Enable Developer mode at the top-right.
5. Click the Load unpacked button at the top-left and select the folder that holds the unzipped extension.

See the Extension Documentation for details on the extension features and settings.

3. Try the Demos

Once you enable WebMCP in your browser and configure the Telerik WebMCP browser extension, you can explore WebMCP in action:

• WebMCP Basic Demo
• WebMCP Operations Hub Demo

Enable WebMCP for Kendo UI for Angular Components

All Kendo UI for Angular components that support WebMCP follow the same configuration pattern using the kendoWebMcp directive from @progress/kendo-angular-webmcp.

Installation

bash

npm i @progress/kendo-angular-webmcp

Import KENDO_WEBMCP

Import KENDO_WEBMCP into your Angular component or module alongside the component you want to enable:

typescript

import { KENDO_GRID } from '@progress/kendo-angular-grid';
import { KENDO_WEBMCP } from '@progress/kendo-angular-webmcp';

@Component({
    imports: [KENDO_GRID, KENDO_WEBMCP],
    // ...
})
export class AppComponent {}

Enable the kendoWebMcp Directive

Add the kendoWebMcp directive to any supported Kendo UI for Angular component. Set it to true to register the component's tools with the browser, or pass a configuration object for more control.

html

<!-- Simplest - registers tools with a generic label -->
<kendo-grid [data]="data" [kendoWebMcp]="true"></kendo-grid>

<!-- With a semantic data name - AI agents use this to target the right component -->
<kendo-grid [data]="data" [kendoWebMcp]="{ dataName: 'employees' }" [sortable]="true" [filterable]="true">
</kendo-grid>

The dataName is embedded in every tool name registered by the component. For example, with dataName: 'employees', the sort tool becomes employees-sort-column. AI agents understand natural language in any language, so dataName can be in any language.

Settings and Tool Overrides

Components register tools based on their configuration. For example, the Grid registers the {dataName}-sort-column tool only when [sortable]="true". Some tools like {dataName}-highlight are always registered when kendoWebMcp is applied. See Supported Components for a list of all component tools and their registration conditions.

Some tools are never registered by default even when kendoWebMcp is applied. For example, {dataName}-get-data returns all Grid rows to the AI model, which can expose sensitive data or bloat the AI context. Such tools are useful when you want the AI to read and process your data, but they require an explicit opt-in. Use the tools configuration in the kendoWebMcp binding to enable them:

html

<kendo-grid
    [data]="data"
    [kendoWebMcp]="{ dataName: 'sales', tools: enableGetData }"
    [sortable]="true"
    [filterable]="true"
></kendo-grid>

typescript

enableGetData = (tools: WebMcpToolOption[]) =>
    tools.map(t => t.name === 'get-data' ? { ...t, enabled: true } : t);

Tool Overrides

You can customize individual tools through the tools configuration in the kendoWebMcp binding:

Option	Type	Description
dataName	string	Human-readable data name exposed to AI agents. Used as the prefix for all tool names.
tools	(tools: WebMcpToolOption[]) => WebMcpToolOption[]	A callback that receives the component's registered tools and returns the final tool list. Use it to override tool descriptions, remove tools, or add custom ones.

Components provide default descriptions for each tool. However, to ensure a smooth and more deterministic user experience, you can customize the description of each enabled tool and add more context for the AI model. For example, provide descriptions that reflect your data, as users rarely mention component names in their prompts. For example, "show me sales above $500" should match a filter tool on a Sales table, not just any filter. Thus, the filter tool description of the Grid should mention "sales".

In the following example:

• The filter tool uses a custom description.
• The export-excel tool is disabled and will not be registered.
• The get-data tool is explicitly enabled. It is disabled by default because it returns raw grid data to the AI model, which may include sensitive information. Only enable it when the data is safe to expose.
• All other tools that match the Grid's enabled features (sorting, paging) are registered with their default names and descriptions.

Customize tool registrations in a Kendo UI for Angular Grid

typescript

import { Component } from '@angular/core';
import { KENDO_GRID } from '@progress/kendo-angular-grid';
import { KENDO_WEBMCP, WebMcpToolOption } from '@progress/kendo-angular-webmcp';

@Component({
    selector: 'app-sales-grid',
    template: `
        <kendo-grid
            [data]="data"
            [kendoWebMcp]="{
                dataName: 'sales',
                tools: customTools
            }"
            [sortable]="true"
            [filterable]="true"
            [pageable]="true"
        >
            <kendo-grid-column field="name" title="Name"></kendo-grid-column>
            <kendo-grid-column field="price" title="Price"></kendo-grid-column>
        </kendo-grid>
    `,
    imports: [KENDO_GRID, KENDO_WEBMCP]
})
export class SalesGridComponent {
    data: any[] = [...];

    customTools = (tools: WebMcpToolOption[]) =>
        tools
            .filter(t => t.name !== 'export-excel')
            .map(t => {
                if (t.name === 'filter') {
                    return { ...t, description: 'Filter the sales data grid by a column.' };
                }
                if (t.name === 'get-data') {
                    return {
                        ...t,
                        description: 'Get the records from the sales data grid.',
                        enabled: true
                    };
                }
                return t;
            });
}

Multiple Instances on the Same Page

If two instances of the same component are on the same page, they will register tools with identical names and the AI will not know which one to use. Set dataName in the kendoWebMcp binding to give each instance a unique prefix.

For example, with dataName: 'sales' and dataName: 'inventory', the tools become sales-sort-column and inventory-sort-column. The AI can now target each instance separately.

Set distinct WebMCP tool names for two Grid instances on the same page

html

<kendo-grid [data]="salesData" [kendoWebMcp]="{ dataName: 'sales' }" [sortable]="true"></kendo-grid>
<kendo-grid [data]="inventoryData" [kendoWebMcp]="{ dataName: 'inventory' }" [sortable]="true"></kendo-grid>

The AI sees sales-sort-column and inventory-sort-column as separate tools and targets each independently.

Supported Components

For the full list of components, their available tools, and tool conditions, see WebMCP Supported Components.

Next Steps

• Learn about the Telerik & Kendo UI WebMCP browser extension
• Find out which Kendo UI for Angular components support WebMCP