Keepsake

A living family timeline written by an elder, her family, and their agent. Grandma tells a story; it becomes a card; the family asks the next question.

Comment

What it is

Rose is 84. She tells stories the way people do: out of order, with the best details buried in the middle. Keepsake listens. Her agent turns each story into a memory card on a shared timeline, links the people in it, picks a picture, and queues the question the family should ask her next time. Her granddaughter Maya reads the timeline, fixes a title by hand, asks "what was Grandpa like when they first met?", and the agent answers from Rose's own words and scrolls to the card.

Live: https://keepsake-timeline.vercel.app · Code: https://github.com/chinesepowered/keepsake-timeline

Why this is a strong fit for WebMCP

A memory book only works if the agent can write into the same book the family reads. Keepsake exposes the timeline as eleven structured tools registered with document.modelContext.registerTool:

get_timeline, search_memories, add_memory, update_memory, remove_memory, add_person, link_people, add_question, mark_question_answered, focus_memory, export_book

Any WebMCP-capable agent, whether ChatGPT's in-app browser, Chrome with WebMCP enabled, or the built-in listener, edits exactly what is on screen. The tool descriptions carry the editorial rules: keep the teller's words, first person if Rose told it, never invent facts, split a story that spans two events into two cards, queue a question when a thread is left hanging.

How it creates a better experience

  • For the elder: just talk. Voice or text, no forms, no dates to look up. The agent asks at most one gentle follow-up.
  • For the family: a timeline you can read in a minute and edit in a second (double-click a title, remove a card), with a running list of "ask Rose next time" prompts that the agent keeps topped up.
  • Shared attention: focus_memory scrolls to and lights up the card the agent is quoting, so a question about the past ends with both of you looking at the same memory.
  • Portable: export_book returns the timeline as a Markdown book by decade.

What people and agents can do together that was hard before

Before: a recording nobody transcribes, or a family member typing while Grandma waits, or a chatbot that produces a paragraph and forgets it. Now: the story goes straight into a structured, shared, editable timeline, in her words, with the loose threads turned into questions. The elder supplies the memories, the agent supplies the structure, the family supplies the judgment. Nothing is lost between visits.

How WebMCP is implemented

  • lib/webmcp.ts: tools are registered with document.modelContext.registerTool(..., { signal }) and unregistered via AbortController on unmount. Native browser-agent calls and in-page agent calls share one execute path and one activity log.
  • lib/tools.ts: the eleven tools with JSON Schema inputs, descriptions, and read-only / destructive annotations.
  • lib/memories.ts: the shared store (memories, people, questions, focus). The UI's inline edits and the tools mutate the same state.
  • components/AgentPanel.tsx + app/api/agent/route.ts: a Gemini function-calling loop that discovers the registered tools and dispatches through WebMCP, with Web Speech API for voice and a model fallback chain for free-tier limits.

Tested in Chrome 153 with chrome://flags/#enable-webmcp-testing (DevTools → Application → WebMCP lists all eleven tools) and with the in-page Gemini agent.

Stack

Next.js 16 · Tailwind 4 · Web Speech API · Gemini function calling · WebMCP · Vercel

Built With

Share this project:

Updates

Submission history