Clay Tech

"clay-works make things real"

translated from clazytech.com

I Built An App To Show How LLMs Actually Work

original Engineering

For a while now, I’d had a nagging sense that explanations of LLMs just don’t land with students.

Lining up terms like “large language model,” “Transformer,” “Attention” doesn’t produce a clear picture in most people’s heads. But dismissing the whole thing as “amazing AI” while ignoring the actual mechanics feels uncomfortable too.

So maybe what’s needed is some kind of teaching material with motion in it.

With that in mind, I built a small teaching app that runs entirely in the browser.

https://kuzlab.github.io/llm-how-it-works/

No server, no API key — a fully static site. It’s published on GitHub Pages, so anyone can open the URL and try it. There’s exactly one goal: to make people grasp, not with their heads but with their hands, this one line — “an LLM is just repeatedly predicting the next word by probability, over and over, at tremendous speed.”

The contents are split across four tabs. Here’s a walkthrough of each, following the screen’s flow.

Tab 1: Guess the next word

This is the main event.

It uses a prepared sample sentence as material. The screen shows the sentence up to a certain point, and candidates for “the word likely to come next” are listed alongside probability bars. For instance, after “The weather today is” (in Japanese), candidates might read “good (55%),” “bad (20%),” “nice, so (12%),” and so on.

Pressing “Next word ▶” advances one word, following the sample. Switch on “Auto-play” and you can watch the sentence grow one word at a time on its own. “An LLM is just doing this in place of a human, at ferocious speed” — that felt sense is what lands first.

The core of this tab is that you can click a candidate yourself to choose it. Pick the same word as the sample and the sentence proceeds as expected, but click a different candidate and the sentence branches off onto a side path. It follows a pre-built branch, and a different sentence gets assembled. For example, the sample continuation after “The weather today is” is “good,” but if you click “nice, so” instead, it veers onto a different path: “The weather today is nice, so I feel…”. So you can trace with your own hands how “the same opening can lead to different endings depending on which word you choose.”

Once a sentence is complete, the message changes depending on how it ended. If it matches the sample, you get “Complete.” If it closes naturally via a different branch, you get “Completed via a different path — this is how an LLM occasionally takes a lower-probability branch. That’s why the output is different every time.” If you reach a dead end in the branch, you get “Cut off here — the real thing would keep generating on its own from here, but this demo is limited to the paths we’ve prepared.”

The temperature (randomness) slider

Tab 1 comes with a “temperature” slider.

It doesn’t change the sentence construction itself. It only changes, in real time, the shape of the probability bars at each step, according to temperature. Lower the temperature and the bars sharpen, with probability concentrating on the single most likely word (confident, safe). Raise it and the bars flatten out, giving even low-probability words a chance (hesitant, free, unexpected).

“Why do ChatGPT and Claude give slightly different answers each time, even to the same question?” This is a tactile answer to that question. Press “Roll the dice 🎲” as well, and it randomly draws one word according to the current temperature’s distribution and lights it up. At low temperature you draw nearly the same word every time; at high temperature you occasionally draw something surprising — something you can feel in your body.

Tab 2: Break the words apart

The second tab shows an input sentence split into color-coded blocks (tokens).

What lands here is the contrast between Japanese and English. Even sentences of roughly equal length break apart completely differently. Put “今日はいい天気ですね” next to “It is a nice day” and, despite nearly identical meanings, both the number of tokens and how they’re divided don’t match up. Each token is also assigned a pseudo ID.

The one line this is meant to convey: “An LLM sees the world not in characters or words, but in units called ‘tokens.’” Seeing with your own eyes that your own sense of language and the machine’s way of dividing it don’t align — that quietly lands.

Tab 3: A map of meaning

The third tab places words on a two-dimensional map.

Words color-coded by category — animals, food, emotions, colors — are scattered according to closeness in meaning. Tap a word and lines connect it to the three nearest words on the map. Dog sits next to cat, that sort of thing. You get a feel for meaning having “distance.”

Here’s where it gets interesting: click “Add context” and the map moves. Add one word to the context, and words in the same category get pulled toward that context, while words in other categories get pushed away. For example, add “dog” to the context, and the animals cluster tightly around “dog,” while food and colors scatter outward. “The arrangement of meaning shifts depending on context” — obvious once you put it into words, but hard to feel viscerally — is shown here through the movement of points.

(Originally I planned to show vector arithmetic like “king − man + woman ≈ queen,” but partway through building it, I judged that this “the map moves with context” experience would land better, and swapped it in instead.)

Tab 4: Thinking from both sides

The last tab has a slightly different character.

Tab 1’s model predicts the next word left to right (an autoregressive model like GPT). A model like BERT, on the other hand, looks at both sides of a sentence at once and guesses the word that fills a blank in the middle.

This tab shows, side by side, two columns for the same fill-in-the-blank sentence: “the prediction when looking only left” and “the prediction when looking at both sides.” Take the sentence “The weather today is ○○, so let’s go for a walk” (in Japanese). Looking only at “The weather today is” on the left, “good” tops out at 30%, sitting roughly level with “bad” and others. But the moment you reveal “so let’s go for a walk” on the right, “good” jumps to 78% and the hesitation vanishes. Below, an automatic comment appears: “Looking left only, ◯◯ was N%; looking at both sides, that same ◯◯ shot up to M%.” Even for the same word, the wider the visible context, the sharper the prediction gets.

What order to let people try it in

When showing this to people, I generally have them go through it in this order.

First, in Tab 1, run “today’s weather” all the way through, showing the sentence growing one word at a time as the probability bars switch. Next, swap the sample to “an example where the temperature difference is easy to see” and move the temperature slider back and forth. At low temperature it converges on the same safe continuation every time; at high temperature the candidates scatter and the sentence goes wild. Finally, using the “unexpected choice — rainy day” sample, deliberately click a low-probability candidate to branch off onto a side path. Once someone has experienced “my choice changes the ending” once, everything after that goes faster.

From there, move to Tab 2 and compare how Japanese and English break apart. In Tab 3, tap a few words to check closeness of meaning, and add context to watch the map move. Close with Tab 4, comparing the same fill-in-the-blank sentence “left only” versus “both sides.” All told, this takes less than 10 minutes.

Underneath, it isn’t a neural network

There’s one thing I should be honest about here.

Neither Tab 1’s predictions nor Tab 4’s left/right comparison run on an actual neural network underneath. What’s being shown is just a pre-prepared probability table and branching paths. None of that massive computation is in there anywhere. It’s a lightweight mock-up that runs entirely inside the browser.

Still, as a model for showing the underlying principle, this is enough. The mechanism — “look at context, choose the next word by probability” — is the same as the real thing. What differs is precision and scale, not the principle. It would only become dishonest if I claimed this actually was a neural network. That’s why the bottom of the screen permanently displays: “This is a simplified demo for building intuition about the mechanism. Real LLMs use neural networks and are far larger in scale.” That keeps it an honest simplification rather than a lie.

Technically, transformers.js could run an actual tiny model in the browser. But that triggers a download of several hundred MB, which chokes underpowered PCs or phones. Not suited for handing out in a classroom. It’s a good example of how showing “the real thing” doesn’t necessarily mean “communicating well.”

While I was at it, I also prepared three display themes so it could be shown anywhere: the default dark neon style, a brighter paper-like palette for classrooms, and a high-contrast one for projector screens. Same contents, but how it looks can change depending on where it’s shown.

Touch it, and it will probably land

Something that no amount of piling up terminology could bring into focus can suddenly click into place the instant someone sees a sentence grow with a single click.

Rather than explain, let people touch it. This is my own answer to the problem that explanations of LLMs never quite land.

A working demo you can try: https://kuzlab.github.io/llm-how-it-works/

Reference links

Original concept and direction: Kuzuryu. Written with the help of AI.

Originally published in Japanese at https://clazytech.com/2026/06/1625/. Translated with LLM assistance and reviewed before publication.