C# MCP Server & Blazor WebAssembly Inspector

블로그 게시물을 위한 동반 코드 저장소입니다: Building a C# MCP Server with Blazor Frontend.

이 저장소는 .NET 9에서 C#으로 작성된 프로덕션 등급의 Model Context Protocol (MCP) 구현과 대화형 Blazor WebAssembly Tool Inspector & Protocol Monitor를 제공합니다.

🚀 아키텍처 하이라이트

• 표준 MCP 프로토콜 엔진: Server-Sent Events(GET /sse)와 JSON-RPC 2.0(POST /messages)을 통해 공식 Model Context Protocol을 구현하며, Claude Desktop, Cursor, VS Code, Anthropic MCP Inspector CLI 같은 외부 AI 클라이언트를 지원합니다.

• 네이티브 C# 도구 리플렉션: Microsoft.Extensions.AI(AIFunctionFactory)와 System.Text.Json 자동 스키마 생성을 사용하여 강력한 형식의 C# 메서드를 검색 가능한 MCP 도구로 노출합니다.

• 대화형 Blazor WASM Inspector: 생성된 JSON 스키마를 검사하고, 사용자 지정 매개변수 폼으로 도구 실행을 테스트하며, 실시간 JSON-RPC 와이어 로그를 모니터링하는 개발자 GUI입니다.

• 제로 구성 로컬 개발 대 보호된 프로덕션: 로컬 개발은 비밀값 없이 마찰 없이 실행되며, Development 환경이 아닌 환경에서는 JWT Bearer 인증, 속도 제한, 요청 시간 초과를 적용합니다.

Related MCP server: sharplens-mcp

📁 솔루션 구조

• McpServerApp/McpServerApp: /sse, /messages, /api/mcp 엔드포인트를 호스팅하는 ASP.NET Core 서버입니다.

• McpServerApp/McpServerApp.Client: 대화형 Inspector UI를 제공하는 Blazor WebAssembly 클라이언트입니다.

• McpServerApp/McpServerApp.Tests: 완전한 자동화 테스트 스위트(단위 테스트, WebApplicationFactory를 통한 통합 테스트, bUnit UI 구성 요소 테스트)입니다.

• e2e/: 도구 검색, 실행, 스크린샷 캡처를 검증하는 Playwright 브라우저 테스트입니다.

🛠️ 시작하기

사전 요구 사항

• .NET 9.0 SDK(또는 .NET 10 미리 보기)

• Node.js 20+(Playwright 브라우저 테스트용)

로컬에서 실행

1. 저장소를 클론합니다:

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

2. 애플리케이션을 실행합니다:

   dotnet run --project McpServerApp

3. 브라우저를 열고 https://localhost:7150(또는 터미널에 표시된 포트)로 이동하여 MCP Inspector를 살펴보세요.

🔌 외부 AI 클라이언트 연결

1. Claude Desktop

claude_desktop_config.json에 다음 항목을 추가하세요:

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

2. Cursor

Settings > Features > MCP로 이동하여 + Add New MCP Server를 클릭하고 SSE를 선택한 다음 http://localhost:5000/sse를 입력하세요.

3. Anthropic CLI Inspector

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

🧪 테스트

결정적 테스트 스위트 (.NET)

단위, 통합, bUnit 구성 요소 테스트를 실행하세요:

dotnet test McpServerApp/McpServerApp.sln --configuration Release

브라우저 E2E 테스트 (Playwright)

npm ci
npm run test:e2e

이 테스트는 전체 브라우저 흐름을 실행하고 docs/evidence/mcp-inspector-execution.png에 스크린샷 증거를 생성합니다.

📜 라이선스

이 프로젝트는 MIT License에 따라 라이선스가 부여됩니다.