Components.mcp.blazor

🧩 Components.MCP.Blazor

AI支援開発のためにBlazorコンポーネントのメタデータを公開するモデルコンテキストプロトコル（MCP）サーバーです。
ChatGPTやClaudeなどのMCP対応ツールが、実際のBlazorコンポーネントを調査できるようにします。推測や静的なドキュメントは必要ありません。

🚀 クイックスタート

概要

Components.MCP.Blazor は、AIエージェントや開発ツールが実際のBlazorコンポーネントを動的に検出できるようにする モデルコンテキストプロトコル（MCP） インターフェースを提供します。

アセンブリ内の ComponentBase を継承するすべての型を反映し、それらを構造化された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);

// 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