use-mcp

use-mcp is a lightweight React hook for connecting to Model Context Protocol (MCP) servers. It simplifies the integration of AI systems with external tools and resources by handling connection management, authentication, and protocol negotiation.

This library is designed for developers building AI-powered interfaces (like Chat UIs or Agent Inspectors) who need to connect to MCP-compliant backends.

Key Features

  • 🔄 Connection Management: Handles SSE (Server-Sent Events) and HTTP transport connections with automatic reconnection and retry logic.
  • 🔐 Authentication: Built-in support for OAuth flows (including PKCE) with popup handling.
  • ⚛️ React Hook: A simple useMcp hook that exposes tools, resources, prompts, and connection state.
  • 🛠️ Full MCP Support: Call tools, read resources, and retrieve prompts directly from your UI components.
  • 📦 Type-Safe: Written in TypeScript with comprehensive type definitions.

Quick Example

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

function App() {
  const { state, tools, callTool } = useMcp({
    url: 'https://my-mcp-server.com/sse',
    clientName: 'My App'
  });

  if (state !== 'ready') return <div>Connecting...</div>;

  return (
    <div>
      <h2>Tools Available: {tools.length}</h2>
      <button onClick={() => callTool('calculator', { a: 1, b: 2 })}>
        Run Calc
      </button>
    </div>
  );
}

Project Structure

This repository is a monorepo containing the core library and several examples:

  • src/: The core library source code.
  • examples/chat-ui: A full-featured AI chat interface demonstrating tool usage and local storage persistence.
  • examples/inspector: A debugging tool to inspect any MCP server's capabilities.
  • examples/servers: Reference MCP server implementations using Hono and Cloudflare Workers.