Decks

AI slide-deck generator - topic in, polished HTML deck out.

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.

Features

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

How it works

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

Loading

Tech stack

Layer	Technology
Framework	Next.js 15 (App Router), React 19, TypeScript
Styling	Tailwind CSS
AI	Claude API (@anthropic-ai/sdk), model claude-sonnet-4-6
Diagrams	diagrams-bheng.vercel.app companion service (bearer-token, optional)
Hosting	Vercel (installs with Bun, builds with next build)
Testing	Vitest (unit) + Playwright (E2E)

Getting started

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.

Command	Description
npm run dev	Start dev server on port 3010
npm run build	Production build
npm run start	Start production server on port 3010
npm run prod	Build + start, bound to 0.0.0.0
npm run lint	Next.js lint
npm run test	Run Vitest unit tests
npm run test:e2e	Run Playwright E2E tests

Environment variables

Variable	Purpose
ANTHROPIC_API_KEY	Claude API key for deck generation
AI_API_SECRET	Bearer token for the diagrams-bheng service

---

Built by Bunlong  ·  more apps