C# MCP Server & Blazor WebAssembly Inspector

Ein begleitendes Code-Repository zum Blogbeitrag: Building a C# MCP Server with Blazor Frontend.

Dieses Repository bietet eine produktionsreife Implementierung des Model Context Protocol (MCP) in C# auf .NET 9, kombiniert mit einem interaktiven Blazor WebAssembly Tool Inspector & Protocol Monitor.

🚀 Architektur-Highlights

• Standard-MCP-Protokoll-Engine: Implementiert das offizielle Model Context Protocol über Server-Sent Events (GET /sse) und JSON-RPC 2.0 (POST /messages) und unterstützt externe KI-Clients wie Claude Desktop, Cursor, VS Code und die Anthropic MCP Inspector CLI.

• Native C#-Tool-Reflection: Macht stark typisierte C#-Methoden als auffindbare MCP-Tools verfügbar, unter Verwendung von Microsoft.Extensions.AI (AIFunctionFactory) und automatischer Schemagenerierung mit System.Text.Json.

• Interaktiver Blazor-WASM-Inspektor: Eine Entwickler-GUI zum Überprüfen generierter JSON-Schemas, zum Testen der Tool-Ausführung mit benutzerdefinierten Parameterformularen und zum Überwachen von JSON-RPC-Wire-Logs in Echtzeit.

• Zero-Config-Lokalentwicklung vs. abgesicherte Produktion: Die lokale Entwicklung läuft reibungslos ohne Secrets; Nicht-Development-Umgebungen erzwingen JWT-Bearer-Authentifizierung, Rate-Limiting und Request-Timeouts.

Related MCP server: Your Own MCP Server

📁 Projektstruktur

• McpServerApp/McpServerApp: Der ASP.NET-Core-Server, der die Endpunkte /sse, /messages und /api/mcp bereitstellt.

• McpServerApp/McpServerApp.Client: Der Blazor-WebAssembly-Client, der die interaktive Inspector-Benutzeroberfläche bereitstellt.

• McpServerApp/McpServerApp.Tests: Vollständige automatisierte Testsuite (Unit-Tests, Integrationstests über WebApplicationFactory und bUnit-UI-Komponententests).

• e2e/: Playwright-Browsertest, der Tool-Erkennung, Tool-Ausführung und Screenshot-Erfassung validiert.

🛠️ Erste Schritte

Voraussetzungen

• .NET 9.0 SDK (oder .NET-10-Preview)

• Node.js 20+ (für Playwright-Browsertests)

Lokale Ausführung

1. Klonen Sie das Repository:

   git clone https://github.com/cmalpass/csharp-mcp-server-blazor.git
   cd csharp-mcp-server-blazor/McpServerApp

2. Starten Sie die Anwendung:

   dotnet run --project McpServerApp

3. Öffnen Sie Ihren Browser und navigieren Sie zu https://localhost:7150 (oder dem in Ihrem Terminal angezeigten Port), um den MCP Inspector zu erkunden.

🔌 Externe KI-Clients verbinden

1. Claude Desktop

Fügen Sie diesen Eintrag zu Ihrer claude_desktop_config.json hinzu:

{
  "mcpServers": {
    "csharp-blazor-server": {
      "url": "http://localhost:5000/sse"
    }
  }
}

2. Cursor

Gehen Sie zu Settings > Features > MCP, klicken Sie auf + Add New MCP Server, wählen Sie SSE und geben Sie http://localhost:5000/sse an.

3. Anthropic CLI Inspector

npx @modelcontextprotocol/inspector http://localhost:5000/sse

🧪 Testen

Deterministische Testsuite (.NET)

Führen Sie die Unit-, Integrations- und bUnit-Komponententests aus:

dotnet test McpServerApp/McpServerApp.sln --configuration Release

Browser-E2E-Test (Playwright)

npm ci
npm run test:e2e

Dies führt den vollständigen Browserablauf aus und erzeugt Screenshot-Nachweise unter docs/evidence/mcp-inspector-execution.png.

📜 Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert.