Hi devs! 👋
I’m excited to share my latest project: a Multi-MCP (Model Context Protocol) Client that connects to multiple MCP servers and leverages Anthropic’s Claude via the official SDK. This project demonstrates how to orchestrate tool use across several AI backends, all from a single, modern React interface.
Overview 📝
What is the Multi-MCP Client?
The Multi-MCP Client is a React-based frontend that allows you to:
- Connect to multiple MCP servers (add, remove, and manage them dynamically)
- Discover and use tools from all connected servers
- Send prompts to Claude (via Anthropic SDK or direct API)
- Let Claude decide which tool (from which server) to use for each user query
- View results and tool usage in a chat-like interface
How Does It Work?
- Server Management: You can add any number of MCP servers. The client auto-connects and fetches available tools from each.
- Unified Tool List: All tools from all servers are merged and presented to Claude as available functions.
- Claude Integration: User prompts and chat history are sent to Claude, along with the full tool list. Claude can call any tool, and the client routes the call to the correct server.
- Result Handling: Tool results are returned to Claude, and the final response is displayed in the chat.
Tech Stack
- Frontend: React, Vite, Tailwind CSS
- MCP SDK: @modelcontextprotocol/sdk
- LLM:Anthropic Claude (via SDK or direct API)
- Features: Dynamic server management, tool discovery, multi- server orchestration, chat UI
Setup ⚙️
- 🧑💻 Clone the repository:
https://github.com/shivamkr09/multi-mcp-client-claude.git
- 📦 Install dependencies:
npm install
Go to
src/components/MCPClient.tsxand change the intial MCP Server url ,id and name of your choice.Navigate to:
http://localhost:5173/
Enter the Claude API Key from anthropic console
Next,its all done.Enjoy.
Please hit a reaction 💖, if this helped you or you learned something from this and share with others.
Thank you 😊!
Top comments (1)
Awesome, well explained.