Skip to main content
sunpeak API

​
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.

Wraps App class

MCP Apps SDK reference

​
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 sunpeak dev and sunpeak build. See the full AppProvider reference for props, behavior, and HMR details.