mcp-wasm

This MCP server is designed to run inside a web browser as a WebAssembly (WASM) based implementation. It exposes a small in-browser MCP runtime that registers two tools and a simple storage resource: a Calculator tool for arithmetic (add, subtract, multiply, divide) and a Storage system for key-value pairs stored in the browser session. You interact with the server through the web UI and the browser-transport layer, which adapts MCP requests to browser-native communication. The Calculator tool validates inputs, handles division-by-zero errors, and returns results in real time. The Storage system lets you set and retrieve string-keyed values, with a simple in-browser persistence scope suitable for session-based demonstrations and proofs of concept. To use it, open the web interface, choose an operation, provide numbers for the calculator, or enter a key/value for storage, and trigger the corresponding operation to see results and error messages where applicable.

Prerequisites:

• Node.js (14.x or newer) and npm/yarn
• A modern web browser supporting WebAssembly

Installation steps:

1. Clone the repository or download the project archive.
2. Install dependencies: npm install
3. Build the project (Vite-based build is assumed):
   • npm run build
4. Start the development server (or serve the built assets):
   • npm run dev
5. Open the provided localhost URL in your browser to load the WASM MCP server UI and interact with the Calculator and Storage tools.

Notes:

• This configuration targets a browser-based runtime. The server script referenced in dist/server.js is compiled from TypeScript sources (server.ts) and loaded by the client via the browser transport layer.
• Ensure your bundler is configured to emit a WASM module and an accompanying JavaScript glue code for the MCP runtime if adapting from the source repository.

Tips and considerations:

• Since this is a browser-based WASM MCP server, there is no traditional backend process to manage. All state is kept in the browser session unless you extend the storage layer to use IndexedDB or localStorage for persistence across sessions.
• Common issues include incorrect module loading order for WASM, and transport layer mismatches between the client and server components. Ensure browser console logs are checked for transport errors and tool registration failures.
• The MCP SDK would typically enforce schema validation (via Zod) on inputs. Provide well-formed numeric inputs for the Calculator tool to avoid validation errors.
• You can extend the UI to add more tools and resources by registering additional callbacks in server.ts and updating the UI bindings in main.ts.
• If you need persistent storage beyond the browser session, consider integrating a real backend or using browser storage APIs with a custom transport adapter.