Blazor.WebMcpKit 1.0.0-preview.1

Blazor.WebMcpKit

Created by the Telerik UI for Blazor team, Blazor.WebMCPKit is an open-source library that enables any Blazor component to expose WebMCP tools and become agent-aware.

A lightweight library for exposing Blazor component methods as WebMCP tools that AI agents can discover and invoke directly in the browser.

Installation

dotnet add package Blazor.WebMcpKit

Setup

Register the WebMCP services in Program.cs:

using Blazor.WebMcpKit.Extensions;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddWebMcp();

Namespaces

Add the following @using to your _Imports.razor (or per-component) to access all public types:

@using Blazor.WebMcpKit

For the DI registration helper add this once in Program.cs:

using Blazor.WebMcpKit.Extensions;

Attribute-based registration

Inherit from WebMcpComponentBase and decorate methods with [WebMcpTool]. Tools are registered automatically on first render and unregistered on disposal.

@page "/shop"
@inherits WebMcpComponentBase

@code {
    [WebMcpTool("get_products",
        Description = "Returns a list of available products.",
        ReadOnly = true)]
    public string GetProducts()
    {
        return JsonSerializer.Serialize(_products);
    }

    [WebMcpTool("add_to_cart",
        Description = "Adds a product to the shopping cart.",
        ReadOnly = false)]
    public async Task<string> AddToCart(
        [WebMcpParam("Product SKU", Required = true)] string sku,
        [WebMcpParam("Quantity")] int qty = 1)
    {
        await CartService.AddAsync(sku, qty);
        return $"Added {qty}x {sku} to cart.";
    }
}

[WebMcpTool] options

[WebMcpParam] options

[WebMcpIgnore]

Excludes a parameter from the generated JSON Schema entirely — use it for injected services, CancellationToken, or any framework type the agent should not see.

[WebMcpTool("export", Description = "Exports data.", ReadOnly = true)]
public string Export(
    [WebMcpParam("Format", Enum = ["json", "csv"])] string format = "json",
    [WebMcpIgnore] ILogger<MyComponent> logger = null!)
{
    logger?.LogInformation("Exporting as {Format}", format);
    // ...
}

Programmatic registration

Use IWebMcpRegistry directly when you need conditional or dynamic tool registration:

@inherits WebMcpComponentBase

@code {
    private bool _clearRegistered;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        await SyncClearToolAsync();
    }

    private async Task SyncClearToolAsync()
    {
        var hasDone = _items.Any(i => i.Done);

        if (hasDone && !_clearRegistered)
        {
            await WebMcpRegistry.RegisterToolAsync(new WebMcpToolDefinition
            {
                Name        = "clear_completed",
                Description = "Removes all completed items. Only available when at least one item is done.",
                Annotations = new WebMcpToolAnnotations(ReadOnlyHint: false),
                InputSchema = new WebMcpInputSchema { Type = "object" },
                Execute     = async _ =>
                {
                    var count = _items.RemoveAll(i => i.Done);
                    StateHasChanged();
                    return $"Cleared {count} item(s).";
                }
            });
            _clearRegistered = true;
        }
        else if (!hasDone && _clearRegistered)
        {
            await WebMcpRegistry.UnregisterToolAsync("clear_completed");
            _clearRegistered = false;
        }
    }
}

Trying the tools with an agent

Open the playground page in the browser and connect a WebMCP-compatible agent. A quick way to do this is the Telerik WebMCP browser extension, which exposes the registered tools to any MCP-aware AI assistant.

Legal Notice

Progress reserves all rights in any Progress or Telerik trademarks displayed or used within any of the materials. Any future versions or updates of the Works may be licensed under different terms.