Documentation

Model Reel simulations are JSON files that describe a scripted conversation. Each file defines which Claude product to simulate, how the UI should look, and a sequence of events to play back.

Quick Start

Get a simulation running in 2 minutes

Schema Reference

Every field, type, and constraint

Examples

Complete simulations you can copy

Quick Start

There are three ways to create a simulation:

1

Use the visual editor

Open Model Reel, click "New Simulation", and use the timeline editor to add events visually. Good for quick prototyping.

2

Ask Claude to write it

Give Claude the reference doc and a description of what you want. It will generate valid simulation JSON you can import directly. This is the fastest way to create complex simulations.

3

Write JSON by hand

Author the JSON file directly using the schema reference. Best when you need precise control over every event and timing value.

Using Claude to Create Simulations

The fastest way to author a simulation is to ask Claude (or any LLM) to write the JSON for you. Give it the authoring reference and describe the demo you want.

Step 1: Give Claude the reference

Paste the contents of llms-full.md into your conversation, or point Claude at the URL:

Read this simulation authoring reference, then I'll ask you to create a simulation: https://model-reel.versantus.ai/llms-full.md

Step 2: Describe what you want

Be specific about the product type, the scenario, and the level of detail you want. Here are some example prompts:

Claude Code demo
Create a Claude Code simulation where the user asks Claude to add authentication to an Express app. Claude should: 1. Read the existing server.ts file 2. Think about the approach 3. Install passport and passport-local with a Bash tool call 4. Edit server.ts to add the auth middleware 5. Summarise what it did Use realistic file contents and natural timing. Make tool calls expanded by default so the viewer can see the code.
Claude Chat demo
Create a Claude Chat simulation (light theme) where the user asks Claude to build a dashboard. Claude should respond with a brief explanation, then generate an HTML artifact with a responsive dashboard containing charts (use placeholder chart elements with CSS). Include sidebar conversations for context. Use fast streaming speed for the artifact.
Claude Cowork demo
Create a Claude Cowork simulation where the agent analyses a codebase and generates documentation. Show 4 progress steps: scanning files, analysing code structure, generating docs, writing output files. End with a "finished" notification. Include thinking events between major steps.

Step 3: Import the JSON

Copy Claude's JSON output, then:

  1. Open Model Reel in your browser
  2. Click the simulation picker (bottom-right)
  3. Click Import JSON
  4. Select or paste your JSON file
  5. Press play

Tip: If the simulation doesn't look right, paste the JSON back to Claude along with the error or description of the problem. It can fix timing issues, add missing cross-references, and adjust the pacing.

Manual Authoring

If you prefer to write simulation JSON by hand, here's the structure at a glance. See the full reference for every field.

Simulation structure

{
  "id": "unique-id",
  "title": "My Simulation",
  "description": "What this demo shows",
  "productType": "claude-code",       // or "claude-chat", "claude-cowork"
  "createdAt": "2026-01-01T00:00:00Z",
  "updatedAt": "2026-01-01T00:00:00Z",
  "metadata": {
    "codeConfig": { ... }              // matches productType
  },
  "events": [
    { "id": "e1", "type": "user-message", "delayMs": 0, ... },
    { "id": "e2", "type": "thinking", "delayMs": 400, ... },
    { "id": "e3", "type": "assistant-message", "delayMs": 200, ... }
  ]
}

Event types at a glance

Type Product Description
user-messageAllUser sends a message
assistant-messageAllClaude responds with streaming text
thinkingAllThinking/processing indicator
tool-callCode, CoworkInvokes a tool (Read, Edit, Bash, etc.)
tool-resultCode, CoworkShows tool output
permission-promptCodeAsks for permission to run a tool
permission-responseCodeUser grants or denies permission
artifactChat, CoworkGenerates HTML, code, SVG, Word, or PDF
status-bar-updateCodeUpdates cost, context, model, or branch
cowork-progressCoworkUpdates a task step in the sidebar
cowork-notificationCoworkShows a completion or error banner
pauseAllDeliberate pause between events

Contributing Demos

Want to add a demo to Model Reel? It's just a JSON file.

  1. Create your simulation JSON (using any of the methods above)
  2. Save it as a .json file in src/demos/basic/ or src/demos/advanced/
  3. The app auto-discovers all JSON files in those folders — no code changes needed
  4. Open a pull request

Convention: Use basic/ for introductory demos showing a single product type, and advanced/ for richer simulations with multiple tool calls, artifacts, or complex workflows.