> ## 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 ; public storefront read endpoints require no auth. > To sign a new merchant up for Fluid programmatically, run `fluid signup` from the Fluid CLI, or 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. Before authenticated calls are possible, the merchant must sign the agent in to the Fluid CLI with the emailed code and --shop set to the company's fluid_shop (which also confirms the signup), or open the emailed confirmation link and give the agent an API token. > 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 on an operation whose spec documents those params — mostly the unversioned company-v0 admin surface, plus some lists on other surfaces, versioned ones included; page every other list with cursors. > 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 except two operations that take no credential, POST /api/company (create a company) and GET /api/agreements/{id} — 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. # The member sites SDK > Use @fluid-app/sites in a member site: read who is signed in, call the Fluid API as the visitor, use the site's database, add to the storefront's cart, follow Back and Forward, and link to the storefront. `@fluid-app/sites` is the browser SDK of a member site. It speaks only to your site's own host, which brokers each call to Fluid. Your code never holds a Fluid token or a database credential. ## Import it once Add the package and import it at the top of your app, before anything renders: ```bash theme={null} npm install @fluid-app/sites ``` ```ts src/main.tsx theme={null} // Importing the SDK starts its handshake with the storefront. import "@fluid-app/sites"; ``` Then import `fluid` where you need it. The SDK also puts the same object on `window.fluid`. ```ts theme={null} import { fluid } from "@fluid-app/sites"; ``` When the site loads in the storefront, the SDK connects to the storefront and receives the visitor's sign-in. A call made while it connects waits for it, for up to three seconds, then goes as a guest. | Part | What it does | | - | - | | `fluid.auth` | Who is here, and sign-in and sign-out through the storefront | | `fluid.api` | The Fluid Member API, as the visitor, within the site's scopes | | `fluid.db` | The site's own database | | `fluid.cart` | The storefront's cart and checkout | | `fluid.history` | Back and Forward, for your router | | `fluid.storefront` | Storefront addresses that keep the visit's credit | | `fluid.fn` | Server functions. Not available yet: every call answers `404` | ## Read who is here `fluid.auth.me()` returns the visitor and the site: ```ts theme={null} const me = await fluid.auth.me(); if (me.viewer === null) { // A guest, on a public site. } else { console.log(`Hello, ${me.viewer.name}`); } ``` | Field | What it holds | | - | - | | `viewer` | The signed-in visitor, or `null` for a guest. It has `userId`, `name`, `avatarUrl`, `memberId`, `relation` (`owner`, `admin` or `member`) and `fields`, the member fields the site may read | | `site` | The site's `id`, `handle`, `name`, `visibility` and `companyName` | | `scopes` | The Fluid API scopes this visitor's calls may use on this site | | `credit` | The visit's credit: the sharer's username, else the owner's, else `home` | | `storefrontUrl` | The storefront's address, such as `https://yoli.com` | `me()` throws a `FluidRequestError` when the site's host answers with an error. The fields in `viewer.fields` come from the member fields the site declares in `config/access.json`. See [Fluid data the site uses](https://docs.fluid.app/member-sites-v1/declarations.md#fluid-data-the-site-uses). ### Sign in and sign out ```tsx theme={null} ``` * `fluid.auth.signIn({ returnTo })` asks the storefront to send the visitor to its sign-in, then back to `returnTo`, a path of your site. With no `returnTo`, the visitor comes back to the page they're on. * `fluid.auth.signOut()` opens the storefront's account menu, where the visitor signs out and confirms it. The storefront acts on both only when the visitor clicked. Call them from a click handler, never on load. Outside a storefront, both do nothing and log a warning. ## Call the Fluid API `fluid.api` calls the Fluid [Member API](https://docs.fluid.app/api/member-apis.md) as the visitor. Pass a Member API path without its version prefix: `"/search"` calls `/api/member/v2026-10/search`. ```ts theme={null} const results = await fluid.api.get("/search", { q: "protein" }); const response = await fluid.api.fetch("/search?q=protein", { headers: { Accept: "application/json" }, }); if (response.status === 403) showMessage("This site can't search the store."); ``` * `fluid.api.get(path, query)` sends a `GET` and returns the parsed JSON. It throws a `FluidRequestError` for any status that isn't 2xx. * `fluid.api.fetch(path, init)` takes `fetch`'s options and returns the response, whatever its status. * Both throw a `TypeError` for a path that isn't a Member API path, such as a full URL. Every call acts as the visitor: their own orders, their own team, never anyone else's. A call is served only when its scope is one the visitor has on this site. Otherwise it answers `403` with `scope_not_granted` and the scope it needed. [Fluid data the site uses](https://docs.fluid.app/member-sites-v1/declarations.md#fluid-data-the-site-uses) says how a site gets a scope. For each operation, see the generated [Member API reference](https://docs.fluid.app/api/member-apis.md). ### Handle errors `FluidRequestError` carries the answer: | Property | What it holds | | - | - | | `status` | The HTTP status, such as `403` | | `code` | The body's `error` code, such as `scope_not_granted`, or `null` | | `body` | The parsed JSON body, or `null` | ```ts theme={null} import { fluid, FluidRequestError } from "@fluid-app/sites"; try { const orders = await fluid.api.get("/orders"); } catch (error) { if (error instanceof FluidRequestError && error.code === "scope_not_granted") { showMessage("This site can't show your orders."); } else { throw error; } } ``` | Code | Status | What it means | | - | - | - | | `sign_in_required` | 401 | The visitor isn't signed in | | `forbidden` | 403 | The site doesn't admit this visitor | | `scope_not_granted` | 403 | The visitor has no grant for the call's scope on this site | | `not_found` | 404 | Nothing answers at this path | | `rate_limited` | 429 | Too many calls. Each visitor may make 600 API calls a minute on one site | | `unavailable` | 503 | Fluid couldn't answer. Try again | ## Use the site's database `fluid.db` reads and writes your site's own tables, declared in `db/schema.json`. It follows Supabase's query builder, and every call resolves `{ data, error }`: ```ts theme={null} const { data, error } = await fluid.db .from("rsvps") .select("name,guests") .eq("event_id", "fall-launch") .order("created_at", { ascending: false }) .limit(50); ``` [The member site database](https://docs.fluid.app/member-sites-v1/database.md) covers the schema, the table rules, every query method and every error code. ## Use the storefront's cart The storefront's cart runs in the storefront, not in your frame, so member pricing and the visit's credit stay the storefront's. `fluid.cart` passes each call to it, with the FairShare cart's own arguments. ```ts theme={null} await fluid.cart.add([{ variant_id: 48213, quantity: 1 }]); fluid.cart.open(); ``` | Method | What it does | | - | - | | `add(...args)` | Adds to the cart, with the arguments of FairShare's `addCartItems` | | `update(...args)` | Changes quantities, with the arguments of `updateCartItems` | | `remove(...args)` | Removes a line, with the arguments of `removeCartItemById` | | `get()` | Returns the current cart | | `open()`, `close()` | Opens or closes the cart drawer | | `checkout()` | Opens checkout in the storefront's window | | `onChange(listener)` | Calls `listener` with the cart on each change. Returns a function that stops it | `add`, `update`, `remove` and `get` return a promise of what the cart answered. Each rejects with an `Error` when the storefront reports a failure, when the site isn't in a storefront, or when no answer comes within 30 seconds. `open`, `close` and `checkout` log a failure and never throw. [The cart API](https://docs.fluid.app/sdk/cart-api.md#modifying-the-cart) describes FairShare's arguments. The cart's HTML controls work in your site too. A click on an element with `data-fluid-add-to-cart` adds its variants, and `data-fluid-cart="open"` or `"close"` opens or closes the drawer: ```html theme={null} ``` Enrollment pack controls and `data-fluid-cart="toggle"` do nothing in a member site. See [Declarative HTML controls](https://docs.fluid.app/sdk/cart-api.md#declarative-html-controls) for the attributes. ## Follow Back and Forward The storefront keeps your site's history: one entry per page. Your site's `history.pushState` calls and same-site link clicks still work, and the SDK reports each move to the storefront. A single-page app's router listens with `fluid.history.onGo`. On Back, Forward or a re-sync, the SDK calls your listener with the path and the fragment, instead of reloading the frame: ```ts src/router.ts theme={null} import { fluid } from "@fluid-app/sites"; const stop = fluid.history.onGo((path, hash) => { router.navigate(path + (hash ?? "")); }); ``` `path` is your site's own path and query, such as `/events/42?tab=agenda`, and `hash` is the fragment, such as `#schedule`, or `null`. Move your router there with `pushState` or `replaceState`. The SDK doesn't report a move it started through `onGo` to the storefront, so Back and Forward never add an entry twice. The call returns a function that removes the listener. With no listener, the SDK moves the frame to the path itself. A multi-page site needs no listener: plain links between its pages work. ## Link to the storefront The frame's sandbox refuses top-level navigation, so a script can't move the storefront's window and `target="_top"` doesn't work. Link to storefront pages with a plain ``. When the visitor clicks it, the SDK asks the storefront to open it in its own window. `fluid.storefront.url(path)` returns a storefront address that carries the visit's credit, so the person who shared the site gets credit for what the visitor buys: ```tsx theme={null} const [shopUrl, setShopUrl] = useState(null); useEffect(() => { fluid.storefront.url("/shop").then(setShopUrl); }, []); return shopUrl && Shop the whole store; ``` `fluid.storefront.url("/shop")` returns an address such as `https://yoli.com/janedoe/shop`. With no credit, or the default `home`, the address has no credit prefix. It throws a `TypeError` for a path that leaves the storefront. The SDK also adds the visit's credit to the storefront links already on your page, and to new ones as the page changes, so a link opened in a new tab keeps it. To keep a link as you wrote it, add `data-fluid-credit="off"`: ```html theme={null} Returns policy ``` This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.