Components.mcp.blazor

🚀 🧩 Components.MCP.Blazor

A Model Context Protocol (MCP) server that exposes Blazor component metadata for AI-assisted development. It enables ChatGPT, Claude, and other MCP-capable tools to inspect your actual Blazor components — no guessing, no static docs.

🚀 Quick Start

Components.MCP.Blazor offers a Model Context Protocol (MCP) interface, allowing AI agents and development tools to dynamically discover your real Blazor components. It reflects all types inheriting from ComponentBase in your assemblies and presents them as structured MCP tools.

Why this matters

This project creates a connection between AI and Blazor, enabling large language models to understand your components as well as your IDE does.

✨ Features

📦 Available MCP Tools

🔹 components.list

• Description: Lists all discoverable Blazor components and their namespaces.
• Request Example

{
  "method": "tools/call",
  "params": {
    "name": "components.list"
  }
}

• Response Example

{
  "content": [
    {
      "type": "text",
      "text": [
        {
          "name": "NavMenu",
          "namespace": "MyApp.Components.Shared"
        },
        {
          "name": "UserCard",
          "namespace": "MyApp.Components.UI"
        }
      ]
    }
  ]
}

• Use case: AI agents can use this tool to find available components and then suggest or automatically generate correct Razor markup.

🔹 component.details

• Description: Returns full metadata for a specific Blazor component by namespace and name.
• Request Example

{
  "method": "tools/call",
  "params": {
    "name": "component.details",
    "arguments": {
      "componentNamespace": "MyApp.Components.UI",
      "componentName": "UserCard"
    }
  }
}

• Response Example

{
  "content": [
    {
      "type": "text",
      "text": {
        "name": "UserCard",
        "namespace": "MyApp.Components.UI",
        "assembly": "MyApp.Components",
        "parameters": [
          {
            "name": "User",
            "type": "UserModel",
            "isRequired": true,
            "captureUnmatchedValues": false
          }
        ],
        "cascadingParameters": [],
        "injectedDependencies": [
          {
            "name": "Logger",
            "type": "ILogger<UserCard>",
            "isRequired": false,
            "captureUnmatchedValues": false
          }
        ]
      }
    }
  ]
}

• Use case: This allows AI tools to understand component parameters and injected services, enabling accurate Razor code generation, intelligent documentation, and semantic search and completion.

🔧 Technical Details

⚙️ How It Works

1. Scans assemblies for all types inheriting from ComponentBase.
2. Collects [Parameter], [CascadingParameter], and [Inject] property info.
3. Exposes metadata through standardized MCP tools.
4. AI agents or IDEs can query these tools live via HTTP (JSON-RPC).

📦 Installation

1. Configure inspected assemblies in Program.cs

using Components.MCP.Blazor.Introspection;
using Components.MCP.Blazor.Tools;
using ModelContextProtocol.Server;
using Microsoft.AspNetCore.Components;

var builder = WebApplication.CreateBuilder(args);

// Configure which assemblies to scan
var discoveryOptions = new ComponentDiscoveryOptions();
discoveryOptions.Assemblies.Add(typeof(DynamicHeadContent).Assembly);

builder.Services.AddSingleton(discoveryOptions);
builder.Services.AddSingleton<ComponentMetadataProvider>();

builder.Services
    .AddMcpServer()
    .AddBuiltInHandlers()
    .WithHttpTransport()
    .WithTools<ComponentTool>();

var app = builder.Build();
await app.RunAsync();

2. Run the MCP server

dotnet run

📚 Documentation

🧱 Roadmap

• [ ] Add components.search tool for name-based filtering.
• [ ] Add resources/read for raw source inspection.
• [ ] Provide parameter documentation from XML comments.

📄 License

MIT © 2025 Simon Liebers