A Demo of the MCP Client using React and SSE

This project demonstrates a Model Context Protocol (MCP) client built with React, utilizing Server-Sent Events (SSE) for real-time communication. It's a work in progress, but functional.

Instructions

To get started, launch the SSE servers. You can use Supergateway:

npx -y supergateway --cors --port 8002 --stdio "npx -y @modelcontextprotocol/server-everything"

Alternatively, use uv to run two Python-based MCP servers:

uv run mcp-simple-tool-prompt-resource --transport sse --port 8000

uv run mcp-simple-tool-prompt-resource2 --transport sse --port 8001

The client defaults to localhost for these servers, but this can be configured. Finally, start the React application:

npm start

Issues to consider:

The project currently faces an issue with duplicate tool names across different servers. A potential solution is to modify the tools_available list to include the server name (e.g., mcpserver.name.toolname). The handling of multiple concurrent tool calls is untested and may require setting a maximum limit. Note that text completion streaming must be disabled for tool calls to function correctly.