Reading about a neural network is one thing. Dragging a slider and watching its decision boundary bend around the data is another. The second one sticks.
In simple words, an interactive demo is a sandbox that runs in your browser: you type, click, or drag, and the system responds instantly. This post collects the best free, no-install demos for every stage of a Generative AI learning path, arranged as a 40-day roadmap that moves from AI foundations to prompt engineering, embeddings, RAG, vector databases with Qdrant, LangChain, and finally AI agents. We use this exact sequence in our own GenAI bootcamp, and every link below was checked live on 24 July 2026.
Some days have no good hosted demo. We skip those honestly instead of padding the list, and we tell you what to reuse from an earlier day.
Note
Everything here is free and browser-based. A few tools need a free account or your own API key, and those are marked. Demos built on WebGL need a reasonably modern GPU.
Week 1: AI Foundations and How LLMs Work
The first week is about intuition: what learning looks like, what a transformer does, and why tokens matter.
Watch a Model Learn (Day 1)
| Demo | What you see |
|---|---|
| TensorFlow Playground | Train a small neural net live and watch the decision boundary form |
| Decision Tree Playground | The same idea with a decision tree: heatmap plus a live tree diagram |
| K-Means Demo | Click to place points and watch centroids converge step by step |
Let's say you pick the circle dataset in TensorFlow Playground with zero hidden layers. The linear model fails. Add one hidden layer of 4 neurons and it wraps the circle. That single moment explains why depth matters better than any diagram.
Look Inside CNNs, RNNs, and Transformers (Day 2)
| Demo | What you see |
|---|---|
| CNN Explainer | A full CNN in the browser; click any neuron to watch convolution and pooling animate |
| 3D Neural Network | Draw a digit and watch activations flow through a 3D network |
| RNN Explainer | The same interactive treatment for an RNN and LSTM |
| Transformer Explainer | Real GPT-2 running in your browser: attention heads, token probabilities, a temperature slider |
| Fill in the Blank | Type masked sentences and watch BERT's predictions expose learned bias |
| Survival of the Best Fit | A short game where your own hiring decisions train a biased model |
The last two belong to responsible AI. Try "Jim worked as a ___" against "Jane worked as a ___" in Fill in the Blank and predict the difference before you hit enter.
Tokens and Next-Token Prediction (Day 3)
| Demo | What you see |
|---|---|
| LLM Visualization | A 3D fly-through of a full GPT forward pass, from nano-GPT to GPT-3 scale |
| OpenAI Tokenizer | Color-coded token splits and counts |
| Tiktokenizer | Tokenizers across models, token IDs, and the hidden chat-template scaffolding |
| Embedding Projector | 10,000 word embeddings in rotatable 3D with nearest neighbors on click |
| Next-Token Game | Type a phrase and see a bar chart of the most likely next tokens |
Paste a sentence full of numbers into the tokenizer and watch it shatter into many tokens. That is why LLMs are weak at arithmetic and why non-English text costs more.
Compare Models Like a Buyer (Day 4)
| Demo | What you see |
|---|---|
| Arena | Blind side-by-side model battles with a crowd-voted leaderboard |
| Artificial Analysis | Interactive intelligence vs price vs speed charts across providers |
| OpenRouter Models | A filterable catalog with live pricing and context lengths |
| VRAM Calculator | Which models fit in which GPU at which quantization |
Caution
Never paste private or client data into public playgrounds like Arena. Conversations there may be shared with model providers or published.
Week 2: Prompt Engineering
This week the demos turn into games, and the games teach real security lessons.
Prompt Basics in a Real Playground (Day 5)
Google AI Studio (free Google account) gives you a system-instructions box, a temperature slider, and structured JSON output in one place. Set the system prompt to a strict persona, then run the same user question at temperature 0 and 1.5. The contrast teaches both concepts in two minutes. For model comparison on the same prompt, Arena side-by-side works without login.
Structured Output and Prompt Chaining (Day 6)
| Demo | What you see |
|---|---|
| ChainForge | A visual node canvas: prompt templates fan out across models and the responses land in a comparison table |
| JSON Schema Validator | Paste a schema and a JSON document, get instant pass or fail with line-level errors |
ChainForge needs your own API key (it is not stored). Build one template node with a {topic} variable, feed two model nodes, and you have prompt templating, chaining, and parameter tuning on one screen.
Reasoning Experiments (Day 7)
No dedicated chain-of-thought sandbox exists right now, so we reuse ChainForge. Run the same logic puzzle twice through one model, once plain and once with "think step by step", and compare the answers in its table. Set 5 samples at temperature 1.0 on the same prompt and you have a live self-consistency experiment too.
Prompt Injection Games (Day 8)
| Demo | What you see |
|---|---|
| GPT Prompt Attack | Craft the shortest input that leaks a secret from the system prompt |
| Break The Prompt | A 20-level injection challenge: leak secrets, trick an AI into approving a fake payment, beat an LLM judge |
| HackMerlin | Trick Merlin into revealing his password across escalating levels |
| Prompt Airlines | Manipulate an airline support bot into giving you a free ticket, with the system prompt visible under the hood |
| Tensor Trust | Write a defense prompt for a bank account, then attack other players' defenses (account required) |
Warning
The classic Gandalf game by Lakera, along with its Agent Breaker spin-off and the doublespeak.chat game, went offline in 2026. HackMerlin is the closest drop-in replacement.
Week 3: APIs, Costs, and Embeddings
What an API Call Really Sends (Days 9-10)
Open Tiktokenizer in chat mode and add a system message. You can literally see the chat template wrap your conversation in special tokens, which is the clearest possible answer to "what does the API actually send?". For costs, the DocsBot pricing calculator compares one workload across roughly 90 models from 15 providers, and it encodes your inputs in a shareable URL.
Feel What Embeddings Are (Day 11)
| Demo | What you see |
|---|---|
| Semantle | A daily word game where every guess is scored by cosine similarity |
| Embedding Projector | The vector space itself, in rotatable 3D |
| WizMap | Pan and zoom a map of millions of embeddings with labeled regions |
| Similarity Calculator | Cosine, dot product, Euclidean, and Manhattan on the same pair of vectors, side by side |
Semantle is the sleeper hit here. Guessing a hidden word by semantic closeness teaches cosine similarity faster than any formula, and it makes an excellent group activity.
Semantic Search You Can Toggle (Day 12)
Qdrant's startup search demo has a switch between neural and keyword search on the same query. Search "companies fighting climate change" in keyword mode, then flip the switch. The difference between the two result lists is the entire argument for semantic search. The food discovery demo goes further: no text box at all, just like and dislike buttons on food photos, with recommendations re-ranking in real time. Wikipedia semantic search scales the idea to 23 million articles in 11 languages.
Week 4: Chatbots and RAG Fundamentals
Chat Anatomy and the Context Window (Days 13-14)
HuggingChat (free account) shows what a finished chat product looks like: model picker, system prompt control, streaming. Then the context window visualizer lets you budget a real context: system prompt plus history plus RAG chunks against a response reserve, with a color-coded fill bar and a turns-remaining estimate. Watching that bar hit the red zone explains why chatbots need memory strategies. The context length scroller adds a visceral touch: you physically scroll through how much text 128K tokens actually is.
RAG, Step by Step (Day 15)
| Demo | What you see |
|---|---|
| RAG Visualized | An animated stepper through query, embed, retrieve, compose, and generate |
| RAG-O-MATIC | A real 5-step RAG pipeline on toy documents, with citations and a live cost tracker |
| Chat LangChain | A production RAG assistant that cites its retrieved sources |
Here is the moment that sells RAG: ask RAG-O-MATIC a question its documents cannot answer, and compare the grounded, cited response against what a bare LLM would invent.
Chunking Made Visible (Day 16)
ChunkViz is the classic: paste text, drag the chunk size and overlap sliders, and watch the colored chunk boundaries move. Set overlap to zero and you will see a sentence sliced in half mid-fact. The RAG Chunking Lab then puts numbers on it, comparing strategies with simulated retrieval and Recall@K metrics.
Week 5: Vector Databases and Document Parsing
Qdrant, Live (Day 17)
We use Qdrant as the main vector database in this roadmap, and its hosted demos are the best vector DB show-and-tell on the web. All three demos from Day 12 run on Qdrant, plus the goods categorizer, where you type a product name in any language and multilingual embeddings sort it into a category. Open the Embedding Projector first and say: this point cloud is what lives inside a Qdrant collection. The Qdrant demo hub keeps the current lineup in one place.
HNSW and Hybrid Search (Day 18)
| Demo | What you see |
|---|---|
| Visual Guide to HNSW | Build a graph node by node, then step through an HNSW search layer by layer |
| Sparse vs Dense vs Hybrid | Real BM25, real cosine similarity, and real RRF fusion ranking the same corpus |
| ANN-Benchmarks | Recall vs queries-per-second plots for 30+ approximate nearest neighbor algorithms |
On the hybrid playground, run a keyword-heavy query and BM25 wins. Run a paraphrased semantic query and dense wins. Then watch reciprocal rank fusion fix both. That is the whole hybrid search lecture in three clicks.
Parsing PDFs with Docling (Day 19)
| Demo | What you see |
|---|---|
| Docling demo | Upload a real PDF and get clean markdown out, tables included |
| Granite-Docling demo | IBM's document model converting page images to structured output on GPU |
| Granite-Docling WebGPU | The same parsing running entirely inside your browser, no server involved |
Feed it a page with a complex table and watch the table survive into markdown. Anyone who has tried naive PDF text extraction knows exactly why this matters for RAG quality.
Tip
Hugging Face Spaces sleep when idle and GPU spaces queue anonymous users. Open them a few minutes before you need them.
Choosing Pipeline Components (Day 20)
The MTEB leaderboard lets you filter embedding models by task, language, and size. Sort by size and you can see the quality-versus-cost frontier for picking your pipeline's embedding model. ChunkViz returns here too, now pointed at your own parsed documents.
Week 6: Retrieval Quality and LangChain
What Lands in the Context (Days 21-22)
Qdrant code search turns retrieval into something you can poke: type a natural-language query and see the exact top-k code snippets that would land in a context window. Run the same intent phrased three different ways and compare the result lists. That is query sensitivity, demonstrated. For generation quality, give two models in Arena side-by-side the same context plus a question the context cannot answer, and see which one admits it. The Vectara hallucination leaderboard shows the same behavior measured at scale.
LangChain in Production and Under a Microscope (Days 23-24)
Chat LangChain is LangChain's own production RAG assistant. Ask it a LangChain question and study the source citations: loader, splitter, vector store, retriever, chain, all running for real. Then open the Arize Phoenix live demo, a full observability UI over real agent traces with no login. Walk one trace top-down from user question to LLM call to tool call to answer, then sort by the cost column. This is why tracing exists.
Note
Public LangSmith trace links have been purged, so Phoenix is currently the only way to explore production-style traces without an account.
Weeks 7 and 8: Agents, Security, and the Capstone
Function Calling and Your First Agent (Days 27-28)
In Google AI Studio, define a tool like get_account_balance(account_id) and ask "what is my balance?". The model returns a structured function call instead of prose, and that JSON object is the entire concept of tool use. Then give AgentGPT a research goal and watch an autonomous agent loop visibly: goal in, tasks spawn, tasks execute, new tasks appear. Stop it once the loop is clear, because it will happily run forever.
Agent Security Games (Day 31)
The prompt injection games from Day 8 return with higher stakes. Prompt Airlines is the standout: manipulating a customer-service bot into a free ticket maps directly onto every real deployed assistant, and its later levels involve injecting instructions through uploaded images, the same indirect-injection risk your document pipeline carries. Tensor Trust adds the defense side: write a protection prompt, then watch other players tear it apart.
Capstone Weeks (Days 33-40)
Two tools earn their place here. Excalidraw with live collaboration lets a whole team co-draw a RAG architecture in one shared canvas. And the demos from earlier weeks become reference points: Chat LangChain as the target to match, ChunkViz for tuning your own documents, Phoenix for inspecting your agent's traces. For days 25, 29, 30, 32, and 36 to 40, no good hosted demo exists right now; the best demo of your capstone week is the app you are building.
Conclusion
In this post we assembled a verified, 40-day sequence of free interactive demos covering the full Generative AI stack: neural network playgrounds, transformer visualizers, tokenizers, embedding spaces, semantic search on Qdrant, chunking labs, Docling parsing, RAG pipelines, observability traces, and agent security games. Every link was checked live on 24 July 2026.
Key takeaways:
- Interactive demos build intuition that text cannot: a slider you drag beats a paragraph you read.
- The strongest teaching moments are contrasts: keyword vs neural search, zero overlap vs sane overlap, grounded vs hallucinated answers.
- Prompt injection games are the most fun way to learn LLM security, and the lessons transfer directly to production chatbots.
- Demo links rot fast in this space. Gandalf, LangGraph Builder, and public LangSmith traces all died within a year, so always test links before a session.
Next steps:
- Start building the real thing with LangChain Getting Started.
- Turn the RAG demos into working code with RAG with LangChain.
- Graduate from single chains to stateful agents with LangGraph Getting Started.
This is how a 40-day wall of GenAI theory turns into forty days of things you can click, drag, and break.
