example-remote-client

This MCP server is an example remote MCP client built as a React TypeScript application. It enables connecting to multiple MCP servers over HTTP/SSE transports, providing a conversational interface with tool calling capabilities and real-time MCP message tracing. The client abstracts the inference provider (starting with OpenRouter), supports multi-server MCP connections via an MCPProvider, and manages a conversational agent loop that can orchestrate tools or functions when interacting with MCP-enabled endpoints. Use it to experiment with multi-server MCP setups, visualize tool calls in real time, and iterate on protocol changes in a UI-driven environment.

Prerequisites:

• Node.js v18 or higher
• npm, yarn, or pnpm

Installation steps:

1. Clone or download the example remote MCP client repository.
2. Install dependencies: npm install
3. Start the development server: npm run dev
4. Open the app in your browser: http://localhost:3000

If you prefer to run via npx for a quick test, you can use: npx -y modelcontextprotocol-example-remote-client

Notes:

• Ensure you have access to the MCP servers you intend to connect to (URLs, credentials, and any required SSE endpoints).
• You can customize the OpenRouter or other InferenceProviders in the app’s configuration to point at your preferred LLM backend.

Tips and common issues:

• If the UI fails to connect to MCP servers, verify SSE endpoint availability and CORS settings on the MCP servers.
• When debugging MCP messages, use the built-in MCP debugging and message tracing features in the UI to inspect payloads and tool calls.
• Ensure environment variables for your OpenRouter or other inference backends are correctly set (e.g., API keys or base URLs).
• The example supports multi-server connections; you can add additional MCP servers in the MCPProvider configuration to test cross-server conversations.
• If you encounter port conflicts, change the port by setting PORT in your environment before starting the dev server.