Examples - Model Reel Docs

Claude Code

Terminal CLI with tool calls, file edits, and status bar updates

This example shows a user asking Claude to add an API endpoint. Claude reads a file, edits it, and summarises the changes. The status bar updates with cost and context usage.

{
  "id": "example-code",
  "title": "Code Demo",
  "description": "A minimal Claude Code simulation",
  "productType": "claude-code",
  "createdAt": "2026-01-01T00:00:00Z",
  "updatedAt": "2026-01-01T00:00:00Z",
  "metadata": {
    "codeConfig": {
      "modelName": "claude-opus-4-6",
      "gitBranch": "main",
      "workingDirectory": "/Users/dev/project",
      "initialCost": "$0.00",
      "initialContext": 3
    }
  },
  "events": [
    {
      "id": "e1",
      "type": "user-message",
      "delayMs": 0,
      "content": "Add a hello world endpoint to the Express server",
      "typingEffect": true
    },
    {
      "id": "e2",
      "type": "thinking",
      "delayMs": 400,
      "durationMs": 1200,
      "label": "Reading project files..."
    },
    {
      "id": "e3",
      "type": "tool-call",
      "delayMs": 200,
      "toolName": "Read",
      "toolInput": { "file_path": "/Users/dev/project/src/server.ts" },
      "description": "Reading server.ts",
      "expandedByDefault": false
    },
    {
      "id": "e4",
      "type": "tool-result",
      "delayMs": 100,
      "toolCallId": "e3",
      "output": "import express from 'express'\nconst app = express()\napp.listen(3000)",
      "isError": false,
      "isCollapsed": true
    },
    {
      "id": "e5",
      "type": "tool-call",
      "delayMs": 300,
      "toolName": "Edit",
      "toolInput": {
        "file_path": "/Users/dev/project/src/server.ts",
        "old_string": "app.listen(3000)",
        "new_string": "app.get('/hello', (req, res) => {\n  res.json({ message: 'Hello, world!' })\n})\n\napp.listen(3000)"
      },
      "description": "Adding hello world endpoint",
      "expandedByDefault": true
    },
    {
      "id": "e6",
      "type": "tool-result",
      "delayMs": 100,
      "toolCallId": "e5",
      "output": "File edited successfully.",
      "isError": false,
      "isCollapsed": false
    },
    {
      "id": "e7",
      "type": "status-bar-update",
      "delayMs": 0,
      "updates": { "cost": "$0.02", "contextPercent": 5 }
    },
    {
      "id": "e8",
      "type": "assistant-message",
      "delayMs": 300,
      "content": "I've added a GET `/hello` endpoint that returns a JSON greeting. You can test it with `curl http://localhost:3000/hello`.",
      "streamingSpeed": "normal"
    }
  ]
}

Events used: user-message thinking tool-call tool-result status-bar-update assistant-message

Claude Chat

Conversational UI with artifacts and sidebar

This example shows a chat conversation where Claude generates an HTML artifact. Note the sidebar conversations and the artifact opening in a simulated Chrome browser.

{
  "id": "example-chat",
  "title": "Chat Demo",
  "description": "A minimal Claude Chat simulation with an artifact",
  "productType": "claude-chat",
  "createdAt": "2026-01-01T00:00:00Z",
  "updatedAt": "2026-01-01T00:00:00Z",
  "metadata": {
    "chatConfig": {
      "modelName": "Claude Opus 4",
      "theme": "light",
      "conversationTitle": "Quick question",
      "sidebarConversations": [
        { "id": "c1", "title": "Quick question", "timestamp": "Just now", "isActive": true }
      ],
      "projects": []
    }
  },
  "events": [
    {
      "id": "e1",
      "type": "user-message",
      "delayMs": 0,
      "content": "Create a simple landing page for a coffee shop",
      "typingEffect": false
    },
    {
      "id": "e2",
      "type": "thinking",
      "delayMs": 300,
      "durationMs": 1000
    },
    {
      "id": "e3",
      "type": "assistant-message",
      "delayMs": 200,
      "content": "Here's a clean landing page for your coffee shop:",
      "streamingSpeed": "fast"
    },
    {
      "id": "e4",
      "type": "artifact",
      "delayMs": 400,
      "artifactType": "html",
      "title": "Coffee Shop Landing Page",
      "content": "<!DOCTYPE html><html><head><title>Bean & Brew</title></head><body><h1>Bean & Brew</h1><p>Fresh coffee, every morning.</p></body></html>"
    },
    {
      "id": "e5",
      "type": "assistant-message",
      "delayMs": 500,
      "content": "The page includes a hero section with your shop name. Want me to add a menu or contact section?",
      "streamingSpeed": "normal"
    }
  ]
}

Events used: user-message thinking assistant-message artifact

Claude Cowork

Autonomous agent with task progress and notifications

This example shows the autonomous desktop agent working through a multi-step task. Progress steps update in the sidebar, and a notification banner appears when the task completes.

{
  "id": "example-cowork",
  "title": "Cowork Demo",
  "description": "A minimal Claude Cowork simulation",
  "productType": "claude-cowork",
  "createdAt": "2026-01-01T00:00:00Z",
  "updatedAt": "2026-01-01T00:00:00Z",
  "metadata": {
    "coworkConfig": {
      "taskTitle": "Organise project files",
      "folderPath": "/Users/dev/project",
      "suggestions": ["Organise files", "Analyse data", "Draft document"]
    }
  },
  "events": [
    {
      "id": "e1",
      "type": "user-message",
      "delayMs": 0,
      "content": "Organise the files in this project by type",
      "typingEffect": true
    },
    {
      "id": "e2",
      "type": "thinking",
      "delayMs": 500,
      "durationMs": 1000,
      "label": "Planning approach..."
    },
    {
      "id": "e3",
      "type": "cowork-progress",
      "delayMs": 300,
      "stepIndex": 0,
      "stepLabel": "Scanning project structure",
      "status": "running",
      "detail": "Reading directory tree..."
    },
    {
      "id": "e4",
      "type": "cowork-progress",
      "delayMs": 2000,
      "stepIndex": 0,
      "stepLabel": "Scanning project structure",
      "status": "complete",
      "detail": "Found 47 files across 12 directories"
    },
    {
      "id": "e5",
      "type": "cowork-progress",
      "delayMs": 300,
      "stepIndex": 1,
      "stepLabel": "Reorganising file structure",
      "status": "running"
    },
    {
      "id": "e6",
      "type": "cowork-progress",
      "delayMs": 3000,
      "stepIndex": 1,
      "stepLabel": "Reorganising file structure",
      "status": "complete",
      "detail": "Moved 23 files, created 4 new directories"
    },
    {
      "id": "e7",
      "type": "cowork-notification",
      "delayMs": 500,
      "notificationType": "finished",
      "message": "Project organisation complete! Reorganised 23 files."
    }
  ]
}

Events used: user-message thinking cowork-progress cowork-notification

Tips for Writing Good Simulations

Use realistic content. Real-looking file paths, actual code snippets, and plausible tool outputs make the demo convincing. Avoid placeholder text like "lorem ipsum".

Vary the timing. Don't use the same delayMs for every event. Real conversations have natural pauses — shorter between related events, longer between conversation turns.

Mix expanded and collapsed tool calls. Keep important code changes expanded (expandedByDefault: true) and routine reads collapsed. This guides the viewer's attention.

Update the status bar. In Claude Code simulations, increment the cost and context percentage as the conversation progresses. It adds realism.

Test at different speeds. Preview your simulation at 1x, 2x, and 0.5x speed. Timing that feels right at one speed can feel rushed or sluggish at another.