H5: runnable starter

A small local page for verifying credentials and receiving your first event. It uses the browser's native WebSocket API, with no npm dependencies.

Download and run

First complete the access prerequisites. Install Node.js 22+ if needed, then run the following in PowerShell from a folder where live-studio-starter does not already exist:

New-Item -ItemType Directory live-studio-starter
Set-Location live-studio-starter
$starterBase = 'https://tiktok-live-studio-local-data-access.pages.dev/samples'
'local-overlay.html', 'local-client.mjs', 'preview.mjs' | ForEach-Object {
  Invoke-WebRequest "$starterBase/$_" -OutFile $_
}
node preview.mjs

Open http://127.0.0.1:4178 in a browser on the LIVE Studio machine. Enter app_id, key_id, and secret, then select Connect. If your browser requests local-network permission, allow it only for this trusted local preview. Do not disable browser security.

Expected: SCANNING → AUTHENTICATING → AUTHENTICATED. Once a new enabled interaction arrives, the log shows EVENT live.like, EVENT live.gift, or EVENT live.chat. No fake events are generated.

Select Disconnect / cancel to stop. Press Ctrl+C in PowerShell to stop the preview server. Port 4178 serves this development page only; it is not the Gateway port.

What's included

File	Responsibility
local-overlay.html	Runtime credential inputs, one connection owner, event log, example gift rules.
local-client.mjs	Bounded port discovery, hello validation, auth-result gating, cancellation, bounded deduplication.
preview.mjs	Serves only the starter assets on loopback; never receives credentials.

You can also download these three files manually into one directory. Review the source before entering credentials. The public copy is for downloading; run the page locally, not on the public documentation domain.

Customize gift effects

The page maps gift IDs 5655, 6064, and 7569 to named example actions. It prints the action once at repeat_end=true; it does not multiply by the cumulative count. Replace those actions with your own game handlers and select IDs from the Gift Catalog.

Event logs show types and example action names, not viewer messages or credentials. If you display chat, use plain-text rendering.

Before production

This is a first-event starter, not a production SDK. It deliberately uses manual reconnect. Each click rediscovers and authenticates; repeated clicks cannot create duplicate sessions. Production clients should add cancellable backoff, strict payload validation, and game-specific combo rules. The deduplication cache retains up to 500 keys with a 60-second window, so it is not an exactly-once delivery guarantee.

If access is revoked (DISCONNECT.reason_code=510), confirm access with support before reconnecting. See errors and disconnects and connection lifecycle.

Credentials stay in memory, are never sent before hello validation, and are not stored in browser storage or submitted to the preview server. Do not embed them in public assets or expose the local connection through a remote proxy.