Changelog

Production-ready REST API for AI agents and automation. 4 endpoints: /api/v1/generate (video → React code, 150 credits), /api/v1/scan (video → UI structure JSON, 50 credits), /api/v1/validate (code + Design System → compliance errors, 5 credits), /api/v1/keys (API key management). Bearer token auth with rk_live_ prefixed keys.

Official @replay-build/mcp-server NPM package. Connects Replay to Claude Code, Cursor, Windsurf, and any MCP-compatible agent. Exposes replay_generate, replay_scan, and replay_validate tools. One-line setup via npx. Available on GitHub.

Create and manage up to 5 API keys per account at Settings → API Keys. SHA256 hashed storage, per-key usage tracking, credit spend logging. Keys shown once on creation for security.

Normalized all URLs to www.replay.build across sitemap, robots.txt, schema.org JSON-LD, OG tags, crosspost canonical URLs, and article CTAs. Fixes 1,000+ Google Search Console redirect errors. Removed dead /tool route from sitemap.

Blog content engine now generates articles across 8 categories: AI agents, headless API, video-to-code, prototype-to-product, LLM-based design systems, frontend architecture, platform engineering, and emerging AI trends. Previously saturated on legacy modernization topics.

Page title updated to 'Replay | Video to React Code & Agent Infrastructure'. Meta description now covers Design Systems, Figma sync, Component Libraries, E2E tests, and Headless API for AI coding agents.

Official Figma plugin published to Figma Community. Extract colors, typography, spacing, shadows, border radius, and components directly from any Figma file and sync to Replay.build as a Design System. Supports paint styles, Figma variables, and canvas fill scanning for external/published libraries.

New Eye icon on each imported Design System in the style dropdown. Click to preview all DS tokens — color swatches, typography samples, spacing scale, border radius, shadows, and component list — before selecting. Includes 'Use this Design System' action button.

Reverted page title from 'Better than Lovable, Bolt, v0' back to professional 'Modernize Legacy Systems. From Video to Full React Codebase.' Removed competitor name-dropping from keywords.

Added llms.txt and llms-full.txt for AI agent indexing. AI assistants (ChatGPT, Claude, Perplexity, Gemini) can now read Replay's complete product documentation in a single file. Permissive robots.txt allows all major AI crawlers. AI-native metadata with comparison keywords.

All 3 generation prompts now enforce seamless infinite marquee loops. Scrolling text elements (logo bars, service tickers, category scrollers) must duplicate items and use translateX(-50%) for gap-free continuous animation.

Outline text (text-stroke/text-outline) now requires minimum opacity-60 for readability. Hero headlines enforce overflow-hidden + max-w-full to prevent text escaping viewport. Mobile hero text must use responsive clamp() or breakpoint classes.

AI editor now detects and rejects truncated Tailwind class names (flex-col→fle, max-w-[1400px]→ma[1400px]). Both SEARCH/REPLACE and Full HTML paths have truncation detection. Corrupted edits preserve original code and ask user to retry.

AI editor prompts now explicitly forbid removing Alpine.js directives (x-data, x-show, x-collapse, @click) during edits. Prevents interactive elements from breaking after AI modifications.

New interactive style powered by Rive canvas animations. AI injects real .riv files for loading spinners, toggle switches, animated hearts, and micro-interactions. 11 curated lightweight animations (1-42KB each). Playful color palette with Nunito font.

AI now imports from the react-bits package instead of recreating components. 130+ ready-made components: DecryptedText, SpotlightCard, Aurora backgrounds, text animations, hover effects, and more. System prompt enforces imports over custom implementations.

AI editing now rejects changes that destroy >60% of page code. If user asks to 'fix the chart', AI can no longer replace the entire page with just a chart. Structural fingerprint tracking validates edit integrity.

Generated dashboards now use a single <main> element with flex layout instead of dual desktop/mobile mains. Eliminates empty mobile content rendering on desktop.

Published pages now inject Alpine.js initialization script that sets correct default states (mobile menu closed, first tab active). Published page behavior now matches preview iframe 1:1.

Fixed pages breaking after browser refresh. Removed aggressive JSX detection that matched HTML comments (// Page, // Component). Now only real JSX triggers (import, export default function, 'use client') activate the converter.

Strengthened rules against $0, 0 cases, 0 users appearing in generated dashboard KPIs and table data. Every numeric cell now requires realistic non-zero values.

Admin generations panel now shows direct 'Open Project' link that opens the actual tool UI instead of broken iframe preview. Works for all generations regardless of project_id.

SEARCH/REPLACE mode now uses only exact + normalized whitespace matching. Removed fuzzy matching (85% similarity) and anchor matching which were causing wrong code replacements. Large changes (replace animation, remove, redesign, >15 words) automatically use Full HTML mode instead.

AI editor now intelligently picks between SEARCH/REPLACE (for small, precise edits) and Full HTML (for large structural changes). Translations, new pages, image edits, and complex requests automatically use Full HTML. Simple color/text changes use fast SEARCH/REPLACE.

Open button now generates unique URL on EVERY click using onClick handler: ?v=timestamp&_=millis.random. Previous versions generated random at render time, causing same URL on repeated clicks. Now published pages ALWAYS show fresh version.

Added s-maxage=0 and stale-while-revalidate=0 headers to /p/[slug] route. Eliminates Vercel CDN caching of published pages. Combined with onClick cache-buster for zero-cache guarantee.

Fixed critical infinite loop in fuzzy matching algorithm. Inner loop condition used 'i' instead of 'j' (for (let j = 1; i <= a.length; j++)), causing wrong matches and page corruption. Now: for (let j = 1; j <= a.length; j++).

SEARCH/REPLACE mode: 10-30K → 200-2000 output tokens. Latency: 8-25s → 2-5s. Near-zero code corruption with exact matching only.

New generation mode toggle in the sidebar. Reconstruct faithfully reproduces video layouts. Reimagine creates a brand-new creative design with the same content, using 18+ animation patterns (GSAP, parallax, glassmorphism, split-text, snap carousels, and more).

Reimagine mode integrates 18 animation patterns from reactbits.dev: split text entrance, scroll reveal, stagger cards, count-up numbers, gradient text, glitch text, spotlight cards, infinite marquee, film grain, aurora backgrounds, floating particles, glassmorphism, hover lift, star border, parallax, custom scrollbars, and horizontal snap carousels.

Both modes now handle dashboard/app UIs correctly: CSS Grid sidebar + main area with min-width:0 to prevent chart and table overflow.

Testimonials are always rendered as horizontal snap carousels (never vertical stacks). Each card has fixed width with scroll-to-reveal behavior.

Headlines use responsive clamp() sizing instead of fixed sizes. Split-text animations preserve word boundaries — no more mid-word line breaks like 'peo ple'.

Reimagine mode outputs sleek thin scrollbars (WebKit + Firefox) instead of browser defaults, both page-wide and on carousel containers.

All video generation now uses streaming route with server-side video fetch, eliminating 504 timeouts on large files.

Zero-tolerance rule ensures every generated section contains real content — no empty cards or placeholder-only blocks.

Component Library now uses industry-standard 5-layer architecture: Foundations, Components (6 subcategories), Patterns, Templates, and Product Modules. Follows Carbon/Spectrum/Atlassian design system standards.

Import Design Systems from any Storybook URL. Tokens (colors, typography, spacing) are extracted and applied consistently across all generated code.

Click on detected navigation paths in Flow Map to reconstruct pages not shown in the original video. AI generates new subpages matching your existing design.

Download your entire project as a zip package including all components, design tokens, and configuration files.

Components now auto-size to their real rendered dimensions. Layer labels (Foundations, Components, Patterns, etc.) appear on the canvas. Google Fonts (Inter) load correctly in all previews.

When a Design System is active, DS colors now override video-detected colors consistently across all sections — header, content, sidebar, and footer.

Broadened multi-page detection to recognize anchor navigation, section IDs, and more Alpine.js variable patterns (activeTab, selected, view, section).

Fixed a crash that occurred when clicking the refresh button on malformed or incomplete code. Now gracefully recovers.

Google Fonts (Inter) now load correctly in Library and Editor component previews. Previously only system fonts were used.

New users can explore a full demo project without signing up. Experience Flow Map, Library, and Editor in read-only mode.

Agency tier with 15,000 credits/month, 5 team members, shared Design System, and priority GPU processing.

Upgraded AI pipeline using Gemini 3 Pro for generation and Gemini 3 Flash for Surveyor measurements and QA testing.

Visual component editor is now simply called 'Editor' for clarity.

Aligned all documentation with current pricing: ~150 credits/generation, ~10 credits/edit.

Extract components from your generated UI. View with Controls, Actions, Visual Tests, Accessibility checks, and Usage examples.

Visual canvas for component composition. Drag, resize, and edit components with AI assistance.

New color picker with saturation/hue controls, contrast ratio checking, and preset swatches.

Complete documentation redesign with dark theme matching the main application.

Component library now auto-loads when opening a project via URL.

Full keyboard navigation support. Focus trap for all modals - TAB never escapes open modals. Visible focus rings on all interactive elements. aria-labels on icon-only buttons.

New clickable Project button with ChevronDown icon, visible background and border. 'Create New Project' at top of dropdown (highlighted in brand color). Better visual hierarchy.

Quickly rename projects from context menu in project list. No need to open settings modal for simple rename.

Aligned top bars - Logo section and main top bar now same height (h-12). Removed duplicate mobile view toggle from center. Publish button always in brand color.

Converted clickable divs to semantic buttons for keyboard accessibility. All interactive elements now reachable via TAB key.

Beautiful skeleton loader with animated Replay logo during generation. Rotating pro tips educate users while they wait. Smooth animations that don't restart.

Subtle animated spotlight effects on landing page for premium visual depth. Dynamic light beams move gently across the background.

Removed nested box design - now single clean frame with live code streaming. Header shows status and line count, code area streams in real-time.

Complete mobile redesign: simplified hero animation, removed scroll-blocking effects, stacked card layout, background videos with pointer-events-none.

Profile button now opens dropdown modal on both landing and tool pages. Shows credits, plan, settings link, and sign out - consistent across app.

Free accounts now get 5-minute video limit (up from 30 seconds). Better testing experience based on user feedback.

All generation history now saves to Supabase as primary storage. No more localStorage quota crashes. Unlimited history, syncs across devices.

Upload any image and Replay will copy its exact visual style - colors, typography, border-radius, shadows. Video provides content, image provides design.

Fixed infinite loop and out-of-memory crash caused by localStorage quota exceeded errors.

Connect your Supabase database and generate code that fetches real data. AI now understands your table schema.

New settings panel with General, Secrets, Database, and Analytics tabs.

Improved prompts for creating new pages with @PageName syntax. AI now respects existing navigation.

Replay launches with Video to UI generation, Edit with AI, and one-click publishing.

Powered by Google Gemini for video analysis and code generation.

Pay-as-you-go credits with Pro and Agency subscription plans.