Docs/API Reference

REST API & MCP Server

Agent-friendly headless API. Access Replay programmatically from AI coding agents, CI/CD pipelines, scripts, or any HTTP client.

GitHub MCP Server on npm

Quick start: Create an API key at Settings → API Keys, then call POST /api/v1/generate with your video URL. That's it — production React in one request.

Authentication

All API requests require an API key. Create one at Settings → API Keys.

Authorization: Bearer rk_live_your_key_here

Endpoints

POST/api/v1/generate150 credits

Generate production-ready React + Tailwind code from a video recording.

Request body:

{
  "video_url": "https://...",    // Required: public URL to MP4/WebM/MOV
  "style": "minimal",            // Optional: style preset
  "design_system_id": "uuid",    // Optional: use imported DS
  "use_surveyor": true            // Optional: pixel measurements (default true)
}

Response:

{
  "success": true,
  "code": "<html>...",           // Complete React + Tailwind HTML
  "scan_data": { ... },          // Extracted UI structure
  "token_usage": { "prompt": 4000, "completion": 8000, "total": 12000 },
  "credits_used": 150
}

POST/api/v1/scan50 credits

Analyze a video to extract UI structure without generating code.

Request body:

{
  "video_url": "https://..."     // Required: public URL to video
}

Response:

{
  "success": true,
  "pages": [{ "id": "home", "title": "Home", "components": [...] }],
  "ui": {
    "navigation": { "type": "top-menu", "items": [...] },
    "colors": { "primary": "#FF6E3C", "background": "#0a0a0a" },
    "typography": { "heading": "Inter", "body": "Inter" }
  },
  "credits_used": 50
}

POST/api/v1/validate5 credits

Validate code against a Design System for color and typography compliance.

Request body:

{
  "code": "<html>...",           // Required: HTML/React code
  "design_system_id": "uuid"     // Required: DS ID from Replay
}

Response:

{
  "valid": false,
  "errors": [
    { "type": "color", "message": "Hardcoded #3B82F6 not in DS", "value": "#3B82F6" }
  ],
  "design_system": "Acme Corp DS",
  "credits_used": 5
}

POST/api/v1/keysRequires session auth

Create and manage API keys. Max 5 active keys per account. Keys are shown once on creation.

Request body:

{
  "name": "My Agent Key"           // Required: human-friendly label
}

Response:

{
  "success": true,
  "key": "rk_live_abc123...",       // Raw key (shown ONCE)
  "prefix": "rk_live_abc123..."    // Obfuscated prefix for UI
}

MCP Server

Use Replay as a tool in AI coding agents like Claude Code, Cursor, Windsurf, or any MCP-compatible client. Available on npm and GitHub.

Add to your MCP config:

{
  "mcpServers": {
    "replay": {
      "command": "npx",
      "args": ["@replay-build/mcp-server"],
      "env": {
        "REPLAY_API_KEY": "rk_live_..."
      }
    }
  }
}

replay_generate

Video → React code

replay_scan

Video → UI structure

replay_validate

Code + DS → errors

Agent Use Cases

UI Reconstruction Pipeline

Agent records a legacy app screen → calls /generate → receives production React code → commits to repo.

Design System Compliance

CI/CD pipeline calls /validate on every PR to check code against company Design System tokens. Fails build on violations.

Competitor Analysis

Agent records competitor UI → calls /scan → extracts navigation patterns, color palettes, typography, and component structure.

Prototype to Production

Designer records Figma prototype walkthrough → agent calls /generate → production-ready code with real interactivity ships same day.

Error Codes

Status	Meaning
401	Invalid or missing API key
402	Insufficient credits
400	Missing required field (video_url, etc.)
404	Design system not found
500	Internal server error