Decks

Type a topic, pick one of 6 visual themes, and get back a self-contained HTML slide deck - no login, no database, runs entirely locally.

• One-prompt AI generation - describe a topic and Claude (claude-sonnet-4-6 via @anthropic-ai/sdk) returns a strict JSON deck (cover, stack, 3-4 feature slides, checklist, roadmap, summary). The route auto-retries once with a stronger instruction if the model's first reply isn't parseable JSON.
• 6 built-in themes - Minimal, Dark, Neon, Corporate, Playful, Gradient - each is an accent color layered onto one shared light "slides" renderer, picked in the UI before generating.
• Self-contained HTML output - renderDeck() returns one HTML string with inlined CSS and a small vanilla-JS navigator (arrow keys, space, swipe, Cmd/Ctrl+Enter to generate). The client wraps the response in a Blob and opens it in a new tab - the deck never touches a database.
• 11+ slide section types - cover, feature, stack, checklist, roadmap, summary, cards, table, kv, badges, text are exposed to the AI schema; html, diagram, versus, timeline, and stackcards exist in the renderer for hand-authored decks outside the generation flow.
• A second render mode - besides "slides", the same renderer has a dark, GitHub-style "report" mode for scrollable documents, shared with other bunlongheng tools.
• No login, no database - runs open; the deck is generated and streamed back as HTML, never persisted.
• Optional embedded diagrams - a diagram section posts Mermaid source to a companion service at diagrams-bheng.vercel.app (bearer-token authenticated) and embeds the result.

1. User types a topic and picks a theme in the sticker-bomb UI (app/page.tsx), then hits Generate (or Cmd/Ctrl+Enter).
2. POST /api/generate-deck (app/api/generate-deck/route.ts) receives the request - no auth, runs open.
3. The route calls claude-sonnet-4-6 with a system prompt that forces a strict JSON deck schema, pulls the JSON block out of the reply, and retries once if the first attempt doesn't parse.
4. The user's theme choice overwrites mode/theme/accent on the parsed deck, then renderDeck() (lib/deck-gen.ts) turns the JSON into one self-contained HTML string.
5. The HTML comes back as the response body; the browser blobs it and opens it in a new tab.

sequenceDiagram
    participant U as User
    participant UI as app/page.tsx
    participant API as /api/generate-deck
    participant C as Claude API
    U->>UI: topic + theme, click Generate
    UI->>API: POST { topic, theme }
    API->>C: system prompt (forced JSON schema) + topic
    C-->>API: JSON deck (retry once if unparsable)
    API->>API: renderDeck() -> self-contained HTML string
    API-->>UI: text/html response
    UI->>U: Blob URL opened in new tab

git clone https://github.com/bunlongheng/decks.git
cd decks
npm install
cp .env.local.example .env.local   # fill in the values below
npm run dev

Open http://localhost:3010. Generation works with just ANTHROPIC_API_KEY set.

MIT (c) Bunlong Heng