WASM MCP 서버

웹 브라우저 내 WebAssembly(WASM)에서 실행되는 모델 컨텍스트 프로토콜(MCP) 서버의 개념 증명 구현입니다. 이 프로젝트는 브라우저 환경에서 MCP 도구와 리소스를 통합하는 방법을 보여줍니다.

특징

계산기 도구

• 기본적인 산술 연산(덧셈, 뺄셈, 곱셈, 나눗셈)을 수행합니다.

• 입력 검증 및 오류 처리

• 실시간 계산 결과

저장 시스템

• 키-값 저장 기능

• 문자열 키를 사용하여 값 설정 및 검색

• 브라우저 세션 내의 영구 저장소

• 템플릿 기반 리소스 처리

Related MCP server: MCP Calculator Server

기술 구현

서버 구성 요소

• server.ts : 도구 및 리소스 정의를 사용한 핵심 MCP 서버 구현

• main.ts : 클라이언트 측 통합 및 UI 상호 작용 처리

• browser-transport.ts : 브라우저 통신을 위한 사용자 정의 전송 계층

건축학

• 서버 구현을 위해 Model Context Protocol SDK를 사용합니다.

• 사용자 정의 브라우저 전송 계층을 구현합니다.

• 도구는 콜백 함수로 등록됩니다.

• 리소스는 매개변수 대체를 사용하여 템플릿 경로를 사용합니다.

핵심 개념

1. 도구

   • server.tool() 사용하여 등록됨

   • 콜백 함수를 통해 실행

   • Zod를 사용한 스키마 검증

2. 자원

   • 템플릿 기반 경로(예: storage://{key} )

   • readCallback 통해 접근됨

   • 매개변수화된 리소스 처리

용법

계산자

1. 연산(더하기, 빼기, 곱하기, 나누기)을 선택하세요

2. 숫자 두 개를 입력하세요

3. 결과를 보려면 "계산"을 클릭하세요.

4. 잘못된 입력 및 0으로 나누기 오류 처리

저장

1. 각 필드에 키와 값을 입력하세요

2. 값을 저장하려면 "저장소 설정"을 클릭하세요.

3. 키를 입력하고 "저장소 가져오기"를 클릭하여 값을 검색합니다.

4. 성공적인 작업 및 오류에 대한 피드백 제공

종속성

• @modelcontextprotocol/sdk

• Zod(스키마 검증용)

• 타입스크립트

• Vite(개발 및 구축용)

프로젝트 구조

지엑스피1

오류 처리

• 서버 초기화 오류

• 도구 실행 오류

• 리소스 액세스 오류

• 입력 검증

• 전송 계층 오류

향후 개선 사항

• 추가 계산기 작업

• 세션 전체에 걸친 영구 저장소

• 향상된 UI/UX

• 추가 MCP 도구 및 리소스

• WASM 최적화

개발

이는 WebAssembly를 사용하여 웹 브라우저에서 MCP 서버를 실행하는 것의 타당성을 보여주는 개념 증명 구현입니다. 이 구현은 단순성과 명확성을 유지하면서 핵심 MCP 개념을 보여주는 데 중점을 둡니다.