Mochi
Mochi is a voice-first family app studio.
Core trick
A spoken conversation becomes a runnable React app through a Claude build step, and later edits reuse the saved conversation context.
Description
Mochi is a voice-first family app studio. A child taps a mascot on a TV remote or iPad, has a 30-second conversation with Mochi (asking 2–4 kid-friendly questions in Indonesian or English), and ~60 seconds later a real, playable app appears on the family library — a flashcard quiz about sharks, a tic-tac-toe in their favorite colors, a sticker chart for daily chores. Long-press any tile and the kid can talk to Mochi again to change it ("make the buttons purple", "add a timer") — Mochi remembers the last conversation and tweaks the app instead of starting over.
Three ways in: talk ("make me a counting game"), photograph a printed worksheet (the kid's actual maths sheet becomes a tappable game in a minute), or ask for a printable (Mochi sketches a one-page infographic the kid can print and color). Everything lives in the family library; nothing gets thrown away.
Mochi runs on the family's TV (as a real installable app), on iPads, on phones — same library, same voice, every screen the kid already touches. It's not a chatbot and not a generic "build with AI" tool. It's the thing parents wish existed: their kid asks, and an app that fits their family shows up by dinner.
README excerpt
# Mochi
A family agentic app studio. A family member talks to **Mochi PM** (a voice agent) about what they want — or photographs a printed worksheet — and Mochi spins up a real, runnable web app or a printable infographic. The library on the home screen lists everything anyone has built; tap to open, long-press to modify by talking again.
It is not a chatbot. The output is a real artifact (a React app or a PNG sized for A4) that lives on disk and can be re-opened anytime.
Every Claude call (build, vision, organize, suggest) goes through one of **two backends**, picked by a single env flag — flip it to A/B them against the same UI:
- **`MOCHI_CLAUDE_BACKEND=cli`** *(default)* — invokes the local `claude` CLI (`claude --print` for builds, `claude --print --json-schema …` for one-shots). Auth comes from your claude code login. No API key needed.
- **`MOCHI_CLAUDE_BACKEND=api`** — uses `@anthropic-ai/claude-agent-sdk`'s `query()` for the agentic build path and `@anthropic-ai/sdk`'s Messages API for the simple structured-output calls. Requires `ANTHROPIC_API_KEY`.
Both backends produce the same `Stream<ClaudeStreamEvent>` shape downstream, so `Jobs.ts` doesn't branch on which is active.
```
┌─────────────────────────────────┐
"make me a │ Claude — agent build │ apps/<id>/index.tsx + manifest.json
snake game" ──► │ cli : claude --print … │ ───► bundled to bundle.js + bundle.css
(via PM agent) │