Supercharge Your React App: Connecting to MCP Servers in 3 Lines of Code!

This article explores use-mcp, a React library that simplifies connecting your applications to any MCP server. We'll also examine Cloudflare's AI Playground, a chat interface that utilizes remote MCP servers.

use-mcp: Your Easy MCP Client

use-mcp handles the complexities of MCP client development, including transport protocols, authentication, and session management. Connecting is as simple as this:

import { useMcp } from 'use-mcp/react';

function MyComponent() { const { state, tools, callTool } = useMcp({ url: 'https://mcp-server.example.com' }) return <div>Your actual UI code</div>; }

Key Features of use-mcp:

• Connection Management: Handles retries and reconnections, providing real-time connection state ("connecting", "ready", "failed").
• Authentication & Authorization: Supports OAuth 2.1, managing the entire flow securely.
• Dynamic Tool Discovery: Automatically discovers new tools added by the server.
• Debugging & Monitoring: Provides a detailed log for easy troubleshooting.
• Future-Proofed: Supports both Server-Sent Events (SSE) and Streamable HTTP transports.

<img src="https://cf-assets.www.cloudflare.com/zkvhlag99gkb/6PmPcZicaO39x9SuRqzqSX/b6caa6c7af1d6b03f17c41771598d1b5/image1.png" alt="MCP Inspector Example" width="1450" height="1100" loading="lazy">

The MCP Inspector, built with use-mcp, offers a practical demonstration.

Cloudflare's AI Playground: A Ready-to-Use MCP Client

Cloudflare's open-sourced AI Playground provides a complete chat interface with built-in MCP client capabilities, simplifying the integration of your AI agents with external services via MCP.

<img src="https://cf-assets.www.cloudflare.com/zkvhlag99gkb/5iaUzuxBZafrH1q0VYHTJf/a7585da38f75818111b3521c9a5ef4e3/image2.png" alt="AI Playground Example" width="1999" height="1448" loading="lazy">

It leverages Workers AI, providing access to various LLMs and the Agents SDK, along with use-mcp for seamless server connection and tool invocation.

Contributing to the MCP Ecosystem

The open-source nature of MCP fosters rapid evolution. use-mcp aims to expand the community's contributions to the MCP ecosystem.

<img src="https://cf-assets.www.cloudflare.com/zkvhlag99gkb/7sYYS9c45orRX6SaUw5qTx/b975c5221ab538cc8f1167b706da375f/image3.png" alt="MCP Ecosystem" width="1200" height="267" loading="lazy">

Explore the Cloudflare AI GitHub repository for examples, including the AI Playground's source code and the MCP Inspector.