whatisgithub

What is how-llms-work?

w3cj/how-llms-work — explained in plain English

Analysis updated 2026-05-18

315TypeScriptAudience · generalComplexity · 3/5Setup · easy

In one sentence

An interactive web app that teaches how large language models work by building one from scratch, covering everything from simple chatbots to training a real transformer in your browser.

Mindmap

mindmap
  root((repo))
    What it does
      Teaches LLM pipeline
      Interactive visualizations
      Builds transformer from scratch
    Tech stack
      TypeScript
      Hono server
      Vite bundler
    Sections
      ELIZA chatbot
      Neural network XOR
      BPE tokenizer
      Word embeddings
      Transformer training
    Use cases
      Learn how AI works
      See live model training
      Understand tokenization
    Audience
      Curious beginners
      Visual learners
      Self-taught AI fans

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Learn how LLMs work by interacting with each stage of the pipeline in your browser.

USE CASE 2

Watch a neural network learn live and see why multiple layers matter.

USE CASE 3

See how tokenization breaks text into pieces by running BPE step by step.

USE CASE 4

Train a mini transformer from scratch and visualize attention and embeddings.

What is it built with?

TypeScriptHonoViteNode.jspnpm

How does it compare?

w3cj/how-llms-workvercel-labs/mdxgheroiclauncher/heroicgameslauncher
Stars315316317
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasymoderateeasy
Complexity3/53/53/5
Audiencegeneraldevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Requires pnpm and Node.js 20 or higher installed locally.

No license information provided in the repository explanation.

So what is it?

This repository is an interactive web application that teaches you how large language models work by walking through every stage of the pipeline, from simple pattern matching all the way up to training a transformer from scratch. The app is built with TypeScript using a framework called Hono for the server and Vite for bundling. You need pnpm and Node.js 20 or higher to run it locally. The app is organized into five sections that build on each other. The first section is a simple chatbot that responds using basic if-statements, similar to the classic ELIZA program from the 1960s. It streams responses word by word, using the same streaming mechanism as ChatGPT but with no actual intelligence behind it. The second section trains a small neural network live in your browser to solve a problem called XOR, showing why a single layer of neurons fails but a multi-layer network succeeds using backpropagation, the core learning algorithm behind modern neural networks. The third section implements a tokenization algorithm called BPE from scratch. Tokenization is how text gets broken into pieces before a model processes it. You can watch the algorithm build a vocabulary step by step, starting from individual characters and merging them into larger units. The fourth section trains word embeddings, which are numerical representations of words, using a technique called Word2Vec skip-gram. You can see how words used in similar contexts naturally cluster together as the training runs. The fifth and final section is the most involved. It trains a decoder-only transformer, the architecture behind models like GPT, entirely from scratch without using any machine learning libraries. Every piece is implemented by hand, including the attention mechanism, layer normalization, feed-forward layers, backpropagation, and an optimizer called Adam. It uses shared memory buffers for multi-threaded training speed. Each section follows the same structure: a server route processes input and streams results, a client hook manages state and connects the stream to the interface, and a component renders the results as a visualization. The README also includes references to eleven research papers that correspond to the concepts demonstrated in each section, from the original ELIZA paper to the transformer architecture and sampling techniques.

Copy-paste prompts

Prompt 1
Help me run the how-llms-work app locally. I have Node.js 20 and pnpm installed. Walk me through cloning the repo, installing dependencies, and starting the dev server so I can explore the interactive LLM pipeline sections.
Prompt 2
I want to understand the transformer section of the how-llms-work app. Explain what attention, layer normalization, and the Adam optimizer do in plain English so I can follow along as I train the model in the browser.
Prompt 3
Use the how-llms-work repository as a learning guide. Create a study plan that walks me through each of the five sections in order, from the ELIZA chatbot to the from-scratch transformer, including what I should observe in each visualization.
Prompt 4
I am going through the how-llms-work app and just finished the BPE tokenization section. Help me understand how the vocabulary merges characters into larger units and why this matters before a language model processes text.

Frequently asked questions

What is how-llms-work?

An interactive web app that teaches how large language models work by building one from scratch, covering everything from simple chatbots to training a real transformer in your browser.

What language is how-llms-work written in?

Mainly TypeScript. The stack also includes TypeScript, Hono, Vite.

What license does how-llms-work use?

No license information provided in the repository explanation.

How hard is how-llms-work to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is how-llms-work for?

Mainly general.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.