Components.mcp.blazor

🚀 🧩 Components.MCP.Blazor

Components.MCP.Blazor 是一個 模型上下文協議（Model Context Protocol，MCP） 服務器，它為人工智能輔助開發公開 Blazor 組件元數據。藉助它，ChatGPT、Claude 以及其他支持 MCP 的工具能夠直接檢查你實際使用的 Blazor 組件，無需猜測，也無需依賴靜態文檔。

🚀 概述

Components.MCP.Blazor 提供了一個 模型上下文協議（MCP） 接口，允許人工智能代理和開發工具動態發現你真實的 Blazor 組件。

它會反射程序集中所有繼承自 ComponentBase 的類型，並將它們作為結構化的 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。