DEV Community

Cover image for I built a "Local Second Brain" for my AI chats in a single HTML file (No Docker, No DB)
Martin Temponi
Martin Temponi

Posted on

I built a "Local Second Brain" for my AI chats in a single HTML file (No Docker, No DB)

#showdev #opensource #productivity #javascript

I use Gemini, ChatGPT, and Claude daily for coding, business planning, and creative writing. But I ran into a massive problem: managing the chaos.

I kept losing context. My best prompts were buried under a pile of "Untitled Chats". I tried Notion and Obsidian, but they felt too heavy just to save a few links. I didn't want a subscription service, and I certainly didn't want to spin up a Docker container just to organize my bookmarks.

So, I built my own solution.

Introducing: AI Knowledge Hub 🧠

It is a Kanban-style dashboard contained entirely in one HTML file.

The "Why" (The Philosophy)

I wanted something that adhered to the Local-First principles:

  1. Zero Install: Just download index.html and open it.
  2. Privacy: Data lives in localStorage. Nothing leaves your machine.
  3. Portability: The app is the file.
  4. Agnostic: Works with links from Gemini, ChatGPT, Claude, Perplexity, or local files.

Under the Hood (The Tech) πŸ› οΈ

I wanted to keep the codebase as simple as possible so anyone could audit or modify it.

  • HTML5 & Vanilla JS: No React, No Vue, No Build steps.
  • Tailwind CSS (via CDN): For rapid styling without npm install.
  • Phosphor Icons: For a clean UI.
  • Data Persistence: Uses the browser's localStorage to save your boards and cards.

Here is a snippet of how simple the storage logic is. No databases, just JSON strings:

// Saving data
function saveData() {
    const data = {
        columns: columns,
        theme: currentTheme,
        version: "46.1"
    };
    localStorage.setItem('geminiHubData', JSON.stringify(data));
}
Enter fullscreen mode Exit fullscreen mode

Key Features (v46)
πŸŒ‘ Native Dark Mode: Essential for late-night coding.

🏷️ Smart Tags: Filter your chaos by #python, #ideas, or #work.

πŸ’Ύ Backup & Restore: You can export your entire board to a JSON file to move it between computers.

πŸ›‘οΈ Rescue Mode: Detects if data is corrupted and offers a safe reset.

"Wait, isn't this AI generated?" πŸ€–
I believe in transparency. Yes, I used Google Gemini to help write the boilerplate code and CSS structure (because who remembers every Tailwind class?).

However, the architecture, the logic for data sanitization, and the specific "Local-First" design decisions were manually crafted to solve my specific workflow problem. It's a tool by a human, assisted by AI, for everyone.

Try it yourself
It's MIT Licensed (Open Source). You can grab the HTML file from the repo below.

πŸ‘‰ View on GitHub: https://github.com/MartinSantosT/gemini-chat-organizer-hub

I'd love to hear your feedback! Does anyone else suffer from "AI Chat Clutter"?

Top comments (0)