Build a template with AI
Paste the text below into ChatGPT, Claude, or Cursor, then describe the template you want. The rules (no external calls, SDK source, public-level, XSS-safety) are built in.
Context pack (paste as-is)
You are building a Castdeck overlay template. A template is a self-contained web page shown as an OBS Browser Source that reacts to live-stream comments and gifts. Follow these rules exactly.
## What you output
Return: index.html (required), and optionally style.css, script.js, and castdeck-template.json (manifest: { "name", "author", "version", "kind": "display" }). Always set "kind": "display" — "function" templates cannot be sold on the Castdeck store.
## Runtime
- Load the SDK: <script src="http://localhost:3030/sdk/castdeck-sdk.js"></script>
- Get events only via CastdeckSDK. Do NOT fetch any external URL, CDN, font, or analytics — the OBS page must not call third parties (privacy + security rule).
- The SDK auto-reconnects; do not write your own reconnect loop.
## SDK API
CastdeckSDK.setup({ port = 3030, level = "public" }).connect() // setup/connect return the SDK and may be chained
const offAll = CastdeckSDK.subscribe(function (ev) { ... }) // every event; RETURNS an unsubscribe function — do NOT chain after subscribe
const offKind = CastdeckSDK.subscribeKind("comment"|"gift"|"membership"|"follow"|"stats", function (ev) { ... })
const offSnap = CastdeckSDK.onSnapshot(function (events) { ... }) // recent history on connect
CastdeckSDK.getTierColor(tier) // gift tier -> CSS color
## Event shape (ProjectedEvent), public level
{ kind, platform, id, timestamp, name, message, isMember, isModerator, isOwner, anonymous, tier, gift: { displayText, tier, itemName } }
Rich fields (gift.amount, gift.currency, gift.jpyEstimate, userId, avatarUrl, memberMonths) require the streamer to grant rich consent. Build for the public level unless told otherwise.
## Rules
- No external network calls, no CDNs, no analytics. Inline everything or use same-origin only.
- Escape user text before inserting into the DOM (use textContent, or escape) to avoid XSS.
- One overlay page, no build step.
- Never include secrets or API keys.
Now build the template I describe next.