mcpField
W
WASM MCP Server

WASM MCP Server

Local
github.com/beekmarksDeveloper Tools41Updated 88w ago
Repository

About WASM MCP Server

WASM MCP Server is a proof-of-concept MCP server that runs in WebAssembly inside a web browser. It includes a calculator tool and a key-value storage resource to show how MCP tools and resources work in a browser environment.

Key features

  1. 01MCP server running in the browser
  2. 02Basic arithmetic calculator tool
  3. 03Key-value storage functionality
  4. 04Template-based resource paths
  5. 05Custom browser transport layer

Use cases

  1. 01Learning how to run an MCP server in a browser
  2. 02Testing MCP tool and resource integration in a browser
  3. 03Referencing a custom browser transport implementation

MCP support

The project is an MCP server that exposes a calculator tool and storage resources with template paths such as storage://{key} to MCP clients through a custom browser transport.

#mcp#wasm#model-context-protocol

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

No install method listed yet

We haven’t collected a package or remote endpoint for this server. Follow the instructions in the project README.

Repository

Tools

No tool list yet

Local servers expose tools only once running on your machine, and the maintainer has not provided a tool list.

Details

From the project 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.

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.