MCP Wasm

🚀 WASM MCP Server

This is a proof-of-concept implementation of a Model Context Protocol (MCP) server running in a web browser environment using WebAssembly (WASM). This project demonstrates the ability to integrate MCP tools and resources in a browser environment.

🚀 Quick Start

This project showcases a MCP server running in a browser environment using WASM. It integrates various tools and resources, allowing users to perform calculations and manage storage within the browser.

✨ Features

Calculator Tool

• Perform basic arithmetic operations (addition, subtraction, multiplication, division).
• Input validation and error handling.
• Real-time calculation results.

Storage System

• Key-value based storage functionality.
• Set and retrieve values using string keys.
• Persistent storage within the browser session.
• Template resource handling.

🔧 Technical Details

Server Components

• server.ts: Core implementation of the MCP server, including tool and service resource definitions.
• main.ts: Client integration and UI interaction handling.
• browser-transport.ts: Custom transport layer for browser communication.

Architecture

• Use the Model Context Protocol SDK for server implementation.
• Implement a custom browser transport layer.
• Tools are registered via callback functions.
• Resources use template paths with parameter substitution.

Key Concepts

1. Tools

   • Registered using server.tool().
   • Executed via callback functions.
   • Use Zod for schema validation.

2. Resources

   • Templates are based on paths (e.g., storage://{key}).
   • Accessed via readCallback.
   • Parameterized resource handling.

💻 Usage Examples

Calculator

1. Select an operation (addition, subtraction, multiplication, division).
2. Enter two numbers.
3. Click "Calculate" to view the result.
4. Error handling for invalid inputs and division by zero.

Storage

1. Enter a key and a value in the corresponding fields.
2. Click "Set Storage" to store the value.
3. Enter a key and click "Get Storage" to retrieve the value.
4. Provide feedback for successful operations and error messages.

📦 Installation

This project has the following dependencies:

• @modelcontextprotocol/sdk
• Zod (for schema validation)
• TypeScript
• Vite (for development and building)

📚 Documentation

Project Structure

mcp-wasm-poc/
├── src/
│   └── web/
│       ├── server.ts      # MCP server implementation
│       ├── main.ts        # Client 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 Improvements

• Add more calculator operations.
• Implement persistent storage beyond session limits.
• Enhance UI/UX.
• Add other MCP tools and resources.
• Optimize WASM.

Development

This is a proof-of-concept implementation that demonstrates 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.