diff --git a/README.md b/README.md index 7619400..5ad45c2 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,145 @@ # use-mcp -**⚠️ Experimental: This library is new and under active development. Expect breaking changes. Please report all issues to [https://github.com/geelen/use-mcp/issues](https://github.com/geelen/use-mcp/issues).** - -`use-mcp` provides browser-based utilities for connecting to servers implementing the [Model Context Protocol (MCP)](https://github.com/modelcontext/protocol). It simplifies handling connections, managing authentication (including OAuth 2.0 Authorization Code Flow with PKCE suitable for public clients like web apps), and accessing resources like Tools provided by the MCP server. - -This library is designed to be used alongside the Vercel AI SDK (`ai`) or similar libraries, allowing you to easily integrate MCP tools into your LLM application's frontend. - -## Features - -* Connects to MCP servers via Server-Sent Events (SSE). -* Handles MCP JSON-RPC messaging. -* Implements browser-friendly OAuth 2.0 authentication (Authorization Code with PKCE) using popups and `localStorage`. -* Provides framework-agnostic auth utilities. -* Includes a React hook (`useMcp`) for easy integration into React applications (via `use-mcp/react`). +A lightweight React hook for connecting to [Model Context Protocol (MCP)](https://github.com/modelcontextprotocol) servers. Simplifies authentication and tool calling for AI systems implementing the MCP standard. ## Installation ```bash npm install use-mcp # or -yarn add use-mcp -# or pnpm add use-mcp +# or +yarn add use-mcp ``` -## Util Exports +## Features -This main package (use-mcp) exports utilities primarily for handling OAuth in the browser: +- 🔄 Automatic connection management with reconnection and retries +- 🔐 OAuth authentication flow handling with popup and fallback support +- 📦 Simple React hook interface for MCP integration +- 🧰 TypeScript types for editor assistance and type checking +- 📝 Comprehensive logging for debugging +- 🌐 Works with both HTTP and SSE (Server-Sent Events) transports -* `BrowserOAuthClientProvider`: An implementation of the OAuthClientProvider interface from @modelcontextprotocol/sdk. It uses localStorage to store client information and tokens and handles the popup-based authorization flow. It's used internally by the useMcp hook but can be used independently if needed. - -* `onMcpAuthorization`: A function designed to be called on your OAuth callback page (e.g., /oauth/callback). It handles exchanging the authorization code (received from the auth server) for tokens, validating the state parameter, storing tokens using localStorage, and communicating success or failure back to the original application window that initiated the auth flow. - -## React Integration (use-mcp/react) - -For React applications, the easiest way to use this library is via the useMcp hook. - -See the [src/react/README.md](src/react/README.md) for detailed usage instructions and examples. - -## Basic OAuth Callback Setup - -You need an endpoint in your application (e.g., /oauth/callback) that the OAuth server redirects the user back to after they approve the authorization request. This endpoint should call onMcpAuthorization. - -### Example (Conceptual - using a simple script in HTML or a framework handler): +## Quick Start ```tsx -// pages/oauth/callback.js (or similar route file) -import { useEffect } from 'react'; // Or framework equivalent -import { onMcpAuthorization } from 'use-mcp'; +import { useMcp } from 'use-mcp/react' -export default function OAuthCallbackPage() { - useEffect(() => { - // Extract query parameters from window.location.search - const queryParams = Object.fromEntries( - new URLSearchParams(window.location.search).entries() - ); +function MyAIComponent() { + const { + state, // Connection state: 'discovering' | 'authenticating' | 'connecting' | 'loading' | 'ready' | 'failed' + tools, // Available tools from MCP server + error, // Error message if connection failed + callTool, // Function to call tools on the MCP server + retry, // Retry connection manually + authenticate, // Manually trigger authentication + clearStorage, // Clear stored tokens and credentials + } = useMcp({ + url: 'https://your-mcp-server.com', + clientName: 'My App', + autoReconnect: true, + }) - // Call the handler - onMcpAuthorization(queryParams, { - // Optional: specify storage key prefix if not using default 'mcp:auth' - // storageKeyPrefix: 'my_custom_prefix' - }).then(result => { - if (!result.success) { - // Error already logged and displayed by onMcpAuthorization - console.error("OAuth callback failed:", result.error); - // Optionally show a persistent error message or redirect - } - // On success, onMcpAuthorization closes the window or redirects - }).catch(err => { - // Catch unexpected errors during the handler execution itself - console.error("Unexpected error in OAuth callback handler:", err); - // Display error in the popup/page - document.body.innerHTML = `
An unexpected error occurred during authentication.
${err.message}`;
- });
+ // Handle different states
+ if (state === 'failed') {
+ return (
+ Connection failed: {error}
+ + +This window should close automatically.
+