> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# AppProvider

> React context provider that connects to the MCP Apps host and shares the App instance across the component tree. Handles HMR persistence and StrictMode compatibility.

<Badge color="yellow">sunpeak API</Badge>

<Card horizontal title="Wraps App class" icon="cube" href="/mcp-apps/app/app-class">
  MCP Apps SDK reference
</Card>

## 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

```tsx theme={null}
import { AppProvider } from 'sunpeak';
```

## Props

<ResponseField name="appInfo" type="{ 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.
</ResponseField>

<ResponseField name="capabilities" type="Record<string, unknown>">
  Capabilities to advertise to the host during initialization. See [`McpUiAppCapabilities`](/mcp-apps/types/core-types#mcpuiappcapabilities) for the protocol-level type.
</ResponseField>

<ResponseField name="onAppCreated" type="(app: App) => void">
  Callback invoked after the `App` instance is created but before `connect()`. Use this to register [event handlers](/mcp-apps/app/event-handlers) that must be in place before the initialization handshake.
</ResponseField>

<ResponseField name="children" type="ReactNode" required>
  The resource component tree.
</ResponseField>

## Usage

```tsx theme={null}
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

```tsx theme={null}
<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`](/app-framework/hooks/use-app).

```tsx theme={null}
import type { AppState } from 'sunpeak';
```

<ResponseField name="app" type="App | null">
  The connected `App` instance, or `null` while connecting.
</ResponseField>

<ResponseField name="isConnected" type="boolean">
  Whether initialization completed successfully.
</ResponseField>

<ResponseField name="error" type="Error | null">
  Connection error if initialization failed, `null` otherwise.
</ResponseField>

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

## Related

* [`useApp`](/app-framework/hooks/use-app) — Access the `App` instance from context
* [App class](/mcp-apps/app/app-class) — The underlying SDK class
* [Lifecycle](/mcp-apps/lifecycle) — Connection and initialization flow