Flashcards from Notes
Turn study notes into up to 12 flip cards with generateObject, then export the deck as JSON.
Run this experiment yourself
Demos are not embedded on this site. Deploy a standalone copy on Vercel or run the experiment app locally.
Local development
cd apps/experiments/flashcards-from-notes pnpm install pnpm dev
Then open http://localhost:3010.
This is an experimental demo. Use it as a starting point for your own projects.
Flashcards from Notes converts a notes textarea into up to 12 { front, back } cards via generateObject. The UI flips cards on click and can export the deck as JSON. clampCards trims and caps the array. No AI keys - 503.
Features
- Notes - cards – max 12 flashcards from capped notes (~10k chars).
- Flip UI – tap a card to toggle front/back.
- Export JSON – download
{ cards: [...] }. - Sample notes – Cache-Control / ISR / Suspense snippet.
- Honest unavailable state.
Server Reference
POST /api/flashcards
{ "notes": "..." }Success (200)
{
"cards": [
{ "front": "What is stale-while-revalidate?", "back": "Serve stale while revalidating in the background." }
],
"provider": "ai-gateway"
}| Status | Cause |
|---|---|
503 | No AI provider |
400 | Empty notes |
Implementation Details
Truncate notes
truncateText(notes, MAX_NOTES_CHARS).
generateObject + clamp
Zod schema allows at most MAX_CARDS (12). clampCards trims whitespace and enforces the cap again.
Use Cases
- Study decks from meeting notes or docs.
- Teach fixed-max array schemas with
generateObject. - Exportable flashcard JSON for other apps.
Limitations
- Card quality depends on note clarity.
- No spaced-repetition scheduling.
- No auth / rate limits.
Use in your project
Copy the flashcards Route Handler and flip UI pattern from demo.tsx. Persist decks to Blob or Postgres as needed.
Deployment
Local Development
cd apps/experiments/flashcards-from-notes
pnpm install
pnpm devConfiguration
| Variable | Required | Purpose |
|---|---|---|
AI_GATEWAY_API_KEY | Yes (or OPENAI_API_KEY) | Preferred provider |
OPENAI_API_KEY | No | Fallback |
AI_MODEL | No | Model override |
Vercel / Next.js Features Used
- AI SDK
generateObject - Vercel AI Gateway
- Route Handlers
- Zod