Kinroster: groceries, chores and dinners for a family

Kinroster: groceries, chores and dinners for a family

00 Markdown

Grocery lists sorted by aisle, chores with a weekly points tally, and a dinner plan that fills the list, live on every phone.

Agent specs

Agent
Claude Code, Opus 5.5 Medium
Time
16 min
Cost
$5.30*

Agents work faster and more accurately on Elements.

* Cost at API rates, September 2026.

Run it yourself

Paste this prompt into your AI agent. You get the finished app on your own machine, ready to change however you like.

Agent Chat
Install elements:
curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH

Create an Elements app from the elementscode/demo-kinroster scaffold:
cd ~/elements/projects
elements create kinroster -scaffold=elementscode/demo-kinroster
cd kinroster

Start the app.

Need an AI agent?

In AI desktop apps, paste into the Code tab, not the general chat.

How it's built

Kinroster needed lists, chores and a meal plan that every phone in the house sees change at once, a household that stays private to its members, and invitations by email. Each of those is a part of Elements, so the agent spent its 16 minutes on the family organizer itself.

What Elements gave the app

  • Live data on every phone. Grocery lists and items, chores, completed chores, meals and invites are LiveTables the pages write to directly. An item checked off in the store shows as checked on every other phone the moment it is tapped, and each phone hears only the list it has open.
  • One household per family. Every write passes one session guard, so each family reads and writes only its own lists, chores and meals.
  • Chores and points. Marking a chore done records the points it was worth at that moment, so the weekly tally stays fair when someone changes a chore later.
  • Invites by email. Adding an invite checks the address and emails a join link, and signing up through it puts the new member in the household.
  • A meal to the list in one tap. An @rpc server function reads a dinner's ingredients, guesses each aisle, skips anything already on the list and adds the rest through the live list, so every phone on it sees the items land.
  • Data from SQL files. Migrations define the household and seed the Parks: four logins, two grocery lists, ten chores with about ten days of history, six dinners this week and a pending invite, all dated from the day the seed runs.

What the project server gave the agent

The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.

What shipped

The app type-checks with zero errors and all 28 tests pass. Every page works on desktop and phone.

The code

Build it from scratch

To watch your agent build this app from an empty project, use the prompt we used instead. It takes longer than starting from the finished app above.

Agent Chat
Install elements:
curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH

Create an Elements app:
cd ~/elements/projects
elements create kinroster
cd kinroster

Start the app, then build this:

Build a household organizer named kinroster for a family.

- Sign up and create a household, invite family members by email.
- Shared grocery lists: add items with a quantity, check them off in the
  store, items grouped by aisle (produce, dairy, pantry...).
- Chores: recurring tasks (daily, weekly) assigned to someone, marked done,
  with a weekly points tally.
- Meal plan: a week grid of dinners, and add a meal's ingredients to the
  grocery list in one tap.

Seed one household of four with two grocery lists, a chore chart with a week of
history, and a meal plan. Show the seeded logins on the sign-in page.

Lists, chores and the meal plan update in real time on every phone.

The weekly digest

New lessons, demos and posts from elements.dev, in one email a week.

Comments· 0