Happy slice of mcp pizzaMCP.pizza
Fire in da houseTop Tip:Paying $100+ per month for Perplexity, MidJourney, Runway, ChatGPT and other tools is crazy - get all your AI tools in one site starting at $15 per month with Galaxy AI Fire in da houseCheck it out free

mcp-wasm

MCP.Pizza Chef: beekmarks

mcp-wasm is a proof-of-concept MCP server implemented in WebAssembly that runs directly within web browsers. It demonstrates how MCP tools and resources can be integrated into browser environments, featuring a calculator tool for arithmetic operations and a key-value storage system with persistent session storage. This server leverages the MCP SDK and custom browser transport layers to enable real-time, client-side MCP interactions without external dependencies.

Use This MCP server To

Run MCP servers directly inside web browsers without backend setup Perform real-time arithmetic calculations via MCP calculator tool Store and retrieve key-value data persistently within browser sessions Demonstrate MCP tool integration in client-side web applications Prototype MCP server functionality using WebAssembly technology Enable offline-capable MCP server interactions in browser environments

README

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.

mcp-wasm FAQ

How does mcp-wasm run MCP servers in browsers?
It uses WebAssembly to compile MCP server code that executes directly inside the browser environment, enabling client-side MCP functionality.
What tools does mcp-wasm provide?
It includes a calculator tool for basic arithmetic and a key-value storage system for persistent data within browser sessions.
Can mcp-wasm persist data across browser sessions?
It supports persistent storage within the current browser session but does not provide long-term storage beyond that.
Is mcp-wasm suitable for production use?
It is a proof-of-concept primarily for experimentation and demonstration, not optimized for production environments.
How does mcp-wasm handle communication between client and server?
It implements a custom browser transport layer to facilitate MCP protocol communication within the browser.
Which MCP SDK does mcp-wasm use?
It uses the official Model Context Protocol SDK tailored for WebAssembly server implementation.
Can mcp-wasm work offline?
Yes, since it runs entirely in the browser via WebAssembly, it can operate without network connectivity once loaded.
What programming languages are involved in mcp-wasm?
The server is implemented in TypeScript and compiled to WebAssembly for browser execution.