Skip to main content
sunpeak API

Wraps App class

MCP Apps SDK reference

​
Overview

AppProvider wraps your resource component tree and establishes the connection to the MCP Apps host. All sunpeak hooks read from this context internally, so you never need to pass app as a parameter. The sunpeak framework adds AppProvider automatically in both sunpeak dev and sunpeak build — you never need to write it yourself. It reads name and version from your project’s package.json for appInfo.

​
Import

import { AppProvider } from 'sunpeak';

​
Props

​
appInfo
{ name: string; version: string }
required
App identification sent to the host during ui/initialize. In the sunpeak framework, this is sourced from your project’s package.json name and version fields.
​
capabilities
Record<string, unknown>
Capabilities to advertise to the host during initialization. See McpUiAppCapabilities for the protocol-level type.
​
onAppCreated
(app: App) => void
Callback invoked after the App instance is created but before connect(). Use this to register event handlers that must be in place before the initialization handshake.
​
children
ReactNode
required
The resource component tree.

​
Usage

import { AppProvider } from 'sunpeak';

// This is handled by the framework — shown here for reference only.
<AppProvider appInfo={{ name: 'my-weather-app', version: '1.2.0' }}>
  <SearchResource />
</AppProvider>

​
With event handlers

<AppProvider
  appInfo={{ name: 'my-app', version: '1.0.0' }}
  onAppCreated={(app) => {
    app.ontoolinput = (input) => {
      console.log('Tool input:', input);
    };
  }}
>
  <MyResource />
</AppProvider>

​
AppState

The context value provided to child components via useApp. 
import type { AppState } from 'sunpeak';
​
app
App | null
The connected App instance, or null while connecting.
​
isConnected
boolean
Whether initialization completed successfully.
​
error
Error | null
Connection error if initialization failed, null otherwise.

​
Behavior

  • HMR persistence — The App instance is stored at module scope and persists across React Fast Refresh. Code changes don’t trigger reconnection. A full page reload establishes a fresh connection.
  • StrictMode — The provider handles React StrictMode’s double-mount cycle by deduplicating the connection attempt. If a connection is already in flight, the second mount waits for it.
  • Single instance — Only one App instance is created per page. Multiple AppProvider mounts (e.g., during StrictMode) share the same underlying connection.
  • useApp — Access the App instance from context
  • App class — The underlying SDK class
  • Lifecycle — Connection and initialization flow