🧩 Components.MCP.Blazor

一个模型上下文协议（MCP）服务器，用于暴露Blazor组件元数据以支持AI辅助开发。
它使ChatGPT、Claude和其他具有MCP功能的工具能够检查您的实际Blazor组件——无需猜测，无需静态文档。

---

🚀 概述

Components.MCP.Blazor 提供了一个**模型上下文协议（MCP）**接口，允许AI代理和开发工具动态发现您的真实Blazor组件。

它反映了所有继承自ComponentBase类型的组件，并将其作为结构化的MCP工具公开。

为什么这很重要

无MCP	使用Components.MCP.Blazor
AI助手猜测Razor参数	AI读取您的实际组件元数据
静态组件文档不同步	元数据实时更新
您手动描述UI组件	AI工具通过MCP直接内省它们

这个项目连接了AI和Blazor——让大型语言模型对您的组件有与IDE相同的理解。

---

🧰 可用的MCP工具

🔹 components.list

描述： 列出所有可发现的Blazor组件及其命名空间。

请求示例

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

响应示例

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

使用场景：
AI代理可以查询此工具来发现可用组件，然后建议或自动生成正确引用这些组件的Razor标记。

---

🔹 component.details

描述： 根据命名空间和名称返回特定Blazor组件的完整元数据。

请求示例

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

响应示例

{
  "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
          }
        ]
      }
    }
  ]
}

使用场景：
这允许AI工具了解任何组件的实际参数和注入的服务，从而实现：

• 准确的Razor代码生成
• 智能文档
• 语义搜索和补全

---

⚙️ 工作原理

1. 扫描继承自ComponentBase的所有类型
2. 收集[Parameter]、[CascadingParameter]和[Inject]属性信息
3. 通过标准化的MCP工具公开元数据
4. AI代理或IDE可以通过HTTP（JSON-RPC）实时查询这些工具

---

⚙️ 设置

1. 在Program.cs中配置要检查的程序集

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

var builder = WebApplication.CreateBuilder(args);

// 配置要扫描的程序集
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. 运行MCP服务器

dotnet run

---

🧱 发展路线图

• 添加components.search工具进行基于名称的过滤
• 添加resources/read用于原始源代码检查
• 提供从XML注释获取的参数文档

---

📄 许可证

MIT © 2025 Simon Liebers