Widget Showcase: Interactive Components for AI Education

This post demonstrates every interactive widget available in MDX content. Each widget is used directly — no import statements needed.

CodeEditor

A syntax-highlighted code editor powered by CodeMirror 6.

async function askClaude(prompt) {
const response = await fetch('/api/proxy/anthropic', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt }),
});
return response.json();
}

CodePlayground

A live code editor with preview pane, powered by Sandpack.

loading playground…

APIPlayground

A BYOK (bring your own key) playground for live LLM API calls.

TokenVisualizer

Breaks text into color-coded tokens using tiktoken in the browser.

Diagram

Renders Mermaid diagrams as interactive SVGs.

AnimatedExplainer

Step-through animated visualizations for complex concepts.

Input

The user's text is tokenized into a sequence of integers.

Quiz

Multiple-choice questions with instant feedback.

quiz

What does the 'temperature' parameter control in an LLM?

SlideDeck

Embedded presentations with keyboard navigation.

slides / How Attention Works1 / 4

Self-Attention

The mechanism behind modern AI

The Key Idea

Instead of processing words sequentially, attention lets the model look at all words simultaneously and decide which ones are relevant to each other.

The Formula

Attention(Q, K, V) = softmax(QKᵀ / √dₖ) · V

“Attention is all you need.”

— Vaswani et al., 2017

The paper that started the transformer revolution

ScrollWalkthrough

A scroll-driven code walkthrough with synchronized panels.

walkthrough / Building a Simple Agent Loop1 / 3

Define the tool

First, describe the tool the model can call. Each tool needs a name, description, and input schema.

const tools = [{
  name: "get_weather",
  description: "Get current weather for a city",
  input_schema: {
    type: "object",
    properties: {
      city: { type: "string" }
    },
    required: ["city"]
  }
}];

Send the message

Pass the tools array alongside the user's message. The model decides whether to call a tool or respond directly.

Handle tool use

Check the stop_reason. If it's 'tool_use', execute the tool and send the result back.

if (response.stop_reason === "tool_use") {
  const toolCall = response.content.find(b => b.type === "tool_use");
  const result = await executeFunction(toolCall.name, toolCall.input);
  // Send result back to continue the conversation
}

const tools = [{
  name: "get_weather",
  description: "Get current weather for a city",
  input_schema: {
    type: "object",
    properties: {
      city: { type: "string" }
    },
    required: ["city"]
  }
}];

const response = await anthropic.messages.create({
  model: "claude-sonnet-5",
  max_tokens: 1024,
  tools,
  messages: [{ role: "user", content: "What's the weather in London?" }],
});

if (response.stop_reason === "tool_use") {
  const toolCall = response.content.find(b => b.type === "tool_use");
  const result = await executeFunction(toolCall.name, toolCall.input);
  // Send result back to continue the conversation
}

GSAPTimeline

Animated stage with GSAP-driven timeline playback.

animation / Token FlowTokenize input

Input

Embed

Attention

InteractiveTimeline

A vertical timeline of events with scroll or interactive modes.

timeline / The Road to Transformers

2013

Word2Vec

Mikolov introduces word embeddings that capture semantic relationships.

2014

Seq2Seq

Sutskever et al. introduce encoder-decoder architecture for machine translation.

2015

Attention Mechanism

Bahdanau et al. add attention to seq2seq models, dramatically improving translation.

2017

Transformer

Vaswani et al. publish 'Attention Is All You Need' — attention without recurrence.

2018

GPT & BERT

Pre-trained transformers achieve state-of-the-art on virtually every NLP benchmark.

MediaPlayer

A styled audio/video player with playback controls.

video / Sample video

0:00 / 0:00

MotionCanvasPlayer

A player for Motion Canvas animations (requires a compiled animation source).

RichTooltip

Inline tooltips with rich content — hover to reveal.

Try hovering over this to see the tooltip in action.

Alternatives

Tabbed comparison panels for showing multiple approaches.

install

npm install @anthropic-ai/sdk

TweetEmbed

Self-contained post cards with no external scripts or tracking.

AAnthropic@AnthropicAIx.com ↗

We're excited to introduce Claude — an AI assistant that's helpful, harmless, and honest.

2024-03-14

Chart

Animated charts using visx + GSAP with Drawn Wire styling.