MCP Client Demo

What is MCP Client Demo?

MCP Client Demo is a work-in-progress demo implementation of a Model Context Protocol (MCP) client using Web Workers and Server-Sent Events (SSE). It is built with Vite + React and TypeScript, intended for developers to test and explore MCP client-server communication.

How to use MCP Client Demo?

Ensure Node.js 18.x or later is installed and an MCP-compatible server is running on localhost:3020. Clone the repository, run npm install, then npm run dev to start the development server. Open test.html in a browser, click “Connect” to establish a connection, use “List Tools” to see available tools, select a tool, provide input in JSON format, and click “Execute Tool” to run it.

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
• Built with Vite + React

Use cases of MCP Client Demo

• Demonstrating how an MCP client communicates with a server over SSE
• Testing available tools from an MCP server in a browser interface
• Learning the MCP protocol through hands-on interaction

FAQ from MCP Client Demo

Is MCP Client Demo production-ready?

No. The project is currently a work in progress (WIP); features and implementations may change significantly.

What MCP servers does MCP Client Demo support?

It works with any MCP-compatible server that communicates over SSE and runs on localhost:3020.

What are the prerequisites to run MCP Client Demo?

Node.js 18.x or later and a running MCP server on localhost:3020 are required.

Can I use MCP Client Demo with a different server host or port?

The README does not specify configuration options; the demo is hardcoded to localhost:3020.

How do I execute a tool in the demo?

After connecting, click “List Tools”, select a tool, enter its input in JSON format, and click “Execute Tool”.