ML engineer · Coframe · San Francisco

Jonathan Gu

I build the machine learning that decides what you see next.

Recommendations, search and feeds at Coframe, end to end. Father of two.

Unwritten Stars: a glowing ship ringed by light on a starlit road through a hollow world

The game · Five minutes, one song

Unwritten Stars

A five-minute action game set to one song. Run the road before the Blight eats it.

Play Unwritten Stars
Everest outside in a blue fleece, holding a long branch in one hand and a toy truck in the other Found the best stick Maggie sitting on the rug in a knitted sweater, holding a blue stacking ring Rings, in order, eventually Everest and Maggie riding together in a green grocery cart in front of a wall of fruit Saturday groceries Jonathan with his wife and their two kids on vacation, all four smiling The four of us
Live recommenderYour shelf
  1. 01Recommendation rails
  2. 02Search
  3. 03Feeds & grids

Cold start: Jonathan’s picks. Press anything and it re-ranks.

Ask the page

Turn on JavaScript and these buttons do real things.

Side A · Three songs

Songs for my family

Up first Bus Stop Confetti

Game night

Priced In

Guess the number. Price the room.

Play Priced In

Work at Coframe

  • ML personalization Recommendations, search and ranking on live storefronts.
  • The serving platform Every use case is configuration, not code.
  • The agent team A fleet of AI agents builds. People decide.

More asks

Ask a figureJump to a drawing

Show me rails Search for something Reorder the grid Run the factory Run an A/B test Start the engine Flip a surface Run the fleet Play the arcade Ride the bike Race the boats Sound the siren Read a bedtime story Sing Five Little Ducks Make pancakes Check the mail

01 — The shelf

Your shelf

A real recommender, running in this tab. Every drawing on this page sits somewhere in five topics. Play with one and the shelf updates what you seem to like, scores everything against it, keeps rows from turning into an echo chamber, saves one slot for exploring, and reorders itself. It learns only from what you deliberately open or play. Nothing is stored and nothing leaves your browser.

Fig. 01The capsule recommenderTurn the crank for your top pick. Open it, and the queue re-sorts.
Hand-inked drawing of a capsule machine holding one capsule for each of the twelve things on this page, queued on a spiral track

Cold start: these are Jonathan’s picks.

  1. 01Recommendation railsRails that rank themselves.Jonathan’s pick
  2. 02SearchWords in. The right products out.Jonathan’s pick
  3. 03Feeds & gridsEvery grid, ordered for one person.Jonathan’s pick
  4. 04The ML factoryRaw events in. Live models out.Jonathan’s pick
  5. 05Head to headLive shoppers decide.Jonathan’s pick
  6. 06The experiment engineEvery experiment feeds the next.Jonathan’s pick
  7. 07“I do it”From “help me” to “I do it.”Jonathan’s pick
  8. 08Little boat, fat boatThe little boat is Maggie.Jonathan’s pick
  9. 09Anything with wheelsIf it rolls, it gets studied.Jonathan’s pick
  10. 10Five books at bedtimeFive is the largest reasonable number.Jonathan’s pick
  11. 11Two languagesFive little ducks, in Mandarin.Jonathan’s pick
  12. 12Saturday pancakesHe mixes. She eats the cheese.Jonathan’s pick

Same loop. Different scale.

On this pageAt Coframe
What gets rankedTwelve drawingsLive product catalogs
What it learns fromThe drawings you open and playReal shopper behavior, from the first visit
The modelA Dirichlet over five topicsLearned embeddings and rankers
How it stays freshUpdates after every openUpdates after the next product view and retrains on schedule
Where it runsYour browser, in a fraction of a millisecondA production ML API, fast enough to add no visible wait
How we know it worksYou watch it moveEvery model ships as an A/B test against what was already there

Coframe uses AI to optimize and personalize websites. I run two connected programs there. The first puts machine learning on client storefronts: recommendation and ranking models for product pages, carts, search and first visits, each one an experiment against the store’s own page. The second is the platform those models move onto, where every client’s use case is configuration instead of custom code. I build both with a fleet of AI agents, and people make the decisions. Each machine below runs the real idea. Press its buttons.

Fig. 02

Recommendation rails

Rails that rank themselves.

Hand-inked drawing of a toy train whose cars carry products in ranked order, wired to a signal box marked MODEL

“You may also like.” “Complete the look.” “Recommended for you.” Rails that personalize from a shopper’s first visit and update after their next product view. Each purpose gets its own model (explore, substitutes, complements), and what a shopper viewed or bought is an input to the model, never a pin or a filter.

Fig. 03

Words in. The right products out.

Models that rerank results by what a shopper means, trained on how people actually search and click across many stores.

Fig. 04

Feeds & grids

Every grid, ordered for one person.

Hand-inked drawing of a three by three cubby shelf of product cards beside a taste meter

Collection pages and homepages ordered for each visitor. One product view and the grid reorders toward their taste.

Fig. 05

The ML factory

Raw events in. Live models out.

Hand-inked drawing of a little factory line: a glass tube of shopper events, a hopper, a grinder, an oven and a press that stamps the model

Events, features, training, evaluation, publishing and serving in one place. Every model trains on the goal of the experiment it serves, usually revenue per session. A client’s full ML stack is a routine launch, and models retrain on schedule.

Fig. 06

Head to head

Live shoppers decide.

Hand-inked drawing of two little shops, A for the old way and B for the new model, with a splitter sending shoppers to each and scoreboards on the roofs

Every model ships as an experiment against what was already on the page, including established personalization vendors in their own slots. A new model replaces an old one only when it at least ties it, a gain inside the noise doesn’t count, and a model has to beat the best simple rule.

Fig. 07

The experiment engine

Every experiment feeds the next.

Hand-inked figure: the experiment engine, where every finished test feeds the next ideas

Every test, won or lost, teaches an engine that proposes the next ideas for every client. Agents build them; people review them.

Under the models

The platform the models move onto, and the way all of it gets built.

Fig. 08

The switchboard

Every use case is configuration, not code.

Hand-inked drawing of a switchboard: use-case cards slot into a registry, a shadow lamp, a gate light and a flip lever wire a storefront to the new platform

The new serving platform under the models. Each client’s use case is a row in one registry plus shared engine parts: where its items come from, how often they refresh, and the shape of the answer. Clients stay walled off from each other. A model runs in shadow first, answering beside the old stack without showing, and a surface flips only after it passes a gate, with the way back written down before the flip.

Fig. 09

The command center

A fleet of agents. People hold the decisions.

Hand-inked drawing of a control room: a plan board of ordered work, lanes, robot builders at benches, an advisor, a two-lens checker, a merge gate and a locked live storefront

I build all of this with a fleet of AI agent sessions. A command center plans one ordered graph of work, about eighty lanes each own a project, builders take the rows, and an advisor audits the plan and tests the builders. Every finding is checked against a second source before it reaches me, work lands one tested merge at a time, agents never touch a working live slot, and the person who owns a launch makes the launch.

One loop

  1. Shopper events
  2. Features & embeddings
  3. Candidates
  4. Ranking
  5. Serving
  6. Experiment
  7. Retrain

One loop, run for every client, every day. Raw events come in, live models go out, the experiment says whether they won, and the result feeds the next model. A surface only counts as live once a fresh visitor actually sees the model’s items on the page.

Fig. 10The record playerPick a song. Drop the needle.
Hand-inked drawing of a record player beside a crate of three records, Jonathan’s Side A
  1. 01Bus Stop ConfettiFor Everest & Maggie · Sung in Mandarin, English subtitles4:11
  2. 02Three Hearts Inside a Stolen ShipFor Tina, Everest & Maggie5:05
  3. 03One More ThingFor Everest, sung by Dad4:38

Songs made with Suno. The picture show is drawn live in your browser, in ink.

Fig. 11The Unwritten Stars cabinetDrop a coin. Press start, and the game loads.
Hand-inked drawing of a bartop arcade cabinet for Unwritten Stars, with a stack of coins beside it

Now playing

Unwritten Stars

Follow the stolen ship for one song.

A five-minute action game set to “Three Hearts Inside a Stolen Ship.” Run an unwritten road through a hollow world while the Blight eats it behind you. Your weapons fire by themselves; every level is a choice that branches and evolves, so no two runs play the same.

Play Unwritten Stars

Keyboard, touch or gamepad · Sound on

Game night

Priced In

Guess the number. Price the room.

A trivia game for friends who think they know things. Everyone locks in a guess, the guesses become an odds board, and you bet on whoever you think is closest without going over. Play at a live table now, or start a room and text the link so everyone plays on their own phone, with voice chat and AI guessers who explain their terrible reasoning in the group chat.

Play Priced In

Most of what I believe about learning, I believe more since becoming a father.

Everest and Maggie riding together in a green grocery cart in front of a wall of fruit
Saturday groceries.
Jonathan with his wife and their two kids on vacation, all four smiling
The four of us.
Jonathan’s son and daughter laughing together at the kitchen table
Big brother, little sister.
Everest outside in a blue fleece, holding a long branch in one hand and a toy truck in the other
Found the best stick.
Maggie sitting on the rug in a knitted sweater, holding a blue stacking ring
Rings, in order, eventually.

Not ranked.
Some things you don’t optimize.

Fig. 12

“I do it”

From “help me” to “I do it.”

Hand-inked drawing of a toddler on a little balance bike on a garden path

The best sound in parenting is “help me” turning into “I do it.” A balance bike gets there faster than any lecture.

Fig. 13

Little boat, fat boat

The little boat is Maggie.

Hand-inked drawing of two wind-up toy boats on a canal, a little pink one and a fat tugboat

On the walk home along the water, every boat gets a job in the family. The little boat is Maggie. The fat boat, I am told, is Daddy.

Fig. 14

Anything with wheels

If it rolls, it gets studied.

Hand-inked drawing of a toy fire truck with a ladder, on a road

Monster trucks, fire trucks, trains, cranes. If it has wheels, it requires investigation, ideally from very close up.

Fig. 15

Five books at bedtime

Five is the largest reasonable number.

Hand-inked drawing of a nightstand with a lamp and a stack of five picture books under a window

Five books, every night, because five is currently the largest reasonable number in the universe. So far, the books are winning.

Fig. 16

Two languages

Five little ducks, in Mandarin.

Hand-inked drawing of a music box that plays Five Little Ducks in Mandarin or English, with ducklings by a hill

Our home runs in Mandarin and English. The songs we sang to our kids, they now sing back to us.

Fig. 17

Saturday pancakes

He mixes. She eats the cheese.

Hand-inked figure: a griddle of Saturday pancakes

He mixes the batter with great seriousness. His little sister supervises and handles the cheese.

A walk home from preschool can take three hours. Every boat, fire truck and unusual machine requires investigation.

Pay attention. Try things. Keep what works. Change your mind when reality disagrees. Leave room for surprise.

The same rule, at work and at home.