Skip to main content

​
Overview

The useApp hook returns the App instance from the nearest AppProvider. Use this when you need direct access to the App for SDK method calls like app.requestDisplayMode(). Most hooks read from context internally, so you typically only need useApp() for direct SDK calls. The AppProvider handles connecting to the MCP Apps host, HMR persistence during development, and React StrictMode compatibility. It is set up automatically by the sunpeak framework — you never need to write it yourself.

​
Import

import { useApp } from 'sunpeak';

​
Signature

function useApp(): App | null

​
Returns

​
return
App | null
The connected App instance, or null while connecting.

​
Usage

import { useApp } from 'sunpeak';

function MyResource() {
  const app = useApp();

  const handleFullscreen = () => {
    app?.requestDisplayMode({ mode: 'fullscreen' });
  };

  return <button onClick={handleFullscreen}>Go Fullscreen</button>;
}

​
AppProvider

The AppProvider component wraps your resource component tree and establishes the connection to the MCP Apps host. It is added automatically by the sunpeak framework in both dev and production builds. 
import { AppProvider } from 'sunpeak';

// This is handled by the framework — shown here for reference only.
<AppProvider appInfo={{ name: 'MyResource', version: '1.0.0' }}>
  <MyResource />
</AppProvider>

​
Props

​
appInfo
{ name: string; version: string }
required
App identification information sent to the host.
​
capabilities
Record<string, unknown>
Capabilities to advertise to the host. Optional.
​
onAppCreated
(app: App) => void
Callback invoked when a new App instance is created. Optional.