drio
Open app

WASM MCP Server

Source

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.

Catalog onlyCatalog onlySTDIO

Overview

WASM MCP Server is a proof-of-concept implementation of a Model Context Protocol (MCP) server that runs in WebAssembly (WASM) within a web browser, showcasing the integration of MCP tools and resources in a browser environment.

To use the WASM MCP Server, you can interact with its calculator tool by selecting an operation, entering two numbers, and clicking "Calculate". For storage, you can set and retrieve values using string keys through the web interface.

  • Basic arithmetic operations (addition, subtraction, multiplication, division) with real-time results. - Key-value storage functionality with persistent storage within the browser session. - Error handling for invalid inputs and operations.
  1. Performing quick calculations directly in the browser.
  2. Storing and retrieving data using a simple key-value interface.
  3. Demonstrating the capabilities of the Model Context Protocol in a web environment.

Add to your AI client

Use these steps to connect WASM MCP Server in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "mcp-wasm-beekmarks": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-wasm-beekmarks"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "mcp-wasm-beekmarks": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-wasm-beekmarks"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "mcp-wasm-beekmarks": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-wasm-beekmarks"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "mcp-wasm-beekmarks": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-wasm-beekmarks"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-wasm-beekmarks": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-wasm-beekmarks"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "mcp-wasm-beekmarks": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-mcp-wasm-beekmarks"
      ]
    }
  }
}

FAQ

What operations can the calculator perform?

The calculator can perform addition, subtraction, multiplication, and division.

How does the storage system work?

The storage system allows you to set and retrieve values using string keys, with persistent storage during the browser session.

Is this project suitable for production use?

This is a proof-of-concept implementation and may not be suitable for production without further enhancements.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":1350,"uuid":"5da792af-58fd-4f6b-ac91-660a998479ae","name":"mcp-wasm","title":"WASM MCP Server","description":"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.","avatar_url":"https://avatars.githubusercontent.com/u/17101205?v=4","created_at":"2025-02-20T15:28:25.914Z","updated_at":"2025-02-23T07:21:17.520Z","status":"created","author_name":"beekmarks","author_avatar_url":"https://avatars.githubusercontent.com/u/17101205?v=4","tags":"mcp,wasm,model-context-protocol","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/beekmarks/mcp-wasm","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":null,"user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools