返回 MCP 目录
public公开dns本地运行

components.mcp.blazor

一个基于Model Context Protocol的Blazor组件元数据服务器,通过反射分析程序集中的Blazor组件,为AI开发工具提供实时组件信息查询服务。

article

README

🚀 🧩 Components.MCP.Blazor

Components.MCP.Blazor 是一个 模型上下文协议(Model Context Protocol,MCP) 服务器,它为人工智能辅助开发公开 Blazor 组件元数据。借助它,ChatGPT、Claude 以及其他支持 MCP 的工具能够直接检查你实际使用的 Blazor 组件,无需猜测,也无需依赖静态文档。

🚀 概述

Components.MCP.Blazor 提供了一个 模型上下文协议(MCP) 接口,允许人工智能代理和开发工具动态发现你真实的 Blazor 组件。

它会反射程序集中所有继承自 ComponentBase 的类型,并将它们作为结构化的 MCP 工具公开。

重要性说明

| 没有使用 MCP | 使用 Components.MCP.Blazor | |--------------|----------------------------| | 人工智能助手可能会错误推断 Razor 参数 | 人工智能可以读取你实际的组件元数据 | | 静态组件文档可能会与实际情况不一致 | 元数据实时更新,自动同步 | | 你需要手动描述 UI 组件 | 人工智能工具可以通过 MCP 直接对其进行内省 |

这个项目架起了 人工智能与 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"
        }
      ]
    }
  ]
}

使用场景:人工智能代理可以通过查询此工具来发现可用组件,然后正确地建议或自动生成引用这些组件的 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
          }
        ]
      }
    }
  ]
}

使用场景:这使得人工智能工具能够了解任何组件的实际参数和注入服务,从而实现:

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

🔧 工作原理

  1. 扫描程序集中所有继承自 ComponentBase 的类型。
  2. 收集 [Parameter][CascadingParameter][Inject] 属性信息。
  3. 通过标准化的 MCP 工具公开元数据。
  4. 人工智能代理或集成开发环境(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);

// 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. 运行 MCP 服务器

dotnet run

🧱 路线图

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

📄 许可证

本项目采用 MIT 许可证,版权所有 © 2025 Simon Liebers。

help

运行方式说明

cloud

托管运行

托管运行通常表示这个 MCP Server 由服务方环境承载,用户一般按页面提供的连接方式或授权流程接入,不需要在本地长期启动一个 MCP 进程

  1. 打开服务方连接页
  2. 完成授权或复制端点
  3. 在 MCP 客户端中连接
terminal

本地运行 / 其它方式

本地运行通常需要用户在自己的电脑或服务器上安装依赖,把 server_config 复制到 MCP 客户端,并按 env_schema 补齐环境变量、密钥或其它配置

  1. 复制 server_config
  2. 安装所需依赖
  3. 补齐环境变量后重启客户端