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 third, example-nextjs, shows live copy in server-rendered Next.js pages; see Live copy in server-rendered pages.

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.

Register the dev server’s origin first or every request fails CORS:

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.