Skip to main content
The <McpUseProvider /> is a utility component that simplifies the setup of your widget. It automatically includes StrictMode, ThemeProvider, BrowserRouter, optional WidgetControls, and ErrorBoundary, eliminating the need to manually set up these providers.

​
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 - Theme management that syncs with ChatGPT
  3. BrowserRouter - React Router with automatic basename calculation
  4. WidgetControls (conditional) - Debug and view controls if enabled
  5. ErrorBoundary (innermost) - Error handling for graceful failures
  6. Auto-sizing container (conditional) - ResizeObserver wrapper if autoSize={true}

​
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>
  );
}