# 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:

```bash
npm install
```

### Development

Start the development server:

```bash
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:

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

## Development

### Building

Build the project:

```bash
npm run build
```

### Linting

Run ESLint:

```bash
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