WASM MCP Server

What is WASM MCP Server?

WASM MCP Server is a proof-of-concept Model Context Protocol (MCP) server that runs in WebAssembly within a web browser. It demonstrates how MCP tools and resources can be integrated into a browser environment, providing a calculator and a key-value storage system.

How to use WASM MCP Server?

Clone the project, install dependencies (npm install), and run the development server with Vite. Open the provided web interface to interact with the calculator (select operation, enter numbers, click "Calculate") and the storage system (enter key/value, click "Set Storage" or "Get Storage").

Key features of WASM MCP Server

• Calculator tool with basic arithmetic (add, subtract, multiply, divide)
• Key-value storage with set and retrieve operations
• Persistent storage within the current browser session
• Template-based resource paths (e.g., storage://{key})
• Input validation and error handling for tools and resources
• Custom browser transport layer for MCP communication

Use cases of WASM MCP Server

• Demonstrating MCP server execution entirely in a web browser without a backend
• Building lightweight client-side tools (calculator, storage) using the MCP protocol
• Prototyping or testing MCP integrations in a controlled browser environment
• Learning how to implement custom transport layers for MCP in web applications

FAQ from WASM MCP Server

What is the purpose of this project?

It is a proof-of-concept to show the feasibility of running an MCP server in a web browser using WebAssembly, focusing on core MCP concepts like tools and resources.

What tools and resources are available?

A calculator tool (basic arithmetic) and a key-value storage resource accessed via template paths like storage://{key}.

What dependencies are required?

The project uses @modelcontextprotocol/sdk, Zod for schema validation, TypeScript, and Vite for development and building.

Does data persist across browser sessions?

Currently data persists only within the current browser session. Persistent storage across sessions is planned as a future enhancement.

How does the server communicate in the browser?

A custom browser transport layer (browser-transport.ts) handles communication between the MCP server and client code running in the browser.