MCP Client Demo

MCP Client Demo

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).

Features

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

Getting Started

Prerequisites

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

Installation

1. Clone the repository
2. Install dependencies:

npm install

Development

Start the development server:

npm run dev

Testing the Worker

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

Project Structure

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

Key Components

• 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

Implementation Details

Worker Commands

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

Worker Responses

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>;
    };

Development

Building

Build the project:

npm run build

Linting

Run ESLint:

npm run lint

Contributing

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