The latest articles on DEV Community by SHIVAM KUMAR ROYY (@shivam_kumarroyy_70dedb7). https://dev.to/shivam_kumarroyy_70dedb7 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3313011%2Fa76d7761-4f60-45ca-bccd-69a705e578e5.jpg https://dev.to/shivam_kumarroyy_70dedb7 en SHIVAM KUMAR ROYY Tue, 01 Jul 2025 17:17:26 +0000 https://dev.to/shivam_kumarroyy_70dedb7/building-a-multi-mcp-client-with-claude-anthropic-sdk-2di2 https://dev.to/shivam_kumarroyy_70dedb7/building-a-multi-mcp-client-with-claude-anthropic-sdk-2di2 <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff80ambi0h41jptsjqvls.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ff80ambi0h41jptsjqvls.png" alt="Image description" width="800" height="366"></a></p> <p>Hi devs! 👋</p> <p>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.</p> <h2> <strong>Overview 📝</strong> </h2> <p><strong>What is the Multi-MCP Client?</strong><br> The Multi-MCP Client is a React-based frontend that allows you to:</p> <ul> <li>Connect to multiple MCP servers (add, remove, and manage them dynamically)</li> <li>Discover and use tools from all connected servers</li> <li>Send prompts to Claude (via Anthropic SDK or direct API)</li> <li>Let Claude decide which tool (from which server) to use for each user query</li> <li>View results and tool usage in a chat-like interface</li> </ul> <p><strong>How Does It Work?</strong></p> <ul> <li>Server Management: You can add any number of MCP servers. The client auto-connects and fetches available tools from each.</li> <li>Unified Tool List: All tools from all servers are merged and presented to Claude as available functions.</li> <li>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.</li> <li>Result Handling: Tool results are returned to Claude, and the final response is displayed in the chat.</li> </ul> <p><strong>Tech Stack</strong></p> <ul> <li> <strong>Frontend:</strong> React, Vite, Tailwind CSS</li> <li> <strong>MCP SDK:</strong> @modelcontextprotocol/sdk</li> <li> <strong>LLM:</strong>Anthropic Claude (via SDK or direct API)</li> <li> <strong>Features:</strong> Dynamic server management, tool discovery, multi- server orchestration, chat UI</li> </ul> <h2> Setup ⚙️ </h2> <ul> <li>🧑‍💻 Clone the repository: </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>https://github.com/shivamkr09/multi-mcp-client-claude.git </code></pre> </div> <ul> <li>📦 Install dependencies: </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>npm install </code></pre> </div> <ul> <li><p>Go to <code>src/components/MCPClient.tsx</code> and change the intial MCP Server url ,id and name of your choice.</p></li> <li><p>Navigate to:<br> </p></li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>http://localhost:5173/ </code></pre> </div> <ul> <li><p>Enter the Claude API Key from anthropic console</p></li> <li><p>Next,its all done.Enjoy.</p></li> </ul> <p>Please hit a reaction 💖, if this helped you or you learned something from this and share with others.<br> Thank you 😊!</p> mcp typescript react programming