Field GuideForge

Describe a workout. Get a playable card.

Type "push day, 4 exercises, supersets, 90-second rest" and Forge hands back a playable card — set trackers that count your reps, a rest timer that counts down, the whole thing tickable on your phone. The trick isn't that the AI "built an app." It's that the model filled a schema and your components rendered it. That pattern — LLM → structured, playable UI — is the most useful thing I learned this year. It's yours: clone it.

the scene the real trick the card schema how you force it build your own clone it

01 · the scene

Plain English in, playable card out

you: push day — bench, overhead press, dips, lateral raises. 4 sets each, 90s rest.

↓ streams back ↓

🏋️ Push Day

set_tracker — Bench 4×, Overhead Press 4×, Dips 4×, Lateral Raise 4× · rest 90s

timer — 90s rest countdown between sets

counter — total sets completed: 0 / 16

That card isn't a picture or a paragraph — it's interactive. Tap a set, it logs. Finish a set, the rest timer fires. It plays like an app, because it is one — assembled on the fly from your sentence.

02 · the real trick

The model doesn't build UI. It fills a schema.

The instinct is to imagine the AI "writing an app." It isn't, and it shouldn't — asking a model to emit working UI code live is slow, fragile, and unsafe. Forge does the opposite and it's the whole lesson:

You define a fixed set of UI blocks ahead of time — a timer, a set-tracker, a checklist — each a real React component you wrote and trust.
The model's only job is to output JSON that says which blocks, in what order, with what values. It's filling a form, not writing a program.
Your app renders that JSON into the components. The AI never touches your UI code — it just arranges known pieces.

That's the pattern worth stealing: LLM → structured data → your trusted components. It's how you get generative, personalized, playable interfaces without ever letting a model run arbitrary UI. Workouts today; tomorrow it's recipes, lesson plans, checklists, dashboards — any "describe it and get a usable thing" product is this exact shape.

03 · the card schema

Six blocks the model can arrange

The entire vocabulary is one TypeScript union — CardBlock. The model can only ever emit one of these six, so its output is always something your app knows how to render:

set_tracker

Exercises × sets, logs weight/reps, fires a rest timer between sets.

timer

Countdown or count-up with a label. Rests, holds, intervals.

counter

A tally toward a target — rounds, laps, total sets.

checklist

Tickable items — warm-up, mobility, a circuit.

accordion

Collapsible steps (done/active/upcoming) that can nest more blocks.

static_text

A coaching note or quote — the non-interactive beat.

A whole card is just a title, an icon, and either a front set of blocks or a multi-step routine. That's it — the full contract is ~100 lines, and it's the download at the bottom. The discriminated union is doing the heavy lifting: a type field on every block means one render switch handles all of them, and adding a 7th block is one new component + one union member.

04 · how you force it

Make the model return JSON, not prose

The one reliability move: don't ask the model to "reply with JSON" and hope. Give it a tool whose input schema is the card, and let the SDK force a valid tool call. The model literally cannot hand you a malformed card — the schema is the guardrail.

Define one tool (e.g. build_workout_card) whose parameters mirror WorkoutCardJSON.
The model "calls" it with the card as arguments — you get typed, validated structure, not a paragraph you have to parse.
Your route hands that JSON to the player; the player maps each block's type to its component. Done.

Same idea as the sentinel-string trick in the Wanda guide, one level up: there you watched for a magic string to signal state; here the tool schema forces structure. Both are ways to make a chatty model behave like an API.

05 · build your own

Point it at anything — just describe it

Workouts are one instance of the pattern. Hand the brief below to Claude Code and swap the domain: recipes with step timers, a study plan with checklists, an onboarding flow. The engine is identical; only the block set changes.

06 · clone it

The whole thing is yours

Forge's core is open source (MIT) — the schema, the tool, the generate route, and all six block components, wired into a working chat-to-card app. Bring your own key, run your own copy. Below is the schema itself — the ~100 lines the whole trick rests on.

★ forge-oss on GitHub (MIT)

Clone → npm install → drop your own Anthropic key in .env.local → npm run dev. Bring-your-own-key, no hosted service, all yours.