---
title: API Reference
description: Detailed documentation for all hooks and utilities provided by Skybridge.
---

Skybridge exports hooks and utilities from `skybridge/web` that work across multiple runtimes. See the [compatibility matrix](#runtime-compatibility) below for platform-specific availability.

## State Management

<CardGroup cols={2}>
  <Card title="useToolInfo" icon="database" href="/api-reference/use-tool-info">
    Get initial tool input, output and metadata
  </Card>
  <Card title="useViewState" icon="floppy-disk" href="/api-reference/use-view-state">
    Persist state across view renders
  </Card>
</CardGroup>

## Context Sync

<Card title="data-llm" icon="brain" href="/api-reference/data-llm">
  Sync view UI state with the model for contextual responses
</Card>

## Utilities

<CardGroup cols={2}>
  <Card title="createStore" icon="box" href="/api-reference/create-store">
    Create a Zustand store that automatically syncs with view state
  </Card>
  <Card title="generateHelpers" icon="wand-magic-sparkles" href="/api-reference/generate-helpers">
    Generate fully typed hooks from your MCP server
  </Card>
</CardGroup>

## User Interface

<CardGroup cols={2}>
  <Card title="useLayout" icon="table-layout" href="/api-reference/use-layout">
    Get layout and visual environment (theme, safe area)
  </Card>
  <Card title="useUser" icon="user" href="/api-reference/use-user">
    Get user information (locale, device type)
  </Card>
  <Card title="useDisplayMode" icon="expand" href="/api-reference/use-display-mode">
    Get and request view display mode changes
  </Card>
  <Card title="useRequestModal" icon="window-maximize" href="/api-reference/use-request-modal">
    Open a modal portaled outside of the view iframe
  </Card>
  <Card title="useRequestSize" icon="up-right-and-down-left-from-center" href="/api-reference/use-request-size">
    Resize the view to an arbitrary size
  </Card>
</CardGroup>

## Actions

<CardGroup cols={2}>
  <Card title="useCallTool" icon="screwdriver-wrench" href="/api-reference/use-call-tool">
    Call tools from within a view
  </Card>
  <Card title="useOpenExternal" icon="arrow-up-right-from-square" href="/api-reference/use-open-external">
    Open external links
  </Card>
  <Card title="useSendFollowUpMessage" icon="message" href="/api-reference/use-send-follow-up-message">
    Send a follow-up message in the conversation
  </Card>
  <Card title="useFiles" icon="file" href="/api-reference/use-files">
    Upload and download files
  </Card>
  <Card title="useSetOpenInAppUrl" icon="link" href="/api-reference/use-set-open-in-app-url">
    Set URL for "open in app" button in fullscreen mode in ChatGPT
  </Card>
</CardGroup>

## Advanced

<CardGroup cols={2}>
  <Card title="useAppsSdkContext" icon="code" href="/api-reference/use-apps-sdk-context">
    Low-level hook to subscribe to `window.openai` state values (Apps SDK)
  </Card>
  <Card title="useMcpAppContext" icon="plug" href="/api-reference/use-mcp-app-context">
    Low-level hook to subscribe to MCP App host context (MCP Apps)
  </Card>
</CardGroup>

## Import

All hooks and utilities are exported from `skybridge/web`:

```tsx
import {
  createStore,
  useCallTool,
  useDisplayMode,
  useFiles,
  useLayout,
  useSetOpenInAppUrl,
  useAppsSdkContext,
  useMcpAppContext,
  useOpenExternal,
  useRequestModal,
  useRequestSize,
  useSendFollowUpMessage,
  useToolInfo,
  useUser,
  useViewState,
} from "skybridge/web";
```

## Runtime Compatibility

Skybridge supports two runtime environments: **Apps SDK** (ChatGPT) and **MCP Apps** (open specification). Most hooks work in both, but some features are platform-specific.

| Hook / Feature | Apps SDK | MCP Apps | Notes |
|----------------|:--------:|:--------:|-------|
| [useToolInfo](/api-reference/use-tool-info) | ✅ | ✅ | |
| [useViewState](/api-reference/use-view-state) | ✅ | ⚠️ | MCP Apps: polyfilled; state doesn't persist across view renders |
| [data-llm](/api-reference/data-llm) | ✅ | ⚠️ | MCP Apps: polyfilled (same limitation as useViewState) |
| [useCallTool](/api-reference/use-call-tool) | ✅ | ✅ | |
| [useSendFollowUpMessage](/api-reference/use-send-follow-up-message) | ✅ | ✅ | |
| [useOpenExternal](/api-reference/use-open-external) | ✅ | ✅ | |
| [useLayout](/api-reference/use-layout) | ✅ | ✅ | |
| [useUser](/api-reference/use-user) | ✅ | ✅ | |
| [useDisplayMode](/api-reference/use-display-mode) | ✅ | ✅ | |
| [useFiles](/api-reference/use-files) | ✅ | ❌ | Apps SDK only |
| [useSetOpenInAppUrl](/api-reference/use-set-open-in-app-url) | ✅ | ❌ | Apps SDK only |
| [useRequestModal](/api-reference/use-request-modal) | ✅ | ⚠️ | MCP Apps: polyfilled; renders in iframe instead of host modal |
| [useRequestSize](/api-reference/use-request-size) | ❌ | ✅ | MCP Apps only |
| [useAppsSdkContext](/api-reference/use-apps-sdk-context) | ✅ | ❌ | Apps SDK only |
| [useMcpAppContext](/api-reference/use-mcp-app-context) | ❌ | ✅ | MCP Apps only |

<Tip>
Learn more about runtime differences in [Write Once, Run Everywhere](/concepts/write-once-run-everywhere).
</Tip>

