> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-use.com/llms.txt
> Use this file to discover all available pages before exploring further.
# React client
> React provider, hooks, storage providers, and types for browser MCP client connections.
View the provider source on GitHub: [https://github.com/mcp-use/mcp-use/blob/main/libraries/typescript/packages/mcp-use/src/react/McpClientProvider.tsx](https://github.com/mcp-use/mcp-use/blob/main/libraries/typescript/packages/mcp-use/src/react/McpClientProvider.tsx)
View the standalone hook source: [https://github.com/mcp-use/mcp-use/blob/main/libraries/typescript/packages/mcp-use/src/react/useMcp.ts](https://github.com/mcp-use/mcp-use/blob/main/libraries/typescript/packages/mcp-use/src/react/useMcp.ts)
View the shared React client types: [https://github.com/mcp-use/mcp-use/blob/main/libraries/typescript/packages/mcp-use/src/react/types.ts](https://github.com/mcp-use/mcp-use/blob/main/libraries/typescript/packages/mcp-use/src/react/types.ts)
The React client APIs manage browser MCP connections from React apps. Use `McpClientProvider` for multi-server apps and `useMcp()` for a single HTTP MCP server.
All exports come from `mcp-use/react`:
```ts theme={null}
import {
LocalStorageProvider,
McpClientProvider,
MemoryStorageProvider,
useMcp,
useMcpClient,
useMcpServer,
} from "mcp-use/react";
import type {
McpClientContextType,
McpClientProviderProps,
McpServer,
McpServerOptions,
StorageProvider,
UseMcpOptions,
UseMcpResult,
} from "mcp-use/react";
```
## McpClientProvider
`McpClientProvider` creates a React context for multiple MCP server connections. It loads initial servers, applies provider defaults, persists configuration when a storage provider is set, and exposes server state through `useMcpClient()` and `useMcpServer()`.
**Parameters**
> React children rendered inside the provider.
> Initial server map. Servers in this map connect when the provider mounts.
> Default OAuth callback URL for servers that do not set `callbackUrl`.
> Default proxy configuration for all servers. Per-server `proxyConfig` overrides these values.
> Whether direct connection failures caused by FastMCP or CORS should retry through a proxy.
> Client metadata and default advertised MCP capabilities for every managed server.
> Storage adapter used to load, save, and remove server configurations.
> When `true`, logs MCP protocol messages in the browser for debugging.
> Called after a server is added.
> Called after a server is removed.
> Called when a managed server changes connection state.
> Called when any managed server requests sampling.
> Called when any managed server requests elicitation.
**Signature**
```tsx wrap theme={null}
function McpClientProvider(props: McpClientProviderProps): JSX.Element
```
## useMcpClient
`useMcpClient()` returns the multi-server context. It must run under `McpClientProvider`.
**Returns**
> All managed servers with connection state, methods, notifications, and pending request queues.
> Adds a server. Calls with an existing id are ignored.
> Removes a server. Set `clearCredentials: true` to also clear persisted OAuth credentials.
> Updates display metadata without reconnecting.
> Updates connection-affecting options and reconnects the server.
> Returns a managed server by id.
> Whether configured storage has finished loading.
**Throws**
Throws `Error` when called outside `McpClientProvider`.
**Signature**
```ts wrap theme={null}
function useMcpClient(): McpClientContextType
```
## useMcpServer
`useMcpServer(id)` returns one managed server by id. It must run under `McpClientProvider`.
**Parameters**
> Server id passed to `addServer()` or the `mcpServers` map.
**Returns**
> The matching server, or `undefined` when no server with that id is registered.
**Throws**
Throws `Error` when called outside `McpClientProvider`.
**Signature**
```ts wrap theme={null}
function useMcpServer(id: string): McpServer | undefined
```
## useMcp
`useMcp(options)` connects to one HTTP MCP server from a React component. Use it directly for simple single-server apps or use `McpClientProvider` for multi-server apps.
**Parameters**
> Connection, authentication, callback, reconnection, and transport options.
**Returns**
> Connection state, discovered tools/resources/prompts, protocol methods, auth metadata, logs, and the underlying browser client.
**Signature**
```ts wrap theme={null}
function useMcp(options: UseMcpOptions): UseMcpResult
```
## McpServerOptions
`McpServerOptions` configures one server managed by `McpClientProvider`. It extends `UseMcpOptions` but replaces low-level callbacks with provider-managed request queues.
**Fields**
> HTTP MCP endpoint URL.
> Display name shown before server metadata loads.
> When `false`, the provider does not connect to the server. Defaults to `true`.
> Headers sent with HTTP transport requests.
> Transport preference. Use `"auto"` for streamable HTTP with fallback.
> Initial connection timeout in milliseconds. Defaults to `30000`.
> Proxy settings for this server.
> Per-server automatic proxy fallback setting.
> When `true`, the server enters `pending_auth` until `authenticate()` is called.
> When `true`, OAuth uses full-page redirect instead of a popup.
> OAuth callback URL for this server.
> External OAuth provider for headless or custom runtimes.
> Pre-registered OAuth client credentials for servers without Dynamic Client Registration.
> Client metadata sent during MCP initialization and OAuth registration.
> Retry initial connection failures. A number sets the retry delay in milliseconds.
> Application-level reconnection and health check behavior.
> SDK transport-level retry settings.
> Transport wrapper for logging, monitoring, or custom behavior.
> Per-server app callback for sampling requests.
> Per-server app callback for elicitation requests.
> Per-server app callback for notifications.
## McpServer
`McpServer` is the server object returned by `useMcpServer()` and listed in `useMcpClient().servers`. It includes all `UseMcpResult` fields plus provider-managed metadata and queues.
**Fields and methods**
> Provider server id.
> Server URL.
> Display name supplied by the app.
> Current connection state.
> Discovered server tools.
> Discovered server resources.
> Discovered server resource templates.
> Discovered server prompts.
> Server metadata from initialization.
> Failure message when `state` is `"failed"`.
> Calls a server tool.
> Reads a resource by URI.
> Refreshes the resource list.
> Refreshes the prompt list.
> Gets a prompt by name.
> Requests prompt or resource template completions.
> Refreshes the tool list.
> Refreshes the resource list.
> Refreshes the resource template list.
> Refreshes the prompt list.
> Refreshes tools, resources, resource templates, and prompts.
> Attempts to reconnect after failure.
> Disconnects from the server.
> Starts OAuth authentication.
> Clears OAuth storage for this server URL.
> Stored notifications from this server.
> Unread notification count.
> Marks one notification as read.
> Marks all notifications as read.
> Clears stored notifications.
> Pending sampling requests from this server.
> Approves a sampling request.
> Rejects a sampling request.
> Pending elicitation requests from this server.
> Approves an elicitation request.
> Rejects an elicitation request.
> Underlying browser client.
## UseMcpOptions
`UseMcpOptions` configures one standalone React MCP connection. `McpServerOptions` reuses most of these fields.
**Fields**
> HTTP MCP endpoint URL.
> When `false`, no connection is attempted. Defaults to `true`.
> Proxy settings for this connection.
> Retries direct FastMCP or CORS failures through a proxy. Defaults to `true` for standalone `useMcp()`.
> OAuth callback URL. Defaults to `/oauth/callback` on the current origin.
> OAuth localStorage key prefix. Defaults to `"mcp:auth"`.
> HTTP request headers.
> Console log level.
> Retry initial connection failures. A number sets the retry delay in milliseconds.
> Application-level reconnection and health check behavior. Defaults to `3000`.
> SDK transport-level retry settings.
> Popup feature string for OAuth popup mode.
> Transport preference. `"sse"` is deprecated but supported.
> When `true`, wait for `authenticate()` before opening OAuth.
> Use full-page OAuth redirect instead of a popup.
> Called just before the OAuth popup opens.
> Options passed to the underlying MCP SDK client.
> Initial connection timeout in milliseconds. Defaults to `30000`.
> SSE read timeout in milliseconds. Defaults to `300000`.
> Transport wrapper.
> Called when the server sends a notification.
> Handles `sampling/createMessage` requests.
> Handles `elicitation/create` requests.
> Client metadata sent during MCP initialization and OAuth registration.
> Custom fetch function for MCP HTTP requests.
> External OAuth provider.
> Pre-registered OAuth client settings.
## StorageProvider
`StorageProvider` persists provider-managed server configuration. Implement this interface for localStorage, IndexedDB, AsyncStorage, or backend-backed storage.
**Methods**
> Returns all stored server configurations.
> Replaces all stored server configurations.
> Adds or updates one server configuration.
> Removes one server configuration.
> Clears all server configurations.
> Optionally returns cached server metadata.
> Optionally stores cached server metadata.
> Optionally removes cached server metadata.
### LocalStorageProvider
`LocalStorageProvider` stores server configs and metadata in browser `localStorage`.
**Parameters**
> localStorage key used for server configurations. Metadata uses `${storageKey}-metadata`.
**Signature**
```ts wrap theme={null}
class LocalStorageProvider implements StorageProvider {
constructor(storageKey?: string)
}
```
### MemoryStorageProvider
`MemoryStorageProvider` stores server configs and metadata in memory. Data is lost on reload or provider unmount.
**Signature**
```ts wrap theme={null}
class MemoryStorageProvider implements StorageProvider {
constructor()
}
```
## Related
* [React Integration](/typescript/client/usemcp): guide to using the provider and hooks in a React app.
* [Authentication](/typescript/client/authentication): OAuth and bearer token setup.
* [Completions](/typescript/client/completion): prompt and resource template completion examples.