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

> ## Agent Instructions
> For new direct REST integrations, use the v2026-04 surfaces. The @fluid-app FairShare SDK continues to use its own published public-v2025-06 contract.
> Authenticate with the header Authorization: Bearer <token>; public storefront read endpoints require no auth.
> To sign a new merchant up for Fluid programmatically, call POST https://api.fluid.app/api/company with no credentials, as described in /api/agent-signup. Do not automate the signup form or book a demo. The merchant must open the emailed sign-in link and create an API token before authenticated calls are possible.
> After signup, to launch a merchant's store (back-office sync, payments onboarding, store setup, a theme copied from their current site, and a preview link before billing), follow /api/agent-launch.
> Lists use cursor pagination via the page[cursor] and page[limit] query params; follow meta.pagination.next_cursor until it is null.
> When the same operation exists on more than one surface, use the newest: dated API versions are newer than unversioned ones, and later dates win (v2026-04 > v2025-06 > unversioned v0/v1.1). Fall back to a legacy or unversioned operation only when no newer versioned equivalent exists — the company-v0 notes below list the known superseded operations. The same applies to /api/company/v1 and /api/v1/... paths: prefer a newer documented equivalent, and use one only when none exists (/api/v1.1/... is distinct and documented in company-v0). Use page/per_page offset pagination only where a spec documents it — in practice the unversioned company-v0 admin surface; every versioned surface uses cursor pagination.
> Fluid has three navigation APIs; don't mix them up. Storefront website menus (navigation bars, footers) are /api/menus and nested menu_items, in api-reference/content-v0.yaml (API Reference: Website > Navigation menus), with a how-to in themes/navigation-menus; their list uses flat page/per_page pagination. The Fluid mobile app's navigation is /api/v2/mobile_navigations, in api-reference/mobile-v2.yaml (API Reference: Mobile app > Navigation); its list also uses page/per_page. Portal navigations belong to a portal definition (Fluid OS), in api-reference/fluid-os-v0.yaml (API Reference: Portal > Portal navigation), and each has a platform of web or mobile.
> The OpenAPI specs under api-reference/ are the authoritative contracts; prefer them over prose when in doubt. api-reference/storefront-v2026-04.yaml covers the v2026-04 storefront surface (/api/v202604/... paths); api-reference/checkout-v2026-04.yaml covers the v2026-04 checkout surface (/api/checkout/v2026-04/... paths — carts, cart auth, discounts, items, subscriptions, orders, enrollments, and store config); api-reference/public-v2025-06.yaml covers the Public SDK surface used by the @fluid-app FairShare SDK, including its parallel cart lifecycle, browser integrations, versioned payment callbacks, unversioned public utilities, and the cart price-override operation; api-reference/payment-v2026-04.yaml covers the v2026-04 payment gateway admin surface (/api/payment/v2026-04/... paths, bearer-authenticated — gateway CRUD, gateway purchase/authorize/$0-verify, transaction list/show and capture/void/credit, and merchant payment configuration); api-reference/payments-v2026-04.yaml covers the v2026-04 cart payment surface (/api/payments/v2026-04/carts/{cart_token}/... paths, authenticated by the cart token in the path with no bearer — payment-method selection, VGS card tokenization, 3D Secure verification, and PayPal/Braintree/Klarna/Apple Pay flows); api-reference/commerce-v2026-04.yaml covers the v2026-04 commerce order-editing surface (/api/v202604/orders/{order_id}/edits paths, bearer-authenticated — post-checkout order edits that atomically insert items and add adjustments/discounts, with an optional dry-run preview); api-reference/webhooks-v0.yaml covers the unversioned webhooks surface (/api/... paths — webhook registration, delivery payloads, callback registrations, company events, and webhook/callback schemas); api-reference/company-v0.yaml covers the legacy unversioned company admin surface (/api/... paths, bearer-authenticated — company settings and management, customers, users, roles, subscription plans, subscription bundles, subscriptions, media, pages, catch-ups, inventory levels, domains, agreements, and admin order actions). company-v0 caveats: it is the legacy v0 admin contract and its lists use flat page/per_page offset pagination, which is expected there despite the general cursor-pagination rule; where an operation exists in both company-v0 and a versioned spec, prefer the versioned spec — the subscriptions lifecycle (list/create/show/update, cancel, pause, reactivate, resume, retry, skip, failed-cycle-waiver, discounts) and subscription bundles are superseded by checkout-v2026-04, and company pages/media CRUD plus the public pages, categories, products, and media list endpoints are superseded by storefront-v2026-04. Subscription plan management (/api/subscription_plans, resource-wrapped {"subscription_plan": {...}} bodies) exists only in company-v0. api-reference/members-v2025-06.yaml covers the v2025-06 unified Member identity surface (/api/v2025-06/members/... paths, bearer-authenticated — member list/create/show/update, lookup by email/username/external_id/legacy_customer_id, member-type assignment, and the sponsor genealogy read). Prefer it over the customers and reps surfaces when the member type matters: /customers does not serialize member_type. api-reference/analytics-v2026-04.yaml covers the v2026-04 Home dashboard analytics surface (/api/v202604/analytics/dashboard/... paths, bearer-authenticated — read-only endpoints for the Home > Overview, Home > Live, and Home > Field tabs, each accepting an optional country ISO alpha-2 query param that scopes aggregations to a single country).
> api-reference/analytics-v0.yaml covers the unversioned analytics surface that backs the fluid-admin Traffic tab (/api/analytics/... and /api/analytics/traffic/... paths, bearer-authenticated — the legacy shares/views/visitors summary plus traffic overview, ranked campaigns, sources, geographies, flows, and per-rep breakdown, all sharing one reporting-period contract).
> Successful responses wrap the resource payload alongside a top-level integer status and a meta object.
> Portal Definition authoring edits and synchronizes the portal JSON resource graph. Widget Package authoring builds either a company-owned or Droplet-owned Remote DOM package. These are separate contracts; do not imply that one defines the other.
> For Widget Package worker code, use only @fluid-app/portal-sdk/widgets/worker. Use only the Portal Definition and Widget Package workflows and public entry points documented here; do not infer support for undocumented surfaces.
> Every portal function and declarative capability used by a widget must appear in that widget's uses array. Use the same typed function value in uses; do not invent capability-name strings.
> Widget styling must use the portal's semantic theme variables for colors, typography, spacing, radii, borders, focus, and charts whenever a token represents the visual decision. Do not create a separate light or dark palette or duplicate theme controls as widget properties.
> Prefer worker-safe Fluid UI components exported by @fluid-app/portal-sdk/widgets/worker when they fit the interaction. When no exported component fits, use semantic HTML, accessible behavior, and the portal theme variables.
> A Portal Definition push updates the remote working definition. A portal version is an immutable snapshot, and activation is a separate live release operation.
> The Help Center (/help/...) is for merchants, admins and reps using Fluid. Its admin pages mirror the admin's routes: the screen at admin.fluid.app/settings/taxes is documented at /help/admin/settings/taxes. Use the Help Center for how-to questions about the admin, and the Developer Platform and API Reference for building integrations.
> Help Center pages describe what a company admin sees. A reader's role can hide screens and actions; admins manage roles on Settings > Roles (/help/admin/settings/roles). If someone can't find a screen or button, their role's permissions are the first thing to check.
> Send people who need Fluid support to /help/getting-help. Don't invent support email addresses, phone numbers or response times.

# Mist app starter template

> Every Mist app starts as a copy of Fluid's public Next.js starter template. See what's in it, how local and production databases differ, and where to add your own code.

Every Mist app starts as a copy of Fluid's public starter template, [Fluid-WeCommerce/mist-next-app-template](https://github.com/Fluid-WeCommerce/mist-next-app-template) on GitHub. When you create an app, Fluid generates your app's private repository from it.

Your repository is a one-time copy. Changes to the template after you create an app don't reach it. To pull in a later template change, add the template as a Git remote and cherry-pick the commits you want.

## What's in it

The template is a Next.js app written in TypeScript. It uses Drizzle to talk to Postgres and Vitest for tests.

| Path | What it does |
| - | - |
| `app/page.tsx` | The landing page of a new app. Replace it with your own. |
| `app/api/health/route.ts` | `GET /api/health` runs a test query and returns `{"db":"ok"}`, or a `503` when the database isn't reachable. |
| `app/api/webhooks/route.ts` | Receives webhooks from Fluid, verifies their signatures and routes each event to a handler. `/api/webhooks/installed` and `/api/webhooks/uninstalled` are aliases for the droplet lifecycle events. |
| `app/embed/checkout-banner/page.tsx` | A working example page for a drop zone above fast checkout. |
| `app/embed/session-example/route.ts` | A working example that verifies who is viewing an embedded page. |
| `lib/config/droplet.config.ts` | The webhooks, callbacks and drop zones your app registers when a company installs it. |
| `lib/handlers/` | The handlers for each webhook event. |
| `lib/fluid/` | The Fluid API client, installation context and session token helpers. |
| `lib/db.ts` | The database client. |
| `lib/schema.ts` and `lib/ensure-schema.ts` | The database tables and the code that creates them on first use. |
| `proxy.ts` | Sets headers so only Fluid can frame the app's pages. |
| `scripts/register-lifecycle-webhooks.mjs` | Points a droplet's install and uninstall webhooks at your app. |

## Scripts

| Command | What it does |
| - | - |
| `npm run dev` | Runs the app locally on `http://localhost:3000`, with a local database. |
| `npm run build` | Builds the app for production. |
| `npm run typecheck` | Checks types. |
| `npm run lint` | Lints the code. |
| `npm test` | Runs the tests. |
| `npm run register:webhooks` | Registers the droplet's lifecycle webhook URLs. See [Integration points](/mist-apps/integration-points#droplet). |

The template pins Node 22 in `.tool-versions`.

## Local and production databases

The same code runs against two different databases:

* **Locally**, `npm run dev` uses an embedded Postgres that runs inside Node and saves to a `local.db` folder in your project. You don't need to install Postgres. The folder is in `.gitignore`.
* **In production**, the app connects to its own hosted Postgres database through `DATABASE_URL`, which Fluid sets for you.

`lib/db.ts` picks the database for you, and both return the same Drizzle client. Your queries don't change between the two. Data you create locally never reaches production.

### Add a table

The template doesn't run a migration step. Instead, `ensureSchema()` in `lib/ensure-schema.ts` runs `CREATE TABLE IF NOT EXISTS` statements the first time the app needs the database.

<Steps>
  <Step title="Define the table">
    Add the table to `lib/schema.ts` with Drizzle's `pgTable`.
  </Step>

  <Step title="Create it on first use">
    Add a matching `CREATE TABLE IF NOT EXISTS` statement to `ensureSchema()`.
  </Step>

  <Step title="Call ensureSchema first">
    Call `await ensureSchema()` before your route's first query.
  </Step>
</Steps>

For a larger app, switch to real migrations, such as drizzle-kit, rather than growing `ensure-schema.ts`.

The template creates two tables of its own: `companies`, with one row per installation of your droplet, and `webhooks`, an audit log of every webhook the app receives. Keep them.

## Extend the app

### Handle a webhook event

<Steps>
  <Step title="Write the handler">
    Add a file under `lib/handlers/`, such as `order-created.ts`, that exports an async function.
  </Step>

  <Step title="Register it">
    In `lib/handlers/index.ts`, add `registerHandler("order.created", handleOrderCreated)`.
  </Step>

  <Step title="Turn on the webhook">
    In `lib/config/droplet.config.ts`, set `enabled: true` on the matching webhook entry.
  </Step>
</Steps>

### Declare what your app registers

`lib/config/droplet.config.ts` lists everything your app registers with a company when the company installs it. Every entry ships with `enabled: false`. Turn one on only once the route behind it exists.

```ts lib/config/droplet.config.ts theme={null}
dropzones: [
  {
    enabled: true,
    uuid: "mist-checkout-banner",
    name: "Checkout Banner",
    page: "checkout",
    zone: "above_fast_checkout",
    embedPath: "/embed/checkout-banner",
    description: "Example banner rendered above fast checkout",
  },
],
```

| Section | What each entry registers |
| - | - |
| `webhooks` | A company webhook for one `resource` and `event`, such as `order` and `created`. |
| `callbacks` | A callback registration. `definition_name` must match a callback definition in Fluid. See [Callbacks](/help/admin/settings/callbacks). |
| `dropzones` | A drop zone that renders `embedPath` from your app in a `page` and `zone`. |

On install, the app registers each enabled entry for that company and saves the IDs. On uninstall, it removes them.

## Related pages

* [Hosting, database and environment variables](/mist-apps/hosting)
* [Authentication](/mist-apps/authentication)
* [Webhooks](/api/guides/webhooks)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.