> ## Documentation Index
> Fetch the complete documentation index at: https://mcp-use.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://mcp-use.com/docs/feedback

```json
{
  "path": "/typescript/server/widget-components/mcpuseprovider",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# <McpUseProvider />

> Universal provider component for MCP Apps and ChatGPT Apps SDK widgets

The `<McpUseProvider />` is a universal provider component that works with **both** MCP Apps and ChatGPT Apps SDK protocols. It automatically includes StrictMode, ThemeProvider, optional WidgetControls, and ErrorBoundary, providing a consistent setup regardless of which protocol your widget is using.

<Info>
  **Protocol-Agnostic**: This component works identically whether your widget is
  running in MCP Apps clients or ChatGPT. No conditional logic needed!
</Info>

## Import

```typescript theme={null}
import { McpUseProvider } from "mcp-use/react";
```

## Props

| Prop           | Type                               | Default      | Description                                                                                                            |
| -------------- | ---------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------- |
| `children`     | `React.ReactNode`                  | **required** | The widget content to wrap                                                                                             |
| `debugger`     | `boolean`                          | `false`      | Enable debug button in WidgetControls component                                                                        |
| `viewControls` | `boolean \| "pip" \| "fullscreen"` | `false`      | Enable view controls (fullscreen/pip). `true` shows both, `"pip"` shows only pip, `"fullscreen"` shows only fullscreen |
| `autoSize`     | `boolean`                          | `false`      | Automatically notify the host about container height changes using ResizeObserver                                      |

## What's Included

The `McpUseProvider` automatically wraps your widget with:

1. **StrictMode** (outermost) - React's development mode checks
2. **ThemeProvider** - Protocol-aware theme management (syncs with both MCP Apps and ChatGPT)
3. **WidgetControls** (conditional) - Debug and view controls if enabled (works with both protocols)
4. **ErrorBoundary** (innermost) - Error handling for graceful failures
5. **Auto-sizing container** (conditional) - ResizeObserver wrapper if `autoSize={true}` (adapts to protocol)

<Warning>
  **Breaking change (v1.20.1):** `McpUseProvider` no longer includes `BrowserRouter`.
  If your widget uses `react-router` for navigation, add it explicitly:

  ```tsx theme={null}
  import { BrowserRouter } from "react-router";

  <McpUseProvider>
    <BrowserRouter>
      <MyWidget />
    </BrowserRouter>
  </McpUseProvider>
  ```
</Warning>

## Basic Usage

```tsx theme={null}
import { McpUseProvider } from "mcp-use/react";

function MyWidget() {
  return (
    <McpUseProvider>
      <div>My widget content</div>
    </McpUseProvider>
  );
}
```

## With Debug Controls

Enable the debug button to inspect widget state, props, and test tool calls:

```tsx theme={null}
<McpUseProvider debugger>
  <MyWidget />
</McpUseProvider>
```

## With View Controls

Enable fullscreen and picture-in-picture controls:

```tsx theme={null}
<McpUseProvider viewControls>
  <MyWidget />
</McpUseProvider>
```

## With Auto-sizing

Enable automatic height notifications for dynamic content:

```tsx theme={null}
<McpUseProvider autoSize>
  <MyWidget />
</McpUseProvider>
```

## Complete Example

```tsx theme={null}
import { McpUseProvider } from "mcp-use/react";
import { useWidget } from "mcp-use/react";

function ProductWidget() {
  const { props } = useWidget<{ productName: string }>();

  return (
    <div>
      <h1>{props.productName}</h1>
      {/* Widget content */}
    </div>
  );
}

export default function App() {
  return (
    <McpUseProvider debugger viewControls autoSize>
      <ProductWidget />
    </McpUseProvider>
  );
}
```

## Related Components

* [`WidgetControls`](./widgetcontrols) - Debug and view controls
* [`ThemeProvider`](./themeprovider) - Theme management
* [`ErrorBoundary`](./errorboundary) - Error handling
* [`useWidget`](./usewidget) - Widget hook for accessing props and actions