Skip to main content
The <McpUseProvider /> is a universal provider component that works with both MCP Apps and ChatGPT Apps SDK protocols. It automatically includes StrictMode, ThemeProvider, BrowserRouter, optional WidgetControls, and ErrorBoundary, providing a consistent setup regardless of which protocol your widget is using.
Protocol-Agnostic: This component works identically whether your widget is running in MCP Apps clients or ChatGPT. No conditional logic needed!

​
Import

import { McpUseProvider } from "mcp-use/react";

​
Props

PropTypeDefaultDescription
childrenReact.ReactNoderequiredThe widget content to wrap
debuggerbooleanfalseEnable debug button in WidgetControls component
viewControlsboolean | "pip" | "fullscreen"falseEnable view controls (fullscreen/pip). true shows both, "pip" shows only pip, "fullscreen" shows only fullscreen
autoSizebooleanfalseAutomatically notify OpenAI 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. BrowserRouter - React Router with automatic basename calculation
  4. WidgetControls (conditional) - Debug and view controls if enabled (works with both protocols)
  5. ErrorBoundary (innermost) - Error handling for graceful failures
  6. Auto-sizing container (conditional) - ResizeObserver wrapper if autoSize={true} (adapts to protocol)

​
Basic Usage

import { McpUseProvider } from "mcp-use/react";
import { AppsSDKUIProvider } from "@openai/apps-sdk-ui/react";
import { Link } from "react-router";

function MyWidget() {
  return (
    <McpUseProvider>
      <AppsSDKUIProvider linkComponent={Link}>
        <div>My widget content</div>
      </AppsSDKUIProvider>
    </McpUseProvider>
  );
}

​
With Debug Controls

Enable the debug button to inspect widget state, props, and test tool calls: 
<McpUseProvider debugger>
  <AppsSDKUIProvider linkComponent={Link}>
    <MyWidget />
  </AppsSDKUIProvider>
</McpUseProvider>

​
With View Controls

Enable fullscreen and picture-in-picture controls: 
<McpUseProvider viewControls>
  <AppsSDKUIProvider linkComponent={Link}>
    <MyWidget />
  </AppsSDKUIProvider>
</McpUseProvider>

​
With Auto-sizing

Enable automatic height notifications for dynamic content: 
<McpUseProvider autoSize>
  <AppsSDKUIProvider linkComponent={Link}>
    <MyWidget />
  </AppsSDKUIProvider>
</McpUseProvider>

​
Complete Example

import { McpUseProvider } from "mcp-use/react";
import { AppsSDKUIProvider } from "@openai/apps-sdk-ui/react";
import { Link } from "react-router";
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>
      <AppsSDKUIProvider linkComponent={Link}>
        <ProductWidget />
      </AppsSDKUIProvider>
    </McpUseProvider>
  );
}