Building an MCP Client with React: A Developer's Guide

Today, we're continuing our series on the Model-Context-Protocol (MCP) by exploring what an MCP client is, how to build one using React, and how to use the MCP Inspector for effective debugging.

Expanding on the MCP Server

This article expands on our previous MCP Server-Sent Events (SSE) example. We'll be taking the server we built and connecting it to multiple different clients.

We will briefly touch on Claude Desktop, which is how MCP originated as an open-source project. It allows you to define actions through a JSON configuration and specify your MCP server, commands, and arguments, a pattern similar to the n8n-nodes-mcp implementation.

Exploring Different MCP Clients

There are numerous MCP clients available, with Claude having the most extensive support. While we won't delve into advanced features like sampling and roots, it's important to note that the vast majority of clients support tools. Our focus will be on building a client that specifically integrates with these tools.

Debugging with the MCP Inspector

One of the most effective ways to test our server is by using the MCP Inspector. The Inspector is a command-line tool developed by the Model Context Protocol group that launches a web interface for testing and viewing available resources, prompts, and tools.

The Inspector is written in TypeScript and includes both a server and a client. The server acts as a proxy, taking an MCP SSE server and connecting it to other potential MCP servers. This provides a great example of a client implementation, allowing us to examine its components and application structure.

To get started, we first need to spin up our backend server.

npm run dev

Next, we'll run the Inspector.

npx inspector

This command launches the proxy server on port 3000 and the UI on port 5173. It's a good practice to run your MCP server on a different port (e.g., 3001) to avoid conflicts.

With both the Inspector and our server running, we can start sending events. The Inspector supports testing standard input/output, allowing you to enter commands, arguments, and environment variables.

To connect to our local server, we change the address to http://localhost:3001/sse.

After connecting, we can see the information flowing from the MCP proxy, logging the events and validating the session. The Inspector supports all MCP features, making it an excellent tool for debugging. You can ping the server for a health check and explore tools.

We can execute our predefined functions, such as list and add, and even pass variables to the server. For example, running a query for "model context protocol" with a count of three will return results from the Brave search tool.

{
  "tool": "search",
  "query": "model context protocol",
  "count": 3
}

This makes the Inspector an invaluable tool for debugging both remote and local servers.

Building a Custom React Client

Now, let's build our own React application that functions as an MCP client.

The TypeScript SDK for the SSE client is relatively concise. At its core, it uses fetch, which is why it also works well as a proxy. The send function is key here; it posts messages according to the specification and handles the response.

First, let's set up our React development server on a separate port to avoid conflicts with the MCP proxy.

npm run dev -- --port 5174

In our React application, we have a single component to demonstrate the functionality. The component can be pointed to either a live MCP client or a local one. If the connection fails, it will display an error.

To set up the client, we need to import the necessary modules:

import { SSE } from '@mcp/client/sse';
import { MCPClient } from '@mcp/client';

Next, we configure the client to call a single transport server. For scenarios involving multiple servers, using a proxy is a more scalable approach.

const transport = new SSE({
  url: 'http://localhost:3001/sse',
  fetch,
  EventSource,
  params: { 'stream-format': 'event-stream' },
});

const client = new MCPClient();

We then connect the client to the transport to establish a session.

client.connect(transport);

Once connected, we can access the client's capabilities to list available tools, prompts, resources, and more. We can also monitor the connection status (e.g., onClose, onComplete, onConnect) to update the UI accordingly.

In this example, we list the available tools and display their descriptions.

const capabilities = await client.listTools();
setTools(capabilities); // Assuming 'setTools' is a state setter

To call a tool, we create a handler function. The braveSearch function below demonstrates how to call a tool with specific arguments.

const handleSearch = async (toolName, query) => {
  const response = await client.callTool(toolName, { query });
  // Assuming the response format is { content: { txt: '...' } }
  setResults(response.content.txt);
};

This setup provides a way to build a custom web-based client for interfacing with and testing your MCP server.

Integrating with Other Tools: Cursor

Finally, let's see how to integrate our MCP server with Cursor, an AI-powered code editor.

1. Open the command palette with Command+Shift+P.
2. Search for "Cursor Settings".
3. Navigate to the "MCP" section.
4. Add the SSE server URL: http://localhost:3001/sse.
5. Give it a name, like "local".

After adding the server, you may need to refresh or wait a moment for the tools to become available. Once they appear, you can use them directly in the chat.

For example, you can ask the AI to perform a search, and it will use your custom MCP tool. The editor will show the thought process, the tool call with the correct parameters, and the results.

Conclusion

In this article, we've covered several key aspects of MCP clients. We've seen an example of the Inspector client for debugging, built our own client using React, and integrated our server with Cursor. This demonstrates the flexibility and power of MCP for creating and extending AI-powered tools.