TreeTree

Inspiration

Family trees are shared documents edited across generations, yet genealogy software still hides them behind forms, menus, and closed APIs.

We built TreeTree around a simpler idea: talk to your family archive. With WebMCP, the webpage itself becomes the agent interface, so humans and agents can explore and edit the same family tree together.

What it does

TreeTree is an open-source, self-hosted family archive built for humans and agents.

Its WebMCP interface exposes 14 tools directly from the page. Ask “How am I related to her?” and TreeTree computes the actual kinship path. Ask “Where did our family come from?” and it derives migration across generations.

More importantly, the agent can operate the live UI you're looking at. It can find a relative and center them on the tree, switch views, open records, add people, connect parents, record marriages, or import a GEDCOM. Every action appears immediately on the shared canvas, with narration and undo.

TreeTree also adapts when an agent is present: redundant chat UI gets out of the way, and what_can_i_do_here lets the page teach the agent how to help the user.

The same intent layer powers TreeTree's built-in AI archivist and a hosted MCP server for remote agents. Reads respect access controls; writes become reviewable proposals with provenance, audit history, and undo.

How we built it

TreeTree runs on Next.js and Cloudflare Workers with D1 + R2, with deterministic GEDCOM import/export.

The main WebMCP challenge was making tools available reliably, including to agents that enumerate them before React hydrates. We register them at document parse, reconnect them at mount, and handle late-injected model-context hosts.

Our Playwright tests inject a model context before any page script and verify the real deployed UI changes: tool registration, creation, navigation, undo, and agent-aware UI behavior.

Challenges

WebMCP forced us to think beyond “give the model an API.”

Agents may arrive before hydration. Agent actions can race React state. Undo must work across both human and agent edits. And the interface has to remain understandable when either one is driving.

Solving those problems turned TreeTree from an AI-enabled website into a genuinely shared human-agent application.

What we learned

A webpage's tools are its language to an agent.

The best tools aren't database CRUD. They're user intents: Who is this person? How are we related? Show me where they are. What can I do here?

Designed that way, WebMCP makes the agent part of the product itself: onboarding, navigator, researcher, and co-author.

What's next

TreeTree already supports creating a family archive through conversation. Next we're bringing richer WebMCP editing to real archives through the proposal/review system and expanding the built-in archivist.

One family tree. Humans and agents working on it together.

MIT licensed and deployable in one command.

Built With

• cloudflare-d1
• cloudflare-r2
• cloudflare-workers
• mcp
• next.js
• openai
• playwright
• react
• remotion
• typescript
• webmcp