MCP Client Demo

Note: This project is a work in progress (WIP), subject to significant changes.

This repository hosts a demo implementation of a Model Context Protocol (MCP) client, leveraging Web Workers and Server-Sent Events (SSE) for communication. It provides an interactive UI for testing MCP functionality.

Features

• MCP client implemented using Web Workers for background processing.
• SSE for real-time communication with the MCP server.
• Interactive UI for testing and experimentation.
• Type-safe codebase using TypeScript.
• Built with Vite and 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. Connect to the MCP server.
3. List available tools.
4. Select a tool, provide JSON input, and execute it.

Project Structure

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

Implementation Details

The worker handles commands like connect, disconnect, listTools, and callTool, responding with status updates, results (ListToolsResult or CallToolResult), or error messages.

Development

Building

Build the project: npm run build

Linting

Run ESLint: npm run lint

Contributing

Fork, branch, commit, push, and create a pull request.