Build your first Casset-powered artist page.

No Casset account or API key is required. The starter opens in mocked mode and includes the exact alpha SDK source it needs.

1. Download and run the starter

curl -LO https://casset.fm/downloads/casset-api/casset-headless-react-v0.2.0-alpha.0.zip
unzip casset-headless-react-v0.2.0-alpha.0.zip
cd casset-headless-react
pnpm install
pnpm test
pnpm dev

The app opens in mocked mode. No Casset account, API key, or live route is required. Use the built-in states to exercise ready, empty, permission, entitlement, invalid credential, rate limit, unavailable, and integration outcomes.

2. Make the first TypeScript read

The built-in SDK mock uses aurora-fields. It returns the same strict public response shapes without making a network request.

import { createCassetClient, createCassetMockTransport } from "@casset/apps"

const casset = createCassetClient({
  baseUrl: "http://127.0.0.1:3000",
  transport: createCassetMockTransport({ state: "ready" }),
})

const artist = await casset.getArtist("aurora-fields", {
  requestId: "quickstart-artist-001",
})

console.log(artist.artist.displayName)

Handles use the exact grammar [a-z0-9_-], with 3–30 characters. The client rejects a malformed handle before making a request.

3. Render with React

import { CassetClientProvider, useCassetArtist } from "@casset/react"

function ArtistName() {
  const artist = useCassetArtist("aurora-fields")

  if (artist.status === "loading" || artist.status === "idle") return <p>Loading…</p>
  if (artist.status === "error") return <p>Artist unavailable.</p>
  return <h1>{artist.data.artist.displayName}</h1>
}

export function App() {
  return (
    <CassetClientProvider client={casset}>
      <ArtistName />
    </CassetClientProvider>
  )
}

How this alpha is packaged

@casset/apps and @casset/react are repository-local and are not published to npm. The generated ZIP vendors the exact package source used by Casset.

4. Call the locally served source route

curl --include \
  --header "Accept: application/json" \
  --header "X-Request-Id: quickstart-curl-001" \
  http://127.0.0.1:3000/api/v1/artists/connor

Public v1 reads do not use a credential. This request requires a local Casset server with a published public artist. It tests your local route, not the availability of the deployed alpha route.

5. Need authorization or webhook rehearsal?

Continue with the local sandbox when you need credential issuance, revocation, and sanitized request inspection. Use the separate local webhooks guidefor signing, retries, replay, and duplicate suppression.

Next

• Try the no-network documentation fixture.
• Inspect the exact endpoint contracts.
• Configure timeouts, retries, and request IDs.
• Handle every typed error.