ChatGPT Heatmap Web App

A web application to visualize your ChatGPT conversation activity as a calendar heatmap.

Features

• 📅 Upload your exported ChatGPT conversation history (conversations.json)
• 🌎 Select your preferred time zone for accurate date mapping
• 🎨 Responsive, interactive calendar heatmap powered by @nivo/calendar
• 🌗 Light/Dark mode toggle
• 💅 Modern UI built with shadcn/ui and Tailwind CSS
• 🔐 Fully client-side rendering, so no data is shared outside of the application
• ⚡ Fast, type-safe, and easy to use

Getting Started

Prerequisites: Bun (recommended), or Node.js with npm

Clone the repository:

git clone https://github.com/cr2007/chatgpt-heatmap-web.git
cd chatgpt-heatmap-web

# Bun
bun i   # Install Dependencies
bun dev # Start the server

# Node.js
npm i       # Install dependencies
npm run dev # Start the server

Once that is completed, you can access the app by heading to http://localhost:3000 in your browser.

Usage

1. Export your ChatGPT data from chatgpt.com
   1. Profile > Settings > Data controls > Export Data > Confirm export
2. Download and unzip the archive, then upload the conversations.json file
3. Select your time zone
4. View your ChatGPT usage as a calendar heatmap!

Self-Hosting

You can self-host this application using Docker in two ways:

Option 1: Using the Pre-built Image from GitHub Container Registry

# Run the container
docker run -d -p 3000:3000 ghcr.io/cr2007/chatgpt-heatmap-web:latest

You can then access the application at http://localhost:3000

Option 2: Building the Docker Image Locally

# Clone the repository
git clone https://github.com/cr2007/chatgpt-heatmap-web.git
cd chatgpt-heatmap-web

# Build the Docker image
docker build -t chatgpt-heatmap .

# Run the container
docker run -d -p 3000:3000 chatgpt-heatmap

After running the aboce commands, you can access the application at http://localhost:3000.