# Kendo UI for Angular WebMCP Tools Overview

> important 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](https://developer.chrome.com/blog/webmcp-epp) 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](https://www.telerik.com/ai-components) page and see the following videos below.

<div style="display: flex; gap: 1em; flex-wrap: wrap;">

<div>
<p><strong>AI Agent-Ready Dashboard</strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/YSbnMzPu9SM" title="AI Agent-Ready Dashboard powered by Telerik and Kendo UI with WebMCP" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

<div>
<p><strong>Telerik and Kendo UI Workflows</strong></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UPzLqOjUsuM" title="Telerik and Kendo UI Workflows Powered by WebMCP" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

</div>

## 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 WebMCP Extension](https://chromewebstore.google.com/detail/telerik-kendo-ui/bikfklddeekcicbafiejfbbpdjnaaiid) 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.

[Install the Telerik WebMCP Browser Extension](https://chromewebstore.google.com/detail/telerik-kendo-ui/bikfklddeekcicbafiejfbbpdjnaaiid) from the Chrome Web Store. Then, see the [Extension Documentation](https://www.telerik.com/kendo-angular-ui-develop/components/ai-tools/web-mcp/extension) 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](https://www.telerik.com/kendo-angular-ui-develop/components/ai-tools/web-mcp/extension#settings), you can explore WebMCP in action:

* [WebMCP Basic Demo](https://demos.telerik.com/kendo-angular-ui/demos/webmcp/dashboard?theme=meridian-main-dark)
* [WebMCP Operations Hub Demo](https://demos.telerik.com/kendo-angular-ui/demos/webmcp/operations-hub?theme=meridian-main-dark)

## 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

Run the following command in your Angular project to install the `@progress/kendo-angular-webmcp` package:

```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

<kendo-grid [data]="data" [kendoWebMcp]="true"></kendo-grid>


<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](https://www.telerik.com/kendo-angular-ui-develop/components/ai-tools/web-mcp/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:

<table>
    <colgroup>
        <col width="100">
        <col width="300">
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code>dataName</code></td>
            <td><code>string</code></td>
            <td>Human-readable data name exposed to AI agents. Used as the prefix for all tool names.</td>
        </tr>
        <tr>
            <td><code>tools</code></td>
            <td><code>(tools: WebMcpToolOption[]) =&gt; WebMcpToolOption[]</code></td>
            <td>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.</td>
        </tr>
    </tbody>
</table>

> tip 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.

> caption 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.

> caption 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](https://www.telerik.com/kendo-angular-ui-develop/components/ai-tools/web-mcp/supported-components).

## Next Steps

* [Learn about the Telerik & Kendo UI WebMCP browser extension](https://www.telerik.com/kendo-angular-ui-develop/components/ai-tools/web-mcp/extension)
* [Find out which Kendo UI for Angular components support WebMCP](https://www.telerik.com/kendo-angular-ui-develop/components/ai-tools/web-mcp/supported-components)