A planning app for a real British afternoon tea for seven, with a 3D table, sandwich recipes, a drinks table and a day-by-day plan, built while Pasha and Olga planned the party out loud. Built by Pasha and Claude in 1 hour 27 minutes, 100% by voice: no code or commands entered by keyboard.
The source for this episode is on GitHub: Semantic-Works-LLC/semantic-works-public
The finished app runs live on the next slide, inside this presentation. Nothing to install, nothing to configure.
Play with it live View the source code on GitHub
You can also see the source code of everything presented here, and how the application runs.
Press ▶ below to play with it. After that, ▶ continues with the story.
This is the app as it stood at the end of the conversation, running right now. Close this window, then interact with it:
When you are done, press ▶ below to see how it was built.
ClosePasha and Olga were hosting a British afternoon tea for seven, and Olga would be doing the cooking. Pasha asked for an empty page first, to watch while he talked:
New project. Start a local Python server and build an HTML page that says "Hello, World!" and "Hello, Olga!". I'll just watch that page and talk to you, so push all your changes to the page.Pasha, to Claude
Then he began describing the party:
I'll narrate the facts of our tea party for seven people, all girls, and as I do, draw a picture of the table with everything we discuss. … Start with the table and the two tea containers; I'll be watching the page.Pasha, to Claude, lightly trimmed
There was no specification and no mockup. The app grew one spoken request at a time, while the decisions about food, tableware and timing were still being made.
Many of Pasha's requests were questions about the party itself: which bread, which spread for the roast beef, where to buy clotted cream in Tampa. Each answer went onto the page as a decision, a recipe or a shopping item. Looking back, the build had seven phases.
From the first description, Claude drew the table from above with a teacup at each place and the two glass teapots in the middle, and kept a running list beside it: guests, teaware, teas, and a first shopping list.
Correction: three seats on each long side and one at the head.Pasha, to Claude
Food was the worry: Olga had no helpers and had to make everything. Pasha listed the sandwiches they were sure of, asked what goes with roast beef, and asked for views.
View 2, food: only the sandwiches, each shown open and assembled; better, draw them on a plate I can rotate with the mouse.Pasha, to Claude
When I see a sandwich, I can click it and it flips like a card: brief cooking instructions, garnishes included, on the back.Pasha, to Claude
Lay out plates, cups, knives and forks the way they do in Britain … Draw it in 3D, like the sandwiches, so I can turn and zoom the whole table.Pasha, to Claude, lightly trimmed
Pasha told Claude what they had already bought, and the table was laid out again to match.
Animate the 3D table, slowly, like the sandwich plate turns, and only from attractive angles: never under the table.Pasha, to Claude
Put the screenshots in a subfolder called screenshots, numbered 1 to n, with a timeline saying when each was made, so I can map them to the transcript.Pasha, to Claude
Background colours: Drinks and Plan have a white main view, but Table and Food are cream. …Pasha, to Claude, lightly trimmed
Let's animate the Drinks view and make it 3D.Pasha, to Claude
The chairs at the table: the back comes up to table height, and it's curved.Pasha, to Claude
The chairs were redrawn with a low curved back, level with the table top. The last request was a question about the sandwiches, answered on the page: cream cheese on both slices, edge to edge, to keep the bread dry.
One page with four views, each with its own side panel. Deployed as one HTML page and one script, with three.js for the 3D and a small Python server for live reload and screenshots. Built by Pasha by voice: no code or commands entered by keyboard.
Counted from the session's own log: 60 million tokens across 225 requests to the model, all Claude Opus 5.5, from Pasha's first message to the end of the transcript.
| Kind | Tokens | What it is |
|---|---|---|
| Re-read from cache | 59,372,879 | The conversation so far, read again on every request. This is 99.0% of the total and is billed at a small fraction of the normal rate. |
| New input | 332,150 | Text entering the conversation for the first time: Pasha's messages, tool results, files and screenshots (450 plain, 331,700 written to the cache). |
| Output | 273,309 | Everything Claude wrote: answers, code, commands and its working notes. |
| Total | 59,978,338 |
The total is large because of how a long conversation works, not because much was written. Each of the 225 requests re-reads everything before it, so the same text is counted again and again: on average about 264,000 tokens of history per request. Not included: the work after the transcript closes, such as writing this journey.
Other statistics
About $20 on Claude Opus 5.5, the model that ran the session. The same token counts priced on another model:
| Model | Rough cost | Notes |
|---|---|---|
| Claude Opus 5.5 | about $20.00 | What we used: $11.87 for cache re-reads, $2.66 for new input, $5.47 for output. |
| Claude Sonnet 5.5 | about $15.90 | The same token counts at Sonnet's prices. Its cache-read price is the same as Opus, so the saving is small. |
Caching is what keeps this small. With no caching, every re-read would be billed as fresh input: about $244 on Opus 5.5.
The conversation that built the page, with Pasha's requests as understood, is in TRANSCRIPT.md; the 115 screenshots and their timeline are in screenshots/.
You are here.
This is the only episode of Tea Time Planner so far. Nothing more is planned yet.
What was left open points to one possible next step: the plan in use on the day, shared between Olga's phone and Pasha's, with what to change for the next party. It is potential, not promised.
There is more from Semantic Works to explore.
Happy vibe coding with LLM AI!
Click the picture for twice the size · move the mouse to look around · Escape to close