Skip to content
Elucim

"From Words to Agents" Presentation

“From Words to Agents” is a 12-slide presentation that walks through the full LLM pipeline — from tokenization to the agentic loop. Unlike the Calculus example, this deck is built entirely with the Builder API in TypeScript, demonstrating how to generate complex presentations programmatically.

Full Presentation

Section titled “Full Presentation”

Navigate with the arrow keys or click the navigation controls.

From Words to Agents
From Words to Agents
1 / 12
Presenter Notes — Slide 1: From Words to Agents
Title slide -- frame the journey from basic text to intelligent agents.

Preview: The Agentic Loop

Section titled “Preview: The Agentic Loop”
The Agentic Loop
0.00s / 3.97s · F0

Slides

Section titled “Slides”
  1. From Words to Agents — Title slide with the next-token equation
  2. Tokenization — Breaking text into BPE tokens
  3. Embeddings — Token IDs to high-dimensional vectors
  4. Attention — Query, Key, Value mechanism with softmax
  5. Transformer Block — Attention → FFN → LayerNorm architecture
  6. Deep Representations — Stacked transformer layers
  7. Next Token Prediction — Logits, softmax, and sampling
  8. Autoregressive Loop — Iterative token generation
  9. Structured Output — Constrained generation (JSON, code)
  10. The Agentic Loop — Observe → Think → Act → Observe cycle
  11. The Complete Pipeline — End-to-end summary diagram
  12. Thank You — Closing slide

Builder Code Snippet

Section titled “Builder Code Snippet”

Here’s how the first few slides are constructed:

import { presentation, darkTheme } from '@elucim/dsl';


const t = darkTheme;


const doc = presentation('From Words to Agents', darkTheme, { showNotes: true })
  .slide('From Words to Agents', s => {
    s.title('From Words to Agents', { y: 200, fontSize: 36 });
    s.subtitle('How LLMs Think, Speak, and Act', { y: 250, fontSize: 20 });
    s.wait(5);
    s.latex('P(w_t \\mid w_1, w_2, \\ldots, w_{t-1})', {
      y: 330, fontSize: 32, color: t.warning,
    });
    s.at(75);
    s.text('A visual journey through language models', {
      x: s.cx, y: 520, fontSize: 14, color: t.muted,
    });
  }, { notes: 'Title slide — introduce the journey from tokens to agents.' })


  .slide('Tokenization', s => {
    s.title('Step 1: Tokenization');
    s.subtitle('Breaking text into pieces the model can understand');
    s.wait(5);
    s.text('"The cat sat on the mat"', {
      x: s.cx, y: 155, fontSize: 18, color: t.warning, fontFamily: 'monospace',
    });
    s.wait(5);
    s.arrow(s.cx, 170, s.cx, 195, { color: t.muted });
    s.wait(3);
    const tokens = s.boxRow(['The', 'cat', 'sat', 'on', 'the', 'mat'], {
      y: 205, boxWidth: 75, boxHeight: 36, gap: 10,
      fontSize: 14, fontFamily: 'monospace',
    });
    s.wait(5);
    s.connectDown(tokens, { color: t.muted });
    // ... token IDs, vocabulary explanation
  }, { notes: 'BPE tokenization — how text becomes numbers.' })


  .slide('Embeddings', s => {
    s.title('Step 2: Token Embeddings');
    s.subtitle('Each token ID becomes a high-dimensional vector');
    s.wait(5);
    s.boxRow(['3797'], {
      y: 150, boxWidth: 80, boxHeight: 36,
      colors: ['rgba(167,139,250,0.2)'],
      fontSize: 14, fontFamily: 'monospace',
    });
    s.wait(5);
    s.arrow(s.cx, 195, s.cx, 225, { color: t.muted });
    s.wait(3);
    s.matrix([['0.12', '-0.45', '0.78', '...']], {
      x: 300, y: 240, cellSize: 65, color: t.primary,
    });
  }, { notes: 'Embedding lookup — from discrete IDs to continuous vectors.' })


  // ... 9 more slides
  .build();

Running the Builder

Section titled “Running the Builder”
Terminal window
npx tsx packages/dsl/examples/build-agentic-loop.ts

This outputs a valid ElucimDocument JSON that can be rendered with <DslRenderer>.

Source

Section titled “Source”

The full builder script is available at packages/dsl/examples/build-agentic-loop.ts.