CompletedTypeScriptReactTailwind CSS+3 more
AI Wrapped
Turn your year of AI conversations into a Spotify Wrapped–style recap with privacy-first, in-browser analysis.
Timeline
2 weeks
Role
Full Stack
Team
Solo
Status
CompletedTechnology Stack
TypeScript
React
Tailwind CSS
Shadcn UI
Client-side parsing
Local data viz
Key Challenges
- Parsing large conversation.json exports reliably in-browser
- Designing stat cards that stay readable across dense themes
- Keeping all processing local while avoiding performance spikes
- Creating a shareable, Spotify Wrapped-inspired visual style
Key Learnings
- Optimized client-only data pipelines for sizable JSON inputs
- Built UX that communicates privacy guarantees clearly
- Iterated on typography and color to keep dense insights legible
- Refined card layouts to balance storytelling with scannability
AI Wrapped: Your AI Conversations, Wrapped
Overview
AI Wrapped turns a year of ChatGPT conversations into a clear, Wrapped-style recap. Upload your conversation.json, and the app instantly generates polished stat cards that surface your top themes, ideas, patterns, and how you used AI across the year. Everything runs locally in the browser—no servers, no uploads, no storage.
What Users Can Do
- Drop in conversation exports: Load your
conversation.jsonwith drag-and-drop or file picker. - See Wrapped-style stat cards: Auto-generated highlights for themes, topics, sentiment drift, and usage streaks.
- Spot patterns fast: Surface recurring ideas, project types, and collaboration patterns from your chats.
- Shareable visuals: Styled, print-ready cards you can export for posts or portfolios.
Why I Built This
Spotify Wrapped makes music habits obvious; AI usage should feel just as tangible. I wanted a recap that shows how AI shaped learning, creativity, and problem-solving—without sending private chats to a server.
Privacy and Performance
- Fully local: parsing, aggregation, and rendering all happen in-browser.
- Zero uploads: no servers involved; data never leaves the device.
- Progressive parsing to avoid jank on large exports.
- Clear privacy messaging embedded in the UI so users know their data stays put.
Product Flow
- Upload
conversation.jsonfrom ChatGPT data export. - Client-side parser groups messages by topic, intent, and time.
- Stats engine builds cards for top themes, formats, streaks, and standout threads.
- Wrapped-style layout renders responsive cards with gradients and iconography.
Tech Stack
- React, TypeScript
- Tailwind CSS + Shadcn UI for layout, forms, and cards
- Client-side parsing and memoized aggregations for large JSON
- Lightweight data viz components for streaks and theme distribution
Impact (early usage)
- Clearer self-reflection on how AI was used over the year.
- Faster sharing of insights in a Wrapped-like, social-ready format.
- Confidence for privacy-sensitive users because everything stays local.
Future Plans
- Integrate multiple image and multimodal models (Claude, Gemini, GPT-4o) for richer summaries.
- Deeper topic modeling for long-running threads.
- Optional local-only comparison across multiple exports.