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

# Web SDK Overview

> Architecture and package structure for the Akapulu Web SDK.

## Web SDK Overview

The Akapulu Web SDK is a package family for building browser and server integrations on top of Akapulu.

It is split into these public packages:

* `@akapulu/server`
* `@akapulu/react`
* `@akapulu/react-ui`

## Package structure

| Package             | Purpose                                                        | Runtime   |
| ------------------- | -------------------------------------------------------------- | --------- |
| `@akapulu/server`   | Server-side client for calling Akapulu APIs                    | Server    |
| `@akapulu/react`    | React provider, hooks, media controls, and event subscriptions | React app |
| `@akapulu/react-ui` | Prebuilt React conversation UI on top of `@akapulu/react`      | React app |

## How the packages relate

1. Your frontend calls your own local `connect` and `updates` routes.
2. Your local server routes call Akapulu with `@akapulu/server`.
3. Your React frontend uses `@akapulu/react` to manage session state and media.
4. If you want prebuilt UI, `@akapulu/react-ui` renders on top of `@akapulu/react`.
5. Shared event and transcript models are handled internally across the SDK packages.

In this setup:

* `@akapulu/server` handles API calls and keeps your API key on the server
* `@akapulu/react` handles session state, event subscriptions, and media controls
* `@akapulu/react-ui` is optional and gives you a higher-level conversation UI

## Explore the packages

Choose the package that matches the layer you are working on:

* [`@akapulu/server`](/web-sdk/server-sdk) for backend route integrations
* [`@akapulu/react`](/web-sdk/react-sdk) for React providers, hooks, and media helpers
* [`@akapulu/react-ui`](/web-sdk/react-ui) for prebuilt React conversation UI

## Guides and examples

Reference implementations and implementation guides:

* [Prebuilt UI](/examples/web-sdk/prebuilt-ui)
  Uses `@akapulu/react-ui` for the fastest path to a working call.
* [Prebuilt UI (styled)](/examples/web-sdk/prebuilt-ui-styled)
  The prebuilt UI with a dark theme, custom tool toast, and post-call review.
* [Customized UI](/examples/web-sdk/customized-ui)
  Uses `@akapulu/react` only and renders the conversation UI manually.
* [Customize Conversation UI](/guides/conversations/customize-conversation-ui)