Run the example apps

Two runnable apps live in the repository, both Vite + React. The recipes app works without a SparkleTree account, streaming from a built-in mock server; the one-page integration wants real ids from your dashboard.

A one-page integration you can read in a sitting

example is one page: a provider, a hero, a button. Read it in a sitting.

cd example
cp .env.example .env.local   # fill in from your dashboard
pnpm dev                     # http://localhost:4322

Eight recipes, no backend required

examples is the same SDK dressed for eight very different pages. With no configuration it runs against a built-in mock server that replays recorded responses as real network traffic, and every page is badged “mock stream” so a replay can never be mistaken for live adaptation.

cd examples
pnpm dev                     # http://localhost:4323

Recipe	Route	What it shows
Editorial hero	`#/editorial`	Serif display type, art direction, light and dark. The SDK owns the words; your CSS owns everything they wear.
The storefront	`#/shop`	A whole shop: a promo ribbon on the degraded path, a live seasonal hero, product cards whose prices stay facts and stay unlabelled, a brand story written as one fragment group, reviews the SDK never touches, and a generated checkout button.
Guided dealer campaign	`#/dealer`	Your own `context` beating the SDK’s guesses, and a button whose destination the campaign decides.
The restaurant	`#/restaurant`	Tonight’s menu: dishes and prices never adapt; the one adapted thing is the kitchen’s note card. The quietest the SDK gets, and provenance still travels with generated copy.
SaaS pricing page	`#/pricing`	Plans and prices are facts that never adapt; the hero’s cached copy types into the held canvas in one paced entrance; one adapted sentence per plan, one label for the grid.
Continuity page	`#/continuity`	Three blocks down a long page; later ones open when reached, carrying what the visit observed on the way.
Water	`#/water`	A WebGL2 fluid simulation poured over a live hero and button, proving the page underneath stays ordinary clickable DOM.
The parts drawer	`#/components`	The component library: seven premade, self-contained parts. Announcement bar, split hero, product card, pricing card, FAQ block, newsletter signup, testimonial. Copy a function, keep the label.

Point them at your own API

Fill in three required variables (one more is optional) and every recipe streams from your account instead of the mock:

cp .env.example .env.local

Variable
`VITE_SPARKLETREE_API_BASE`	Your embed API host.
`VITE_SPARKLETREE_ORG_ID`	Dashboard → organization settings.
`VITE_SPARKLETREE_CAMPAIGN_ID`	The campaign every streaming recipe plays.
`VITE_SPARKLETREE_CONTENT_CAMPAIGN_ID`	Optional, for the card recipes.

curl -X POST "https://<your-api>/api/organizations/<org-id>/embed-origins" \
  -H "Content-Type: application/json" \
  -d '{"origin":"http://localhost:4323"}'

Plaintext http is accepted for localhost only. Vite reads environment variables at startup, so restart pnpm dev after editing .env.local.

There is no API key to find

The read path takes no credential by design, since anything in a browser bundle is public. That is why origin registration is the step that matters. See Register your origin.