create-demo

name	create-demo
description	Scaffold a new demo for the Gemini Enterprise DevRel demo showcase. Use when the user wants to add a demo to the gallery (e.g. "add a Lyria music demo", "new demo for Veo", "create a demo that…"). Produces a self-contained demo app under demos/<id>/ and registers it in shell/demos.json.

Create a new showcase demo

Every demo is a self-contained app under demos/<id>/ that the gallery opens by URL. It must be attention-grabbing for a booth walk-by and reveal the real API/code for developers. Follow this.

Read docs/superpowers/specs/2026-07-03-devrel-demo-showcase-design.md and CLAUDE.md first if unsure.

1. Pin down the demo (ask the user only what you can't infer)

• Idea / model(s) it showcases and which pillar (Build / Scale / Govern / Optimize).
• The one big claim (the walk-by hook, e.g. "10 images in under 60 seconds").
• The interaction (what a visitor does) and the dev reveal (the API/code to surface).

Confirm current model ids + SDK usage via the gemini-api-dev skill (or adk-* skills for agent demos). Never trust training data for model ids — image models carry a -preview suffix.

2. Scaffold demos/<id>/

Mirror the reference demo demos/nano-banana-race/ (the cleanest template):

• Own package.json, tsconfig*.json, vite.config.ts, Dockerfile, .env.example, README.md.
• web/ — Vite + vanilla-TS frontend in the Direction A system (light canvas; pillar colors Build=#4285F4 Scale=#34A853 Govern=#EA4335 Optimize=#FBBC04; Sora / Inter / Roboto Mono). Booth-legible, accessible (semantic HTML, focus states, prefers-reduced-motion).
• server/ — thin Node/TS proxy for all model calls (never expose keys in the browser).
• A "Show the code" panel that displays the exact @google/genai call the server runs.

A demo may use a different stack if the capability demands it — but keep the look consistent and keep the model call server-side.

3. Mock + live modes (required)

• Mock mode must work fully offline (no network) so the booth is reliable — stream placeholders.
• Live mode: primary path is Vertex AI on the Agent Platform (GOOGLE_GENAI_USE_VERTEXAI=true + GOOGLE_CLOUD_PROJECT + GOOGLE_CLOUD_LOCATION); GEMINI_API_KEY is the quick-start fallback. Default to mock when no creds are present.
• Any cost/price shown must be a published figure or clearly labeled a configurable estimate.

4. Register it

Add one entry to shell/demos.json:

{ "id": "<id>", "title": "…", "tagline": "…", "claim": "<the big walk-by line>",
  "pillar": "Build|Scale|Govern|Optimize", "tags": ["…"], "model": "<headline model id>",
  "stat": "<quick stat>", "status": "live|coming-soon", "url": "<where it runs>" }

5. Verify before claiming done

npm install && npm run typecheck && npm run build, run it in mock mode, and drive the actual flow in a browser (screenshot it). Only then say it works. Use the verify skill if available.