react hook-based mcp server connection management with automatic lifecycle handling
The useMcp React hook abstracts MCP server communication complexity through a state machine-driven connection lifecycle that automatically manages connection establishment, reconnection with configurable backoff delays, and graceful disconnection. It exposes connection state (connecting, connected, disconnecting, disconnected, error) and error details through hook return values, enabling React components to reactively render UI based on connection status without manual socket or transport layer management.
Unique: Implements a declarative React hook interface with built-in state machine for MCP connection lifecycle, automatically handling reconnection logic and OAuth flows without requiring developers to manage transport-layer details or write boilerplate connection code
vs alternatives: Simpler than raw MCP SDK usage because it abstracts connection state management and OAuth flows into a single hook, and more lightweight than full-featured frameworks because it focuses narrowly on React integration without imposing architectural constraints
oauth 2.0 popup-based authentication flow with fallback support
The library provides an onMcpAuthorization function that orchestrates OAuth 2.0 authentication by opening a popup window to the MCP server's authorization endpoint, capturing the callback through a configurable callback URL route, and exchanging the authorization code for credentials. It includes fallback mechanisms for browsers that block popups and integrates with multiple routing frameworks (React Router, Next.js Pages, custom setups) through a flexible callback handler pattern.
Unique: Provides framework-agnostic OAuth callback handling through the onMcpAuthorization function that works with React Router, Next.js, and custom routing setups, with built-in fallback support for popup-blocking scenarios
vs alternatives: More flexible than hardcoded OAuth implementations because it supports multiple routing frameworks through a callback handler pattern, and more user-friendly than manual OAuth code exchange because it handles popup management and fallback flows automatically
type-safe tool invocation with schema-based argument validation
The useMcp hook exposes a callTool(name, args) method that executes MCP tools with type safety enforced through the MCP protocol's schema definitions. The library validates arguments against the tool's declared schema before transmission and provides structured error responses if validation fails or execution errors occur. This enables IDE autocomplete and compile-time type checking for tool arguments when used with TypeScript.
Unique: Provides schema-based argument validation for MCP tool calls with TypeScript type inference, enabling IDE autocomplete and compile-time type checking without requiring developers to manually define tool interfaces
vs alternatives: More type-safe than raw MCP SDK usage because it leverages MCP schema definitions for automatic type generation, and more developer-friendly than manual validation because it catches argument errors before transmission to the server
dual-transport protocol support with automatic detection (http and server-sent events)
The useMcp hook automatically detects and selects between HTTP long-polling and Server-Sent Events (SSE) transports based on MCP server capabilities and network conditions. The library abstracts transport selection logic so developers specify only the server URL, and the underlying transport layer is chosen transparently. This enables seamless fallback from SSE to HTTP if the server doesn't support streaming, without requiring explicit configuration.
Unique: Implements transparent transport protocol negotiation that automatically selects between HTTP and SSE based on server capabilities, eliminating the need for developers to manually specify or configure transport layers
vs alternatives: More robust than fixed-protocol implementations because it provides automatic fallback for network-restricted environments, and more transparent than manual protocol selection because developers only specify the server URL
configurable automatic reconnection with exponential backoff
The useMcp hook accepts an autoReconnect configuration parameter (boolean or number) that enables automatic reconnection attempts when the MCP connection drops unexpectedly. When enabled with a numeric value, it implements exponential backoff with configurable delay intervals, preventing connection storms and allowing the server time to recover. The hook tracks reconnection attempts and exposes connection state changes through the hook return value.
Unique: Provides configurable exponential backoff for automatic reconnection attempts, allowing developers to tune reconnection behavior for their specific network conditions and server recovery patterns
vs alternatives: More sophisticated than simple retry logic because it implements exponential backoff to prevent connection storms, and more flexible than fixed-delay reconnection because it accepts both boolean and numeric configuration
comprehensive connection state machine with explicit error tracking
The useMcp hook implements a state machine with four explicit connection states (connecting, connected, disconnecting, disconnected) plus an error state that captures detailed error information. The hook exposes both the current state and error details through its return value, enabling components to render different UI based on connection status and error type. The state machine enforces valid transitions and prevents invalid operations (e.g., calling tools while disconnected).
Unique: Implements an explicit four-state connection state machine with dedicated error state and error detail tracking, enabling fine-grained UI control based on connection status and error conditions
vs alternatives: More informative than simple boolean connected/disconnected flags because it distinguishes between connecting, disconnecting, and error states, and more actionable than generic error messages because it exposes structured error details
dual-export npm package structure with separate react and utility entry points
The use-mcp library is distributed as an NPM package with two entry points: the root export (.) provides general utilities like onMcpAuthorization for OAuth handling, while the React export (./react) provides the useMcp hook and React-specific components. This dual-export structure allows developers to use OAuth utilities in non-React contexts (e.g., Node.js backends) while keeping React dependencies optional for utility-only consumers. The build system uses tsup to compile TypeScript to both CommonJS and ES modules.
Unique: Provides dual entry points (root and /react) that allow OAuth utilities to be used independently from React, enabling non-React consumers to avoid React dependency overhead while maintaining a single package
vs alternatives: More flexible than monolithic packages because it allows selective imports based on use case, and more efficient than separate packages because it avoids duplication and maintains a single source of truth for shared utilities
framework-agnostic oauth callback route integration with routing adapter pattern
The onMcpAuthorization function provides a routing adapter pattern that integrates OAuth callbacks with React Router, Next.js Pages, and custom routing setups through a flexible handler interface. Developers define a callback route in their routing framework and pass the authorization code to onMcpAuthorization, which exchanges it for credentials and returns the authenticated connection. This pattern decouples the OAuth flow from specific routing frameworks, allowing the same logic to work across different application architectures.
Unique: Implements a routing adapter pattern for OAuth callbacks that works with React Router, Next.js Pages, and custom routing setups, decoupling OAuth logic from specific routing frameworks
vs alternatives: More flexible than framework-specific OAuth libraries because it supports multiple routing frameworks through a single adapter pattern, and more lightweight than full-featured auth libraries because it focuses narrowly on MCP OAuth integration
+1 more capabilities