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

# Frontend API

> Every export of @tappify/extension-sdk, grouped by what it is for.

Everything a vendor UI imports comes from one entry:

```ts theme={null}
import { useTap, TapCard } from "@tappify/extension-sdk";
```

Each symbol's page below is generated from the SDK's own TypeScript declarations, so the
signature you read is the signature you compile against.

## Hooks

| Symbol                                                                       | Returns                                                           |
| ---------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| [`useTap`](/extensions/reference/frontend-api/Function.useTap)               | The whole bridge                                                  |
| [`useTapAuth`](/extensions/reference/frontend-api/Function.useTapAuth)       | The install token, the user, the granted scopes, and `can(scope)` |
| [`useTapProject`](/extensions/reference/frontend-api/Function.useTapProject) | The project, its apps, releases and keywords                      |
| [`useTapFilters`](/extensions/reference/frontend-api/Function.useTapFilters) | The page's range, platform and country                            |
| [`useTapTheme`](/extensions/reference/frontend-api/Function.useTapTheme)     | `{ mode }`, `light` or `dark`                                     |
| [`useTapSize`](/extensions/reference/frontend-api/Function.useTapSize)       | `slot`, `panel` or `page`                                         |
| [`useTapParams`](/extensions/reference/frontend-api/Function.useTapParams)   | The route parameters under your own page                          |
| [`useTapContext`](/extensions/reference/frontend-api/Function.useTapContext) | What Expand carried in, or the row for a row action               |
| [`useTapState`](/extensions/reference/frontend-api/Function.useTapState)     | A value shared by every mount of your extension                   |
| [`useTapQuery`](/extensions/reference/frontend-api/Function.useTapQuery)     | The owner's Tappify data                                          |
| [`useTapServer`](/extensions/reference/frontend-api/Function.useTapServer)   | One of your declared procedures                                   |
| [`useTapStorage`](/extensions/reference/frontend-api/Function.useTapStorage) | A singleton storage document, with `save` and `patch`             |

The three data hooks take
[`TapQueryOptions`](/extensions/reference/frontend-api/Interface.TapQueryOptions) and hand back
[`TapQueryResult`](/extensions/reference/frontend-api/Interface.TapQueryResult) or
[`TapStorageResult`](/extensions/reference/frontend-api/Interface.TapStorageResult).

## UI kit

| Symbol                                                                       | Is                                                 |
| ---------------------------------------------------------------------------- | -------------------------------------------------- |
| [`TapCard`](/extensions/reference/frontend-api/Function.TapCard)             | The card every widget sits in                      |
| [`TapPageHeader`](/extensions/reference/frontend-api/Function.TapPageHeader) | Title and description for a tab or page            |
| [`TapStat`](/extensions/reference/frontend-api/Function.TapStat)             | A labelled number with an optional change          |
| [`TapTable`](/extensions/reference/frontend-api/Function.TapTable)           | A table with columns, rows and an empty state      |
| [`TapButton`](/extensions/reference/frontend-api/Function.TapButton)         | A button in four variants                          |
| [`TapInput`](/extensions/reference/frontend-api/Function.TapInput)           | A single-line input or a textarea                  |
| [`TapSelect`](/extensions/reference/frontend-api/Function.TapSelect)         | A select over labelled options                     |
| [`TapForm`](/extensions/reference/frontend-api/Function.TapForm)             | A form rendered from a JSON Schema                 |
| [`TapDialog`](/extensions/reference/frontend-api/Function.TapDialog)         | A dialog that stays inside your mount              |
| [`TapSkeleton`](/extensions/reference/frontend-api/Function.TapSkeleton)     | The loading placeholder                            |
| [`TapEmptyState`](/extensions/reference/frontend-api/Function.TapEmptyState) | Nothing to show                                    |
| [`TapErrorState`](/extensions/reference/frontend-api/Function.TapErrorState) | Something failed, with a retry                     |
| [`formFields`](/extensions/reference/frontend-api/Function.formFields)       | The field list `TapForm` renders, without the form |
| [`cn`](/extensions/reference/frontend-api/Function.cn)                       | Joins class names                                  |

## UI kit props

One props type per component:
[`TapCardProps`](/extensions/reference/frontend-api/Interface.TapCardProps),
[`TapPageHeaderProps`](/extensions/reference/frontend-api/Interface.TapPageHeaderProps),
[`TapStatProps`](/extensions/reference/frontend-api/Interface.TapStatProps),
[`TapTableProps`](/extensions/reference/frontend-api/Interface.TapTableProps),
[`TapButtonProps`](/extensions/reference/frontend-api/Interface.TapButtonProps),
[`TapSelectProps`](/extensions/reference/frontend-api/Interface.TapSelectProps),
[`TapFormProps`](/extensions/reference/frontend-api/Interface.TapFormProps),
[`TapDialogProps`](/extensions/reference/frontend-api/Interface.TapDialogProps),
[`TapSkeletonProps`](/extensions/reference/frontend-api/Interface.TapSkeletonProps),
[`TapEmptyStateProps`](/extensions/reference/frontend-api/Interface.TapEmptyStateProps),
[`TapErrorStateProps`](/extensions/reference/frontend-api/Interface.TapErrorStateProps).

[`TapInputProps`](/extensions/reference/frontend-api/TypeAlias.TapInputProps) is the union of
[`TapSingleLineInputProps`](/extensions/reference/frontend-api/Interface.TapSingleLineInputProps)
and [`TapTextareaProps`](/extensions/reference/frontend-api/Interface.TapTextareaProps).
`TapTable` takes its columns as
[`TapTableColumn`](/extensions/reference/frontend-api/Interface.TapTableColumn) or
[`TapTableColumnDef`](/extensions/reference/frontend-api/Interface.TapTableColumnDef);
`TapForm` and `formFields` produce
[`TapFormField`](/extensions/reference/frontend-api/Interface.TapFormField) of a
[`TapFormFieldKind`](/extensions/reference/frontend-api/TypeAlias.TapFormFieldKind); `cn` takes a
[`ClassValue`](/extensions/reference/frontend-api/TypeAlias.ClassValue).

## Errors

[`TapError`](/extensions/reference/frontend-api/Class.TapError),
[`TapServerError`](/extensions/reference/frontend-api/Class.TapServerError),
[`TAP_ERROR_CODES`](/extensions/reference/frontend-api/Variable.TAP_ERROR_CODES),
[`TapErrorCode`](/extensions/reference/frontend-api/TypeAlias.TapErrorCode).
Every code with its fix is on [Errors](/extensions/reference/errors).

## Component props

[`TapWidgetProps`](/extensions/reference/frontend-api/Interface.TapWidgetProps),
[`TapTabProps`](/extensions/reference/frontend-api/TypeAlias.TapTabProps),
[`TapPageProps`](/extensions/reference/frontend-api/Interface.TapPageProps),
[`TapRowActionProps`](/extensions/reference/frontend-api/Interface.TapRowActionProps),
[`TapSettingsProps`](/extensions/reference/frontend-api/Interface.TapSettingsProps).

## The bridge

[`Tap`](/extensions/reference/frontend-api/Interface.Tap) is the object `useTap()` returns.
Its members: `extension`, `env`, `host`, `auth`, `project`, `filters`, `theme`, `locale`,
`timezone`, `format`, `nav`, `data`, `server`, `state`, `ui`, `context`, `storage`,
`telemetry`, `actions`, `invalidate`.

`format` is [`TapFormatters`](/extensions/reference/frontend-api/Interface.TapFormatters);
`nav` moves along a [`TapPath`](/extensions/reference/frontend-api/TypeAlias.TapPath), which
names a [`HostPage`](/extensions/reference/frontend-api/TypeAlias.HostPage); `ui` raises toasts
of a [`TapToastTone`](/extensions/reference/frontend-api/TypeAlias.TapToastTone), asks with
[`TapConfirmOptions`](/extensions/reference/frontend-api/Interface.TapConfirmOptions) and sends a
[`TapChatCard`](/extensions/reference/frontend-api/TypeAlias.TapChatCard); `actions` returns a
[`TapActionRun`](/extensions/reference/frontend-api/Interface.TapActionRun); `auth.can` takes a
[`ScopeKey`](/extensions/reference/frontend-api/TypeAlias.ScopeKey). A widget is anchored at a
[`SlotId`](/extensions/reference/frontend-api/TypeAlias.SlotId).
[`TapInternals`](/extensions/reference/frontend-api/Interface.TapInternals) is the host's own
channel and is not for vendors.

## Filters and units

[`TapFilters`](/extensions/reference/frontend-api/Interface.TapFilters) carries a
[`TapDateRange`](/extensions/reference/frontend-api/Interface.TapDateRange), a
[`TapPlatformFilter`](/extensions/reference/frontend-api/TypeAlias.TapPlatformFilter) over
[`TapPlatform`](/extensions/reference/frontend-api/TypeAlias.TapPlatform), and a country. A
comparison carries a
[`TapComparisonSide`](/extensions/reference/frontend-api/Interface.TapComparisonSide) and a
[`TapChangeKey`](/extensions/reference/frontend-api/TypeAlias.TapChangeKey). A metric is a
[`TapSeriesMetric`](/extensions/reference/frontend-api/TypeAlias.TapSeriesMetric); a mount
renders at a [`TapSize`](/extensions/reference/frontend-api/TypeAlias.TapSize).

## Queries and results

[`TapQuery`](/extensions/reference/frontend-api/TypeAlias.TapQuery) and
[`TapResult`](/extensions/reference/frontend-api/TypeAlias.TapResult), keyed by a
[`DataQueryKind`](/extensions/reference/frontend-api/TypeAlias.DataQueryKind), with one result
type per kind:
[`TapProjectResult`](/extensions/reference/frontend-api/Interface.TapProjectResult),
[`TapSeriesResult`](/extensions/reference/frontend-api/Interface.TapSeriesResult),
[`TapKeywordsResult`](/extensions/reference/frontend-api/Interface.TapKeywordsResult),
[`TapListingResult`](/extensions/reference/frontend-api/Interface.TapListingResult),
[`TapReviewsResult`](/extensions/reference/frontend-api/Interface.TapReviewsResult),
[`TapCrashesResult`](/extensions/reference/frontend-api/Interface.TapCrashesResult),
[`TapRevenueResult`](/extensions/reference/frontend-api/Interface.TapRevenueResult). The rows
they carry are [`TapApp`](/extensions/reference/frontend-api/Interface.TapApp),
[`TapRelease`](/extensions/reference/frontend-api/Interface.TapRelease),
[`TapKeyword`](/extensions/reference/frontend-api/Interface.TapKeyword),
[`TapListing`](/extensions/reference/frontend-api/Interface.TapListing),
[`TapReview`](/extensions/reference/frontend-api/Interface.TapReview),
[`TapCrashIssue`](/extensions/reference/frontend-api/Interface.TapCrashIssue),
[`TapSeriesPoint`](/extensions/reference/frontend-api/Interface.TapSeriesPoint).

## Storage, procedures, actions and events

[`TapStorage`](/extensions/reference/frontend-api/TypeAlias.TapStorage) reaches a
[`TapSingleton`](/extensions/reference/frontend-api/Interface.TapSingleton) or a
[`TapCollection`](/extensions/reference/frontend-api/Interface.TapCollection) by
[`TapSingletonName`](/extensions/reference/frontend-api/TypeAlias.TapSingletonName), typed as
[`TapSingletonDocument`](/extensions/reference/frontend-api/TypeAlias.TapSingletonDocument).

[`TapProcedures`](/extensions/reference/frontend-api/TypeAlias.TapProcedures),
[`TapProcedureName`](/extensions/reference/frontend-api/TypeAlias.TapProcedureName),
[`TapProcedureInput`](/extensions/reference/frontend-api/TypeAlias.TapProcedureInput),
[`TapProcedureOutput`](/extensions/reference/frontend-api/TypeAlias.TapProcedureOutput);
[`ActionId`](/extensions/reference/frontend-api/TypeAlias.ActionId),
[`ActionInput`](/extensions/reference/frontend-api/TypeAlias.ActionInput),
[`ToolId`](/extensions/reference/frontend-api/TypeAlias.ToolId),
[`ToolInput`](/extensions/reference/frontend-api/TypeAlias.ToolInput),
[`PromptId`](/extensions/reference/frontend-api/TypeAlias.PromptId),
[`PromptInput`](/extensions/reference/frontend-api/TypeAlias.PromptInput);
[`WebhookName`](/extensions/reference/frontend-api/TypeAlias.WebhookName),
[`WebhookPayload`](/extensions/reference/frontend-api/TypeAlias.WebhookPayload),
[`TapHostEvents`](/extensions/reference/frontend-api/TypeAlias.TapHostEvents),
[`HostEventName`](/extensions/reference/frontend-api/TypeAlias.HostEventName),
[`TelemetryEvent`](/extensions/reference/frontend-api/TypeAlias.TelemetryEvent);
[`TapSettingsValues`](/extensions/reference/frontend-api/TypeAlias.TapSettingsValues),
[`TapCredentialValues`](/extensions/reference/frontend-api/TypeAlias.TapCredentialValues).

These read the interfaces
[`tappify extension types`](/extensions/build/generated-types) fills in:
[`TapStorageMap`](/extensions/reference/frontend-api/Interface.TapStorageMap),
[`TapProcedureMap`](/extensions/reference/frontend-api/Interface.TapProcedureMap),
[`TapActionMap`](/extensions/reference/frontend-api/Interface.TapActionMap),
[`TapToolMap`](/extensions/reference/frontend-api/Interface.TapToolMap),
[`TapPromptMap`](/extensions/reference/frontend-api/Interface.TapPromptMap),
[`TapWebhookMap`](/extensions/reference/frontend-api/Interface.TapWebhookMap),
[`TapHostEventMap`](/extensions/reference/frontend-api/Interface.TapHostEventMap),
[`TapTelemetryEvents`](/extensions/reference/frontend-api/Interface.TapTelemetryEvents),
[`TapSettings`](/extensions/reference/frontend-api/Interface.TapSettings),
[`TapCredentials`](/extensions/reference/frontend-api/Interface.TapCredentials).
Before you generate, each falls back to a permissive shape.

## Query keys

[`dataQueryKey`](/extensions/reference/frontend-api/Function.dataQueryKey),
[`procedureQueryKey`](/extensions/reference/frontend-api/Function.procedureQueryKey),
[`storageQueryKey`](/extensions/reference/frontend-api/Function.storageQueryKey),
[`procedurePrefix`](/extensions/reference/frontend-api/Function.procedurePrefix) and
[`installPrefix`](/extensions/reference/frontend-api/Function.installPrefix) build the cache keys
the host uses. You need them only when you reach the query cache directly.

## Also shipped

`@tappify/extension-sdk/styles.css` is the UI kit's stylesheet. Import it once per entry file.
`@tappify/extension-sdk/vite` exports `tappifyExtension()`, which wires a Vite build for the
host, and `collectEntryStyles`. `@tappify/extension-sdk/manifest` exports the schema, the
registry constants and `defineManifest` — see
[Manifest schema](/extensions/reference/manifest). `@tappify/extension-sdk/host` is Tappify's own
entry and is not for vendors.