KendoReact WebMCP Tools OverviewPremium
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 KendoReact 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.
KendoReact components support WebMCP out-of-the-box via the @progress/kendo-react-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.
- Open
chrome://flags/#enable-webmcp-testingin your Chromium browser (these URLs cannot be clickable). - You should see WebMCP for testing. Set the flag to Enabled.
- 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.
- Download the Telerik & Kendo UI WebMCP browser extension
- Unzip the file.
- Open
chrome://extensions/in your Chromium browser (these URLs cannot be clickable). - Enable Developer mode at the top-right.
- 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:
Enable WebMCP for KendoReact Components
All KendoReact components that support WebMCP follow the same configuration pattern using the webMcp prop and the WebMcpProvider from @progress/kendo-react-webmcp.
Installation
npm i @progress/kendo-react-webmcpWebMcpProvider
Wrap your application (or the relevant section) with WebMcpProvider to enable WebMCP tool registration for all components underneath it.
import { WebMcpProvider } from '@progress/kendo-react-webmcp';
function App() {
return <WebMcpProvider>{/* KendoReact components with webMcp prop */}</WebMcpProvider>;
}
Enable The webMcp Prop
Each KendoReact component that supports WebMCP accepts a webMcp prop. Set it to true to register the component's tools with the browser, or pass a configuration object for more control.
// Simplest — registers tools with a generic label
<Grid data={data} webMcp={true} />
// With a semantic data name - AI agents use this to target the right component
<Grid data={data} webMcp={{ dataName: 'employees' }} sortable filterable />The dataName is embedded in every tool name registered by the component. For example, with dataName: 'employees', the sort tool becomes employees_grid_sort. 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}_grid_sort tool only when sortable={true}. Some tools like {dataName}_grid_highlight are always registered when webMcp is set. See Supported Components for a list of all component tools and their registration conditions.
Some tools are never registered by default even when webMcp is set. For example, {dataName}_grid_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 webMcp prop to enable them:
<Grid
data={data}
webMcp={{
dataName: 'sales',
tools: (tools) => tools.map((t) => (t.name === 'get_data' ? { ...t, enabled: true } : t))
}}
sortable
filterable
/>Tool Overrides
You can customize individual tools through the tools configuration in the webMcp prop:
| Option | Type | Description |
|---|---|---|
dataName | string | Human-readable data name exposed to AI agents. Used as the prefix for all tool names. |
tools | (tools: WebMcpTool[], helpers?) => WebMcpTool[] | 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
filtertool description of the Grid should mention "sales".
In the following example:
- The
filtertool uses a custom description. - The
export_exceltool is disabled and will not be registered. - The
get_datatool 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 KendoReact Grid
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { WebMcpProvider } from '@progress/kendo-react-webmcp';
function SalesGrid({ data }) {
return (
<WebMcpProvider>
<Grid
data={data}
webMcp={{
dataName: 'sales',
tools: (tools) =>
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;
})
}}
sortable
filterable
pageable
>
<GridColumn field="name" title="Name" />
<GridColumn field="price" title="Price" />
</Grid>
</WebMcpProvider>
);
}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 on the webMcp prop to give each instance a unique prefix.
For example, with dataName: 'sales' and dataName: 'inventory', the tools become sales_grid_sort and inventory_grid_sort. The AI can now target each instance separately.
Set distinct WebMCP tool names for two Grid instances on the same page
<WebMcpProvider>
<Grid data={salesData} webMcp={{ dataName: 'sales' }} sortable />
<Grid data={inventoryData} webMcp={{ dataName: 'inventory' }} sortable />
</WebMcpProvider>The AI sees sales_grid_sort and inventory_grid_sort 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.