AI Atlas

See how you really use AI, across every tool, without giving away your conversations.

AI Atlas brings ChatGPT, Claude, Gemini, DeepSeek, Kimi and seven more into one privacy-first dashboard, introduced by a scroll-driven WebGL particle universe.

Live demo · Demo dashboard · Quick start · Architecture · Security

Real capture of the landing page. Scroll drives the whole sequence: sphere → orbit → vortex → galaxy.

✨ Why AI Atlas

You probably use three or four AI tools a week. Each one has its own history, its own dashboard and no idea the others exist. Atlas gives you one honest picture.

• 🪐 Every tool in one orbit. ChatGPT, Claude, Gemini, Cursor, GitHub Copilot, Perplexity, DeepSeek, Kimi, Grok, Le Chat, Meta AI and Qwen, side by side with their real logos.
• 🔒 Metadata, not messages. Atlas keeps timestamps, tool, model and category. Your prompts and conversation text are never stored or sent to an outside classifier.
• 🧭 Patterns you can act on. Trends, work categories, your go-to tool and an AI Fingerprint that sums up how you work.
• 🧪 Honest numbers only. Demo data is clearly labelled, missing costs stay missing, and Atlas never invents "time saved".
• ⚡ Try it in seconds. The full demo dashboard and a browser-local workspace need no account and no API key.

🎬 See it in action

▶ The full 36-second walkthrough plays below: landing, globe sequence, provider gallery and dashboard.

https://github.com/user-attachments/assets/efd4acf5-ba0b-4ef3-a5e7-496c11170964

The scroll story

Twelve tools, finally side by side

The dashboard

Built for your phone too

🚀 Quick start

Prerequisites: Node.js 22.13+ and npm.

git clone https://github.com/satiricalguru/Ai-atlas.git
cd Ai-atlas
npm ci
npm run dev

Open http://127.0.0.1:5173, then try:

URL	What you get
/	The landing page and particle universe
/dashboard?mode=demo	The full dashboard with clearly labelled sample data
/dashboard?mode=local	Your own imports, stored only in this browser

[!TIP] Neither the demo nor the local workspace needs an account, a database or an API key. Accounts and syncing switch on once you add the Supabase settings described below.

npm run dev and npm run build use the bundled Vinext runtime, which builds a Cloudflare Worker. npm run start previews that build locally. For the standard Next.js runtime (what Vercel uses):

npm run dev:next
npm run build:next
npx next start

📥 Bring your data

Source	How it gets in
ChatGPT	Upload conversations.json from your data export, or connect an OpenAI organization admin key
Claude	Upload your conversation export JSON, or connect an Anthropic organization admin key
Every other tool	Import normalized CSV or JSON (example below)

provider,timestamp,model,category,tokens,cost,external_id
chatgpt,2026-10-29T10:00:00Z,gpt-4.1,Writing,1250,0.012,example-1
claude,2026-10-29T11:30:00Z,claude-sonnet-4-5,Coding,2400,0.024,example-2
deepseek,2026-10-30T09:00:00Z,deepseek-chat,Research,,,example-3

Supported provider values: chatgpt · claude · gemini · cursor · copilot · perplexity · deepseek · kimi · grok · mistral · meta · qwen · other.

Imports are validated against a schema, deduplicated by source ID, and capped at 5 MB / 2,000 rows per upload.

🧠 How it works

flowchart LR
    subgraph Sources
        A[ChatGPT / Claude exports]
        B[CSV / JSON imports]
        C[OpenAI & Anthropic<br/>admin usage APIs]
    end
    A --> V{Zod validation<br/>+ metadata only}
    B --> V
    C --> I[Inngest durable sync<br/>+ daily sweep]
    I --> S[(API snapshots)]
    V --> L[(Activity ledger)]
    subgraph Supabase
        L
        S
        K[(AES-GCM encrypted<br/>credentials)]
    end
    L --> D[Dashboard<br/>Overview · Insights · Explorer]
    S --> D
    D --> F[AI Fingerprint<br/>+ JSON export]

• Frontend: Next.js App Router, React 19, Tailwind CSS 4, Motion, ECharts and TanStack Table.
• The universe: React Three Fiber with custom GLSL. One ShaderMaterial animates about 26k points (11k on phones) with simplex-noise breathing, cursor repulsion, a scroll-driven vortex and a sphere-to-galaxy morph. Logo chips are projected from 3D each frame. Lenis provides the smooth scrolling.
• Backend: Supabase Auth and PostgreSQL with tenant row-level security, WebCrypto AES-GCM for provider keys, and Inngest for durable syncing.
• Fallbacks: the WebGL scene pauses when off-screen and drops to a static dotted sphere when the browser has reduced motion turned on or no WebGL 2.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗