📌Overview

Purpose: To demonstrate a proof-of-concept implementation of a Model Context Protocol (MCP) server running in WebAssembly (WASM) within a web browser, integrating MCP tools and resources.

Overview: This project provides a functional MCP server that showcases capabilities such as a calculator tool for arithmetic operations and a storage system for key-value pairs. It highlights the potential of leveraging WebAssembly to create responsive and interactive web applications.

Key Features:

• Calculator Tool: Enables users to perform basic arithmetic operations (addition, subtraction, multiplication, division) with input validation and real-time results, enhancing user experience with instant feedback.

• Storage System: Offers key-value storage functionality, allowing users to store and retrieve values with persistent storage capabilities within the browser session, thereby streamlining data management for the application.

---

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()
   • Executed 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 core MCP concepts with simplicity and clarity.