MCP Web Worker Demo
by weolopez
This demo showcases a Model Context Protocol (MCP) client implementation using a Shared Web Worker architecture. It demonstrates how to use MCP in a browser environment with a decoupled architecture using pure JavaScript with no build requirements.
Last updated: N/A
What is MCP Web Worker Demo?
This is a demonstration of a Model Context Protocol (MCP) client implemented using a Shared Web Worker. It includes a worker implementation, client wrapper, mock server, and demo UI to showcase MCP features in a browser environment.
How to use MCP Web Worker Demo?
To run the demo, build the SDK, start a web server, and open the demo page in a browser that supports Shared Web Workers (Chrome or Edge recommended). Connect to MCP and explore the different features like tool calling, resource reading, and prompt retrieval.
Key features of MCP Web Worker Demo
Offloads MCP processing to a background thread
Single worker instance serves multiple tabs/windows
MCP implementation details are isolated in the worker
Resource isolation between UI and protocol handling
Use cases of MCP Web Worker Demo
Demonstrates MCP client implementation
Shows how to use Shared Web Workers for background processing
Provides a decoupled architecture for MCP communication
Offers a testing environment for MCP features
FAQ from MCP Web Worker Demo
What browsers are compatible with this demo?
What browsers are compatible with this demo?
Chrome, Edge, and Opera are known to work. Firefox requires enabling Shared Workers via about:config. Safari has limited support, and iOS Safari has no support.
Why am I getting a 'Failed to fetch worker script' error?
Why am I getting a 'Failed to fetch worker script' error?
Make sure you're accessing the demo through a web server (e.g., http://localhost:3000/webworker-demo/) and not from the file system (file://). Also, ensure the SDK is built with npm run build.
What does the demo do?
What does the demo do?
The demo allows you to interact with a mock MCP server through a web UI. You can list and call tools, list and read resources, and list and retrieve prompts.
What is the purpose of the Shared Web Worker?
What is the purpose of the Shared Web Worker?
The Shared Web Worker allows MCP processing to occur in a background thread, preventing the main UI thread from becoming unresponsive during complex operations. It also enables shared state across multiple tabs/windows.
What are the benefits of using a worker-based architecture?
What are the benefits of using a worker-based architecture?
The benefits include improved performance, shared state, decoupled design, and enhanced security.