| 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.
