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

# Use skybridge/web

> Add React hooks and utilities to your App views with skybridge/web standalone package.

# Use skybridge/web

This guide shows you how to use `skybridge/web` without `skybridge/server` to add React hooks and utilities to your views.

## Prerequisites

You should already have:

* A working MCP server backend (in any technology)
* Node.js 24+

## Install

Add Skybridge to your project:

```bash theme={null}
pnpm add skybridge
```

## Package overview

`skybridge/web` provides React hooks and utilities for building advanced Apps:

### State Management

* **[`useToolInfo`](/api-reference/use-tool-info)**: Get initial tool input, output and metadata
* **[`useViewState`](/api-reference/use-view-state)**: Persist state across view renders

### User Interface

* **[`useLayout`](/api-reference/use-layout)**: Get the current user layout and visual environment information
* **[`useDisplayMode`](/api-reference/use-display-mode)**: Get and request view display mode changes
* **[`useRequestModal`](/api-reference/use-request-modal)**: Open a modal portaled outside of the view iframe
* **[`useUser`](/api-reference/use-user)**: Get the session-stable user information (locale and userAgent)

### Actions

* **[`useCallTool`](/api-reference/use-call-tool)**: Call tools from within a view
* **[`useOpenExternal`](/api-reference/use-open-external)**: Open external links
* **[`useSendFollowUpMessage`](/api-reference/use-send-follow-up-message)**: Send a follow-up message in the conversation
* **[`useFiles`](/api-reference/use-files)**: Upload and download files

### Others

* **[`useAppsSdkContext`](/api-reference/use-apps-sdk-context)**: Low-level hook to subscribe to `window.openai` state values
* **[`generateHelpers`](/api-reference/generate-helpers)**: Generate typed helpers for your views (requires `skybridge/server`)

Each hook is documented in the API Reference section in the sidebar.

## Basic example

Here's a simple view using Skybridge hooks:

```tsx theme={null}
// src/views/my-view.tsx
import { useToolInfo } from "skybridge/web";

export default function MyView() {
  const toolInfo = useToolInfo();

  if (toolInfo.isPending) {
    return <div>Loading...</div>;
  }

  if (toolInfo.isSuccess) {
    return (
      <div>
        <h2>Results</h2>
        <pre>{JSON.stringify(toolInfo.output.structuredContent, null, 2)}</pre>
      </div>
    );
  }

  return <div>No results</div>;
}
```

## Type safety without server

If you're not using `skybridge/server`, you won't get automatic type inference. You can still add types manually:

```tsx theme={null}
import { useToolInfo } from "skybridge/web";

interface MyToolInput {
  query: string;
  limit?: number;
}

export default function MyView() {
  const toolInfo = useToolInfo<MyToolInput>();

  // toolInfo.input is now typed as MyToolInput
  console.log(toolInfo.input.query);

  return <div>View content</div>;
}
```

## Learn more

To learn more about how to build an App, please read the Core Concepts and Interaction Model sections below.

<CardGroup cols={3}>
  <Card title="MCP Fundamentals" icon="graduation-cap" href="/fundamentals">
    Learn the fundamentals of MCP servers and Apps
  </Card>

  <Card title="Data Flow" icon="arrows-rotate" href="/concepts/data-flow">
    Understand how tools, views, and the model communicate
  </Card>

  <Card title="Type Safety" icon="shield-check" href="/concepts/type-safety">
    End-to-end type inference from server to view
  </Card>
</CardGroup>