Note: This project is currently a work in progress (WIP). Features and implementations may change significantly.

A demo implementation of a Model Context Protocol (MCP) client using Web Workers and Server-Sent Events (SSE).

• Web Worker-based MCP client implementation
• Server-Sent Events (SSE) transport
• Interactive testing UI
• Type-safe implementation with TypeScript
• Built with Vite + React

• Node.js 18.x or later
• An MCP-compatible server running on localhost:3020

1. Clone the repository
2. Install dependencies:

npm install

Start the development server:

npm run dev

1. Open test.html in your browser
2. Click "Connect" to establish connection with the MCP server
3. Use "List Tools" to see available tools
4. Select a tool and provide input in JSON format
5. Click "Execute Tool" to run the selected tool

src/
├── worker.ts           # MCP client worker implementation
├── worker-test.ts      # Worker test interface
├── types.ts           # Type definitions
└── App.tsx           # Main React application

• worker.ts: Main Web Worker implementation of the MCP client
• worker-test.ts: Testing interface for the worker
• types.ts: Shared type definitions for worker commands and responses

The worker accepts the following commands:

• connect: Establish connection with MCP server
• disconnect: Close the connection
• listTools: Get list of available tools
• callTool: Execute a specific tool

The worker sends responses in the following format:

type WorkerResponse =
  | {
      type: "status";
      status: WorkerStatus;
    }
  | {
      type: "result";
      result: ListToolsResult | CallToolResult;
    }
  | {
      type: "error";
      error: string;
      details?: Record<string, unknown>;
    };

Build the project:

npm run build

Run ESLint:

npm run lint

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a new Pull Request