Family Tree
Open demo
Tree View
Member Cards
AI Agent
Relationships
List View
Member Form
Chat Tools
All
Male
Female
Tree
List
Chip Filters
useSyncExternalStore
No external deps
Reactive Store
Delete & Edit
Tree View
Member Cards
AI Agent
Relationships
List View
Member Form
Chat Tools
All
Male
Female
Tree
List
Chip Filters
useSyncExternalStore
No external deps
Reactive Store
Delete & Edit

v0 Starter Kit

A full-stack family tree app you can fork and extend.

Ships with a 4-generation data model, tree + list views, member CRUD, an AI chat agent with five live tools, and a zero-dependency reactive store. Clone it, add your family, deploy.

What's included

Tree View

Multi-generation tree rendered with recursive TreeNode components. Roots with spouses are co-located; children cascade down. Supports search highlighting.

List View

Alternative flat view of all members with gender chip filters. Each card links to the member detail panel. Toggle between tree and list from the filter bar.

AI Chat Agent

Floating chat panel wired to AI SDK 6 + Vercel AI Gateway. Five client-side tools: addFamilyMember, updateFamilyMember, deleteFamilyMember, setRelationship, listFamilyMembers.

Reactive Store

Zero-dependency state via useSyncExternalStore in lib/family-store.ts. Exports addMember, updateMember, deleteMember, and relationship helpers. No Redux or Zustand needed.

Member Form

Add or edit any member: name, gender, birth/death year, bio, parents, and spouses. Dropdown selects pull from live store data. Bidirectional spouse linking on save.

Relationship Model

Each FamilyMember holds parentIds[] and spouseIds[]. Helper functions getChildren, getParents, getSpouses, getSiblings derive all relationships on the fly.

Chip Filters

Gender filter chips (All / Male / Female) and Tree/List toggle in the filter bar. Single selected chip click deselects and reverts to "all". Stateless, no URL params.

Delete with Cascade

Removing a member cascades: their ID is purged from all parentIds and spouseIds across the store. Confirm dialog prevents accidental deletions.

Chat Tool Calls

The /api/chat route uses streamText with five Zod-validated tools. All tool execution runs client-side via onToolCall — the server never touches the store.

Backlog

What it doesn't do yet, but is on the roadmap.

Database persistence

Swap the in-memory store for Supabase or Neon so data survives a refresh.

Auth + multi-user

Login flow so different family members can each edit from their own device.

Photo uploads

Profile photos per member via Vercel Blob or S3, replacing the initial avatars.

Import / export

GEDCOM file import and JSON export so you can bring in existing genealogy data.

Timeline view

Horizontal timeline that plots members by birth year for a chronological perspective.

Relationship search

Type two names to see the path between them (e.g. "second cousin once removed").

Print-ready tree

Export the tree view as a high-res SVG or PDF for printing and framing.

Dark mode

Full dark theme toggle using the existing dark design tokens in globals.css.

Tech Stack

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uiAI SDK 6Vercel AI GatewayLora + Playfair DisplayZodLucide React