CLOSE

scratch clone

Scratch clone for teaching DSPyShared by Rahul
This is a copy of a chat between Claude and Rahul. Content may include unverified or unsafe content that do not represent the views of Anthropic. Shared snapshot may contain attachments and data not displayed here.

What does this mean? Tweet on X.

@clonkbot Create a Scratch clone (scratch.mit.edu - the block-based programming eduction platform) that teaches people DSPy instead
10:45 AM
This tweet is tagging @clonkbot (likely an AI coding bot on X) and asking it to build a visual, block-based programming environment — styled after Scratch (MIT's drag-and-drop coding platform for beginners) — but instead of teaching general programming, it would teach people DSPy.

DSPy is a framework for programming with language models. Instead of writing brittle prompts by hand, DSPy lets you define AI pipelines as modular programs with "signatures" (input→output specs), and then it automatically optimizes the prompts/weights for you. Think of it as "PyTorch but for LLM pipelines."

So the tweet is essentially a creative prompt asking: "Build me a beginner-friendly, drag-and-drop interface where people can learn DSPy concepts by snapping together visual blocks" — like how Scratch teaches kids loops and conditionals, but here the blocks would represent DSPy concepts like modules, signatures, optimizers, retrievers, etc.

It's a fun idea — DSPy has a learning curve, and a visual block-based interface could make it way more accessible.

Does DSPy lend itself to this? How could it work? Describe it visually
10:46 AM
Great question — DSPy actually lends itself to this surprisingly well, maybe better than most frameworks. Here's why and how it could work:

Why DSPy Maps Naturally to Blocks

DSPy's core philosophy is already modular and declarative. You're not writing freeform prompts — you're snapping together structured components with defined inputs and outputs. That's basically what Scratch does with code blocks.

DSPy's key primitives are inherently "block-shaped":

Signatures — simple input→output declarations like "question -> answer" or "context, question -> reasoning, answer". These are literally just labeled slots.
Modules — dspy.Predict, dspy.ChainOfThought, dspy.ReAct — these are self-contained units that take a signature and do something with it. Perfect as draggable blocks.
Pipelines — you compose modules together in a forward() method, which is just connecting outputs of one block to inputs of another.
Optimizers — BootstrapFewShot, MIPROv2, etc. — these sit "above" your pipeline and tune it. Think of these as a special top-level block you wrap around everything.

Visual Walkthrough

Imagine a Scratch-like canvas:

Left sidebar (block palette), organized by category:

📦 SIGNATURES 🧠 MODULES 🔧 OPTIMIZERS
┌──────────────┐ ┌───────────────┐ ┌──────────────┐
│ ? → answer │ │ Predict │ │ BootstrapFS │
│ q,ctx → ans │ │ ChainOfThought│ │ MIPROv2 │
│ custom... │ │ ReAct │ │ BayesianSig │
│ │ │ ProgramOfThot │ │ │
└──────────────┘ └───────────────┘ └──────────────┘📥 RETRIEVERS ⚙️ METRICS
┌──────────────┐ ┌───────────────┐
│ ColBERTv2 │ │ Exact Match │
│ Pinecone │ │ F1 Score │
│ Custom │ │ LLM-as-Judge │
└──────────────┘ └───────────────┘

Center canvas — building a RAG pipeline by drag-and-drop:

┌─────────────────────────────────────────────────┐
│ MY RAG PIPELINE │
│ │
│ ┌──────────────────┐ │
│ │ 📥 Retrieve │ │
│ │ in: [question] │──┐ │
│ │ out: [passages] │ │ │
│ └──────────────────┘ │ │
│ ▼ │
│ ┌───────────────────────────┐ │
│ │ 🧠 ChainOfThought │ │
│ │ sig: context,question │ │
│ │ → reasoning,answer │ │
│ │ in: [passages, question] │ │
│ │ out: [answer] │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘

Connections between blocks are visible as wires/pipes — you literally drag from an output port to an input port. If the types don't match (you're trying to pipe passages into a slot expecting question), the wire turns red. Scratch-style snap feedback.

Right panel — live preview:

┌──────────────────────────────┐
│ 🟢 TEST YOUR PIPELINE │
│ │
│ Question: [Who invented___] │
│ │
│ ▶ RUN │
│ │
│ Retrieved: "Nikola Tesla..." │
│ Reasoning: "Based on the..." │
│ Answer: "Nikola Tesla" │
│ │
│ 📊 Token cost: 847 │
│ ⏱ Latency: 1.2s │
└──────────────────────────────┘

Optimization as a "wrapper block":

You drag an optimizer block around your pipeline (like Scratch's "forever" or "repeat" loop blocks wrapping other blocks):

┌─ 🔧 BootstrapFewShot ──────────────────┐
│ metric: [Exact Match ▼] │
│ trainset: [my_examples.json] │
│ │
│ ┌──────────┐ ┌────────────────┐ │
│ │ Retrieve │────▶│ ChainOfThought │ │
│ └──────────┘ └────────────────┘ │
│ │
│ [▶ OPTIMIZE] progress: ████░░ 67% │
└─────────────────────────────────────────┘

What Makes This Work Better Than "Scratch for Prompting"

The reason this isn't just a gimmick is that DSPy's abstractions are already at the right level of granularity for blocks. Compare:

Raw prompt engineering → freeform text, no natural block boundaries, a visual tool adds nothing
LangChain → could work but the abstractions are leaky and you'd still need lots of code glue
DSPy → the whole point is that you declare structure and let the framework handle the messy parts. The visual metaphor actually matches the mental model

The signatures are the connector shapes (like Scratch's jigsaw edges), the modules are the blocks, the pipeline is the stack, and optimization is the outer loop. It's almost 1:1.

Lesson mode could walk you through progressive challenges: "Build a basic Q&A → Add retrieval → Add chain-of-thought → Optimize it → Beat this benchmark score" — gamified, with each lesson introducing one new block type.

Honestly, someone should build this.

What are some examples of things that could be built with this app? Show me how
10:47 AM
Let me show a few progressively complex examples — from beginner tutorial to genuinely useful — with the block canvas for each.

1. Hello World: Simple Q&A

Lesson 1 — "Your first module"

┌─────────────────────────────────┐
│ SIMPLE QA │
│ │
│ ┌───────────────────────────┐ │
│ │ 🧠 Predict │ │
│ │ sig: question → answer │ │
│ │ in: [question] │ │
│ │ out: [answer] │ │
│ └───────────────────────────┘ │
│ │
└─────────────────────────────────┘TEST:
 Q: "What is the capital of France?"
 A: "Paris"

Boring but foundational. You learn: signatures have typed fields, Predict is the simplest module. One block, one wire.

2. Upgrade: Add Reasoning

Lesson 2 — "Swap one block, get chain-of-thought for free"

┌─────────────────────────────────────┐
│ QA WITH REASONING │
│ │
│ ┌─────────────────────────────┐ │
│ │ 🧠 ChainOfThought │ │
│ │ sig: question │ │
│ │ → reasoning, answer │ │
│ │ in: [question] │ │
│ │ out: [reasoning, answer] │ │
│ └─────────────────────────────┘ │
│ │
└─────────────────────────────────────┘TEST:
 Q: "If a train leaves at 3pm going 60mph and
 another at 4pm going 90mph, when do they meet?"
 Reasoning: "The first train has a 60-mile head start.
 The second closes the gap at 30mph..."
 A: "6:00 PM"

The aha moment: you didn't write a "think step by step" prompt. You just swapped Predict for ChainOfThought. The framework handles the prompting.

3. RAG Pipeline: Study Buddy

"Upload your notes, ask questions about them"

┌──────────────────────────────────────────────────┐
│ 📚 STUDY BUDDY │
│ │
│ ┌────────────┐ │
│ │ 📄 Upload │ ← "biology_notes.pdf" │
│ │ chunked → │──┐ │
│ │ [index] │ │ │
│ └────────────┘ │ │
│ ▼ │
│ ┌──────────────────┐ ┌─────────────────────┐ │
│ │ 📥 Retrieve │ │ 🧠 ChainOfThought │ │
│ │ in: [question] │───▶│ sig: context, │ │
│ │ out: [passages] │ │ question → │ │
│ │ k: [3] │ │ reasoning, answer │ │
│ └──────────────────┘ └─────────────────────┘ │
│ │
└──────────────────────────────────────────────────┘TEST:
 Q: "What's the difference between mitosis and meiosis?"
 Retrieved: [chunk from page 14, chunk from page 22...]
 Reasoning: "According to the notes, mitosis produces..."
 A: "Mitosis produces 2 identical cells, meiosis
 produces 4 genetically unique gametes..."

First multi-block pipeline. You learn wiring outputs→inputs and the retriever concept.

4. Multi-Hop Reasoning: Fact Checker

"Answer questions that need multiple lookups"

┌───────────────────────────────────────────────────────┐
│ 🔍 MULTI-HOP FACT CHECKER │
│ │
│ ┌──────────────┐ │
│ ┌───▶│ 📥 Retrieve │──┐ │
│ │ │ k: [3] │ │ │
│ │ └──────────────┘ │ │
│ │ ▼ │
│ │ ┌──────────────────────────────────┐ │
│ │ │ 🧠 ChainOfThought │ │
│ │ │ sig: context, question → │ │
│ │ │ reasoning, search_query │ │
│ │ └──────────┬───────────────────────┘ │
│ │ │ │
│ │ ┌──────────▼───────────┐ │
│ │ │ 🔀 Need more info? │ │
│ │ │ YES ──┐ NO ──┐ │ │
│ │ └────────┘────────┘───┘ │
│ │ │ │ │
│ └─────────────┘ ▼ │
│ ┌──────────────────┐ │
│ │ 🧠 Predict │ │
│ │ sig: context, │ │
│ │ question → │ │
│ │ verdict, │ │
│ │ confidence, │ │
│ │ explanation │ │
│ └──────────────────┘ │
│ │
└───────────────────────────────────────────────────────┘TEST:
 Q: "Did Einstein win the Nobel Prize for relativity?"
 Hop 1 retrieves: Einstein Nobel Prize info
 Reasoning: "Sources say photoelectric effect, need
 to verify relativity wasn't included..."
 Hop 2 retrieves: Nobel Prize 1921 details
 Verdict: "MISLEADING"
 Confidence: 0.94
 Explanation: "Einstein won the 1921 Nobel Prize in
 Physics, but for the photoelectric effect, not
 for his theory of relativity."

Introduces the loop/conditional block — Scratch's "repeat until" equivalent. The pipeline decides if it needs another retrieval hop.

5. With Optimization: Tweet Classifier

"This is where DSPy's magic actually kicks in"

┌─ 🔧 BootstrapFewShot ────────────────────────────────┐
│ metric: [F1 Score ▼] │
│ trainset: [labeled_tweets.csv] (50 examples) │
│ trials: [10] │
│ │
│ ┌──────────────────────────────────┐ │
│ │ 🧠 ChainOfThought │ │
│ │ sig: tweet → │ │
│ │ reasoning, │ │
│ │ sentiment (pos/neg/neutral), │ │
│ │ topic (tech/politics/crypto/ │ │
│ │ sports/other) │ │
│ └──────────────────────────────────┘ │
│ │
│ [▶ OPTIMIZE] │
│ │
│ ┌─ OPTIMIZATION LOG ─────────────────────────────┐ │
│ │ Trial 1: selected 3 demos → F1: 0.71 │ │
│ │ Trial 2: selected 4 demos → F1: 0.74 │ │
│ │ Trial 3: selected 3 demos → F1: 0.82 ★ best │ │
│ │ ... │ │
│ │ Final prompt: auto-generated with 3 few-shot │ │
│ │ examples selected from training data │ │
│ └────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────┘BEFORE OPTIMIZATION: F1 = 0.64
AFTER OPTIMIZATION: F1 = 0.82 ✨ +28%[👁 VIEW GENERATED PROMPT] ← shows what DSPy actually built

This is the lesson where it clicks. You didn't write a single prompt. You gave it structure + examples + a metric, and DSPy figured out the best prompt. The "View Generated Prompt" button is crucial — it demystifies the magic by showing the actual few-shot prompt DSPy assembled.

6. Boss Level: Agentic Pipeline

"AI agent that researches a topic and writes a report"

┌────────────────────────────────────────────────────────────┐
│ 📝 RESEARCH AGENT │
│ │
│ ┌─────────────────┐ │
│ │ 🧠 Predict │ │
│ │ topic → │──┐ │
│ │ search_queries │ │ generates 3 queries │
│ └─────────────────┘ │ │
│ ▼ │
│ ┌──────────────────────────────┐ │
│ │ 🔁 ForEach (query) │ │
│ │ ┌──────────────────────┐ │ │
│ │ │ 🌐 WebSearch │ │ │
│ │ │ in: [query] │──▶│──┐ │
│ │ │ out: [results] │ │ │ │
│ │ └──────────────────────┘ │ │ │
│ └─────────────────────────────┘ │ │
│ ▼ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 🧠 ChainOfThought │ │
│ │ sig: topic, all_results → │ │
│ │ key_findings, contradictions, gaps │ │
│ └──────────────────┬───────────────────────────┘ │
│ ▼ │
│ ┌──────────────────────────────────────────────┐ │
│ │ 🧠 Predict │ │
│ │ sig: topic, key_findings, │ │
│ │ contradictions, gaps → │ │
│ │ report_title, summary, │ │
│ │ sections[], confidence_score │ │
│ └──────────────────────────────────────────────┘ │
│ │
└────────────────────────────────────────────────────────────┘TEST:
 Topic: "Current state of Bitcoin L2s"
 Queries generated: ["Bitcoin L2 landscape 2025",
 "Stacks vs Lightning comparison", "BitVM progress"]
 Key findings: [5 items]
 Contradictions: "Sources disagree on whether BitVM
 is production-ready..."
 Report: [rendered markdown preview] → 📄 Export

The Progression Pattern

Level	Concept Introduced	Blocks Used
1	Signatures, Predict	1
2	Module swapping	1 (different)
3	Multi-block wiring, Retrieval	2-3
4	Loops, conditionals	3-4 + control flow
5	Optimization, metrics	same + optimizer wrapper
6	Composition, agents, tools	5+ with iteration

Each lesson adds exactly one new concept while reusing everything prior. Classic Scratch pedagogy — and it works because DSPy's abstractions are genuinely composable in this way.

Given all this, what should I prompt @clonkbot to create this? Tweet-sized.
10:48 AM
Here are a few options depending on what you want to emphasize:

Focused on the pedagogy:

@clonkbot Build a Scratch-style visual block editor that teaches DSPy. Drag-and-drop Signatures, Modules (Predict, ChainOfThought, ReAct), Retrievers, and Optimizers onto a canvas. Wire outputs→inputs. 6 progressive lessons from "Hello World QA" to agentic pipelines. Live test panel on the right. Show the generated prompt after optimization so users see the magic.

Shorter, letting clonkbot figure it out:

@clonkbot Scratch-style drag-and-drop IDE for learning DSPy. Blocks for Signatures, Modules, Retrievers, Optimizers. Wire them together visually. Progressive lessons: simple QA → RAG → multi-hop → optimization → agents. Live run panel, show generated prompts. Make optimization feel like hitting "compile."

Tweet-length punch:

@clonkbot Visual block-based DSPy playground. Drag Predict, ChainOfThought, Retrieve blocks onto a canvas, wire outputs to inputs like Scratch. Wrap pipelines in Optimizer blocks to auto-tune. Progressive lessons from hello world to agentic RAG. Show the generated prompt so users learn what DSPy actually does under the hood.

The third one is probably your best bet — it's dense enough that clonkbot gets the architecture but leaves room for it to make creative decisions on the UI.

back to top