What it does
A React hook that connects browser-based applications to Model Context Protocol (MCP) servers. It manages connection state, handles OAuth authentication flows with popup and fallback support, and provides a simple interface to discover and invoke server tools, read resources, and access prompt templates. The hook includes automatic reconnection logic and supports both HTTP and Server-Sent Events (SSE) transports.
Who it's for
Frontend developers building interactive AI applications that need access to remote tools and data via MCP. Particularly useful for React teams building chat interfaces, AI assistants, or tool-calling dashboards that must authenticate and communicate with MCP servers from the browser.
Common use cases
- Build a browser-based chat UI that calls tools on remote MCP servers
- Implement OAuth authentication flows to access MCP servers requiring user consent
- Read and display MCP server resources within a React application
- Use MCP server-provided prompt templates to structure AI requests
- Debug and inspect MCP server capabilities with the included Inspector tool
Setup pitfalls
- OAuth callback route must match the redirect URI registered with your MCP server — mismatch silently breaks authentication
- Filesystem reads and writes require browser permissions and may be restricted by sandbox policies
- Network calls to the MCP server must be allowed by CORS policy — test with the Inspector first
- Last commit was 143 days ago — verify compatibility with recent MCP spec versions