WASM MCP Server

# WASM MCP Server A proof-of-concept implementation of a Model Context Protocol (MCP) server that runs in WebAssembly (WASM) within a web browser. This project demonstrates the integration of MCP tools and resources in a browser environment. ## Features ### Calculator Tool - Performs basic arithmetic operations (addition, subtraction, multiplication, division) - Input validation and error handling - Real-time calculation results ### Storage System - Key-value storage functionality - Set and retrieve values using string keys - Persistent storage within the browser session - Template-based resource handling ## Technical Implementation ### Server Components - `server.ts`: Core MCP server implementation with tool and resource definitions - `main.ts`: Client-side integration and UI interaction handling - `browser-transport.ts`: Custom transport layer for browser communication ### Architecture - Uses the Model Context Protocol SDK for server implementation - Implements a custom browser transport layer - Tools are registered with callback functions - Resources use template paths with parameter substitution ### Key Concepts 1. **Tools** - Registered using `server.tool()` - Execute via callback functions - Schema validation using Zod 2. **Resources** - Template-based paths (e.g., `storage://{key}`) - Accessed via `readCallback` - Parameterized resource handling ## Usage ### Calculator 1. Select an operation (add, subtract, multiply, divide) 2. Enter two numbers 3. Click "Calculate" to see the result 4. Error handling for invalid inputs and division by zero ### Storage 1. Enter a key and value in the respective fields 2. Click "Set Storage" to store the value 3. Enter a key and click "Get Storage" to retrieve a value 4. Feedback provided for successful operations and errors ## Dependencies - @modelcontextprotocol/sdk - Zod (for schema validation) - TypeScript - Vite (for development and building) ## Project Structure ``` mcp-wasm-poc/ ├── src/ │ └── web/ │ ├── server.ts # MCP server implementation │ ├── main.ts # Client-side logic │ └── browser-transport.ts # Browser transport layer ├── index.html # Web interface └── package.json # Project dependencies ``` ## Error Handling - Server initialization errors - Tool execution errors - Resource access errors - Input validation - Transport layer errors ## Future Enhancements - Additional calculator operations - Persistent storage across sessions - Enhanced UI/UX - Additional MCP tools and resources - WASM optimization ## Development This is a proof-of-concept implementation demonstrating the feasibility of running an MCP server in a web browser using WebAssembly. The implementation focuses on demonstrating core MCP concepts while maintaining simplicity and clarity.