DEV Community

Cover image for A family tree you build by telling stories
Dang Tran
Dang Tran

Posted on Edited on

A family tree you build by telling stories

Hacktoberfest Open-Source AI Challenge: Ghost in the Machine Submission πŸ‘»πŸŒΌ

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

For DΓ­a de los Muertos, we don't remember people by filling in a form. We remember them by telling stories: who they were, who they loved, what they cooked, where they came from.
That's what I wanted this app to feel like. Not a genealogy database. Something closer to an ofrenda β€” names, plus memories.

It's a family tree you build mostly by chatting. You talk naturally, one fact at a time or a few at once, and the app turns what you said into proposal cards. Nothing goes into the tree until you press "Add to tree". That's deliberate.

Once you accept, the tree renders: parents, spouses, children, siblings, and labels relative to you β€” "Mother", "Sister-in-law", and so on. You can drag cards around, pan and zoom the canvas, open a person to edit their details and story, upload an avatar, and add relatives from there.

A family tree isn't really about names on cards β€” it's for telling a family's stories. So a person in this app has more than a name: a story and details you can edit, an avatar, and photos that show them in a moment, not just a label. That means the app also has:
Photo galleries for the family and for each person. One photo can be tagged with several people, so a wedding photo shows up on everyone's page. The family gallery has a slideshow, with captions, years, and tagged names.

JSON export and import, so you can save your tree as a file and load it back.

Add-relative suggestions as you type β€” accent-insensitive, so "Dang" finds "Đăng" β€” that link to a person already in the tree instead of creating a duplicate. It also hides anyone who would become their own ancestor, or give a child more than two parents.
Honestly, this is still an MVP. Your tree lives in your browser (localStorage, with photos in IndexedDB), not in a shared database. There are no accounts or sharing yet. The layout started as a simple generation layout and grew into a draggable canvas, but it's not React Flow yet.

Demo

Try it live: https://family-tree-mvp-sandy.vercel.app/

Try it with this, using Harry Potter as the example:
I'm Harry. My dad is James Potter. He married my mom, Lily Potter.

You'll get proposal cards first β€” Harry, James, Lily, and the links between them. Checked items show up as dashed preview cards in the tree, so you can see what you're about to add, and there's Undo if you change your mind.

Code

Family Tree β€” built by talking

A Hacktoberfest Week 4 MVP: build a family tree mostly through chat conversation, with an interactive tree for details and avatars.

Theme fit: β€œGhost in the Machine” β€” something that honours the past in the spirit of DΓ­a de los Muertos. A tree you build by telling stories is closer to an ofrenda than a genealogy database: names plus memories.

How to run

Needs Node.js 20 or newer (Next.js 15 runs on 18.18, but the Vitest test suite needs 20+).

npm install
cp .env.example .env.local
npm run dev
# open http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

For a production build, run npm run build && npm start.

With Ollama (recommended β€” this is the open-AI core of the project)

Install Ollama from https://ollama.com, then pull a model:

ollama pull gemma4:12b   # recommended: the 12B Unified model; needs Ollama v0.30.5+
ollama pull gemma4:e4b   # lighter default (also what
…
Enter fullscreen mode Exit fullscreen mode

How I Built It

The app is Next.js + TypeScript, and the extraction is done by Gemma 4, an open-weight model, through Ollama.

The flow is: chat β†’ proposals β†’ confirmation β†’ tree. Each reply comes back as a friendly summary plus structured proposals, and only the proposals you check are added to the tree.

One rule I gave the app: only extract what was actually said. Don't invent a date. Don't merge two people just because they share a name. And if something is ambiguous β€” "my grandma", with no side given β€” ask, don't guess.

That rule matters most on the second message. A family tree isn't built in one message, it's built over a conversation. So each new message is sent with the tree you already have: the people, their relationships, the recent chat, and who the speaker is. That's how "My mom's sister is Petunia" can be resolved against the mom you already told it about, instead of starting fresh every turn. When two people are siblings but their shared parents aren't in the tree yet, the app stores that as a sibling link rather than inventing parents to force it.

Run it locally, and Ollama runs on localhost β€” the model can be swapped for another open model, and the extraction stays on your machine. The live demo on Vercel can't reach your local Ollama, so it points at Ollama Cloud instead β€” the same open models, through the same API. If Ollama isn't reachable at all, the app falls back to a small deterministic parser so the demo still works. That fallback is a safety net, not the core β€” the core is the open model.

Why Does Open Innovation Matter?

For something this personal, open matters in a very practical way: the data stays with the family.

With a closed API, your family names, stories, and photos would have to leave your machine to a service you don't control, and the app would stop working the day that service changed its price, its terms, or disappeared. With an open-weight model running through Ollama, you can run it yourself, swap it for another open model, and keep the same app and the same API. Nothing about the tree depends on a single company's permission to keep existing.

That's also why the confirmation step matters: an open model is powerful, but it's still a model. It should propose, and you should decide.

The Spirit of It

Building this made me remember my own family β€” and my ancestors.

It reminded me of one of my favorite movies, Coco. In Coco, a family keeps its ancestors alive by remembering them: their photos on the ofrenda, their stories told again, their names said out loud. The moment that stays with me is the simplest one in the film β€” that people don't really disappear as long as someone still remembers them.

That's what I wanted this tree to be. Not a chart you finish and forget, but a place where a story keeps a person present. A name, a photo, a detail someone told you once β€” each one is a small way of saying, I remember you.

If you try it, tell me the story you'd start with. Mine would start with my parents' kitchen.

Prize Categories

Best Use of Gemma

Top comments (0)