OAuth popups and reconnection logic, wrapped in one React hook

What it does

useMcp is a React hook that connects your component tree to a Model Context Protocol server, surfacing available tools, resources, and prompts as reactive state. It handles the full connection lifecycle—discovery, OAuth authentication, transport negotiation, and automatic reconnection—so your UI only needs to react to states like ready or failed.

The interesting bit

Instead of leaving you to guess why the connection stalled, the hook exposes granular states such as discovering, pending_auth, and authenticating. It also ships with an onMcpAuthorization helper that handles the OAuth callback in React Router or Next.js without manual token plumbing.

Key highlights

• Surfaces server tools, resources, prompts, and resource templates as typed state
• Built-in OAuth flow with popup support and a fallback authUrl when popups are blocked
• Auto-reconnect and retry with configurable delays (default reconnect delay is 3000 ms)
• Chooses between HTTP and SSE transports, or lets you force one
• Includes debug logging and manual controls for retry, disconnect, and clearStorage

Caveats

• You still need to set up an OAuth callback route in your app; the hook handles the handshake but not the routing
• The README doesn’t clarify whether retries eventually give up or use exponential backoff

Verdict

Useful if you’re building a React UI that calls remote AI tools over MCP and would rather not hand-roll authentication and transport logic. Not relevant if you aren’t using React or the MCP protocol.