MCP Client Demo
by yonaka15
A demo implementation of a Model Context Protocol (MCP) client using Web Workers and Server-Sent Events (SSE). It's a work in progress, so features may change.
Last updated: N/A
What is MCP Client Demo?
This is a demo client for interacting with a Model Context Protocol (MCP) server. It utilizes Web Workers and Server-Sent Events (SSE) for communication.
How to use MCP Client Demo?
- Clone the repository. 2. Install dependencies using
npm install. 3. Start the development server withnpm run dev. 4. Opentest.htmlin your browser and connect to an MCP server running atlocalhost:3020. 5. Use the UI to list tools, provide input, and execute them.
Key features of MCP Client Demo
Web Worker-based MCP client implementation
Server-Sent Events (SSE) transport
Interactive testing UI
Type-safe implementation with TypeScript
Use cases of MCP Client Demo
Testing MCP server implementations
Demonstrating MCP client functionality
Providing a template for building more complex MCP clients
Exploring Web Worker and SSE communication patterns
FAQ from MCP Client Demo
What is the purpose of worker.ts?
What is the purpose of worker.ts?
It is the main Web Worker implementation of the MCP client, handling communication with the server.
What is the role of worker-test.ts?
What is the role of worker-test.ts?
It provides a testing interface for interacting with the Web Worker.
What commands does the worker accept?
What commands does the worker accept?
The worker accepts 'connect', 'disconnect', 'listTools', and 'callTool' commands.
What is the expected format of the input when calling a tool?
What is the expected format of the input when calling a tool?
The input should be provided in JSON format.
What are the prerequisites for running this demo?
What are the prerequisites for running this demo?
You need Node.js 18.x or later and an MCP-compatible server running on localhost:3020.