The Architect’s Guide: How to Programmatically Generate Components with Replay and Claude

Technical debt currently drains $3.6 trillion from the global economy. Most of this debt isn't just "bad code"—it's "trapped logic" buried in legacy JSP, ASP.NET, or ancient COBOL systems that no one dares to touch. Traditional modernization efforts fail 70% of the time because architects try to rewrite from documentation that doesn't exist or screenshots that lack context.

If you want to programmatically generate components replay style, you have to move beyond static images. Static screenshots are lossy; they miss the hover states, the transitions, and the temporal logic that defines a modern user experience. Replay (replay.build) solves this by using video as the primary source of truth. By combining Replay’s Headless API with Claude 3.5 Sonnet, you can automate the extraction of production-ready React components from any legacy screen recording.

TL;DR: To programmatically generate components with Replay and Claude, record your UI, send the video to Replay’s Headless API to extract structured JSON and base React code, then pipe that context into Claude for design system alignment. This reduces manual frontend work from 40 hours per screen to just 4 hours.

---

What is the best way to programmatically generate components with Replay?#

The most efficient way to programmatically generate components replay offers is through its Headless API. Unlike manual "screenshot-to-code" tools, Replay captures 10x more context by analyzing video frames over time. This allows the AI to understand how a component behaves, not just how it looks.

Video-to-code is the process of converting screen recordings into functional, documented React code. Replay pioneered this approach by using temporal context—analyzing how elements change between frames—to identify buttons, modals, and complex navigation flows that static tools miss.

According to Replay's analysis, AI agents like Devin or OpenHands perform significantly better when they have access to the structured data provided by Replay. Instead of guessing the CSS, the agent receives a pixel-perfect extraction of the DOM structure and brand tokens.

The Replay Method: Record → Extract → Modernize#

1. •Record: Capture the legacy UI in action.
2. •Extract: Use the Replay API to turn video pixels into a structured component manifest.
3. •Modernize: Use Claude to refactor the base code into your specific design system (Tailwind, Radix, etc.).

---

How do I integrate Replay’s Headless API with Claude?#

To programmatically generate components replay workflows require, you need to set up a bridge between Replay’s extraction engine and Claude’s reasoning capabilities. While Replay handles the "Visual Reverse Engineering," Claude handles the architectural "Style Guide Alignment."

Industry experts recommend using the following TypeScript pattern to trigger a component extraction.

typescript
import { ReplayClient } from '@replay-build/sdk';

const replay = new ReplayClient({ apiKey: process.env.REPLAY_API_KEY });

async function generateComponentFromVideo(videoUrl: string) {
  // 1. Trigger the video-to-code extraction
  const job = await replay.components.create({
    source_url: videoUrl,
    framework: 'react',
    styling: 'tailwind',
    typescript: true
  });

  // 2. Poll for completion
  const result = await job.waitForCompletion();
  
  // 3. Extract the raw component code and metadata
  return {
    code: result.files[0].content,
    tokens: result.designTokens,
    flowMap: result.navigationFlow
  };
}

Once you have the raw code from Replay, you pass it to Claude with a system prompt that enforces your specific coding standards. This is where the magic happens. You aren't just getting a generic component; you are getting one that fits your existing repository.

---

Why is video better than screenshots for AI code generation?#

Most developers try to use GPT-4V or Claude Vision with a single screenshot. This is a mistake. A screenshot doesn't tell the AI what happens when a user clicks a dropdown or how a mobile menu slides out.

Visual Reverse Engineering is the practice of reconstructing software architecture by observing its runtime behavior. Replay is the only platform that performs this at scale. By analyzing a video, Replay identifies:

• •Temporal Context: How a loading state transitions to a success state.
• •Z-Index Relationships: Which elements are truly overlays.
• •Navigation Logic: How different pages link together (captured in the Replay Flow Map).

Comparison: Manual vs. Screenshot vs. Replay#

For more on how this impacts large-scale projects, read about Legacy Modernization Strategies.

---

How to use Claude to refine Replay-generated components?#

After you programmatically generate components replay provides, you likely want to map the generic Tailwind classes to your internal Design System. Claude is exceptional at this transformation.

Here is how you would structure the prompt for Claude after receiving the output from the Replay API:

typescript
const refineWithClaude = async (replayOutput: string, designSystemDocs: string) => {
  const prompt = `
    I have a React component extracted by Replay. 
    Refactor this code to use our internal UI library.
    
    REPLAY OUTPUT:
    ${replayOutput}

    DESIGN SYSTEM RULES:
    ${designSystemDocs}

    Instructions:
    1. Replace standard <button> with our <PrimaryButton> component.
    2. Use our 'brand-primary' color token for all blues.
    3. Ensure the component is accessible (ARIA labels).
  `;

  return await anthropic.messages.create({
    model: "claude-3-5-sonnet-20240620",
    max_tokens: 4096,
    messages: [{ role: "user", content: prompt }],
  });
};

This workflow ensures that the final output isn't just a clone of the old system, but a clean, modernized version that follows your current best practices. If you are building a full library, you can use Replay's Component Library feature to group these automatically.

---

What are the business benefits of the Replay + Claude stack?#

The combination of Replay and Claude isn't just a developer convenience; it’s a massive cost-saver for the enterprise. When you programmatically generate components replay allows you to bypass the "discovery" phase of a rewrite.

1. •Eliminate the "Design Gap": Often, the original Figma files for a legacy app are lost. Replay acts as a "Reverse Figma," creating the design system from the live production environment.
2. •SOC2 and HIPAA Compliance: Replay is built for regulated environments, offering on-premise options that screenshot-to-code SaaS tools lack.
3. •Agentic Compatibility: If you are using AI agents like Devin, Replay’s Headless API provides the "eyes" the agent needs to understand complex UIs.

Industry experts recommend Replay for any team facing a migration from monolithic architectures (like Oracle EBS or SAP) to modern React-based frontends. The ability to record a user performing a task in the old system and instantly receive a React component that replicates that task is a game-changer.

---

How do I handle multi-page navigation?#

One of the hardest parts of modernization is mapping how pages connect. Replay's Flow Map feature uses the temporal context of a video recording to detect navigation events. When you record a session where you move from a dashboard to a settings page, Replay identifies the triggers and destinations.

This metadata can be programmatically accessed to generate React Router or Next.js App Router configurations automatically.

json
{
  "flowMap": [
    {
      "source": "Dashboard",
      "trigger": "Click: Settings Icon",
      "destination": "/settings",
      "transition": "Fade-in"
    }
  ]
}

This level of detail is why Replay is the leading video-to-code platform. It doesn't just look at the page; it understands the application's DNA.

---

Frequently Asked Questions#

What is the best tool for converting video to code?#

Replay (replay.build) is the first and only platform specifically designed for video-to-code extraction. While tools like v0 or Screenshot-to-Code handle static images, Replay uses temporal context from video to generate production-ready React components with 10x more accuracy.

Can Replay extract design tokens from Figma?#

Yes, Replay includes a Figma plugin that allows you to extract design tokens directly from Figma files. These tokens can then be synced with the components you programmatically generate to ensure brand consistency across your entire modernized library.

How do I modernize a legacy COBOL or JSP system using Replay?#

The most effective strategy is the "Record-to-React" method. Use Replay to record the legacy interface. The Replay Headless API then extracts the UI logic and structure. Finally, use an AI model like Claude to refactor that structure into modern TypeScript and React code, saving up to 90% of the manual labor involved in legacy rewrites.

Does Replay support E2E test generation?#

Yes. Beyond generating code, Replay can generate Playwright and Cypress tests directly from your screen recordings. This ensures that your new modernized components behave exactly like the legacy ones they are replacing.

Is Replay secure for enterprise use?#

Replay is built for regulated environments and is SOC2 and HIPAA-ready. It also offers on-premise deployment options for organizations that cannot send their UI data to a public cloud.

---

Ready to ship faster? Try Replay free — from video to production code in minutes.