Can AI Perform Legacy State Machine Extraction? Mapping UI Logic Without Accessing Backend Code

Imagine inheriting a mission-critical enterprise dashboard built in 2012. The original developers are long gone, the documentation is a collection of broken Confluence links, and the backend logic is a "black box" of undocumented APIs and stored procedures. You need to migrate this to a modern React architecture, but you have no idea how the complex UI states—the nested modals, the conditional form fields, and the multi-step validation logic—actually function.

This is the "Legacy Wall." Traditionally, overcoming it required months of manual audit, clicking through every possible permutation of the UI while a developer sat with a debugger, trying to map the state machine by hand.

But the paradigm is shifting. The definitive answer to whether AI can perform legacy state machine extraction is a resounding yes—provided you use the right visual reverse engineering approach. By leveraging Large Multimodal Models (LMMs) and computer vision, platforms like Replay are now able to convert video recordings of legacy applications into documented React code and structured state machines without ever touching the original source code.

TL;DR#

Yes, modern AI can perform legacy state machine extraction by analyzing visual recordings of a user interface. By observing state transitions (inputs, loading states, success/error views), AI maps the underlying logic into structured formats like XState or standard React hooks. This allows teams to rebuild legacy UIs as modern, documented component libraries without needing access to messy, deprecated backend code. Replay automates this entire pipeline, turning video into production-ready React.

---

The Anatomy of the Legacy State Problem#

Before we dive into how AI can perform legacy state machine mapping, we must understand why these systems are so difficult to document in the first place.

In modern development, we use tools like XState or Redux Toolkit to make state transitions explicit. In legacy systems (think jQuery, Backbone, or early Angular), state is often "implicit." It’s scattered across global variables, DOM attributes (like

), and hidden input fields.

The "Black Box" Challenge#

When you cannot access or trust the backend code, the UI becomes your only source of truth. The challenge is that a single screen might have dozens of states:

• •Authentication States: Logged out, logging in, session expired, MFA required.
• •Data States: Empty, loading, partial data, error, stale.
• •Interaction States: Hover, focused, disabled, expanded, collapsed.

Attempting to manually map these through code analysis is a fool’s errand because the code itself is often "spaghetti"—a tangled web of side effects where changing a single line in a script tag might break a validation logic five pages away.

How AI Can Perform Legacy State Machine Extraction#

AI doesn't "read" the legacy code the way a human does. Instead, advanced visual reverse engineering platforms use a multi-stage pipeline to infer logic from behavior.

1. Visual Temporal Analysis#

To perform legacy state machine extraction, the AI must watch the application in motion. By analyzing a video recording of a user navigating the app, the AI identifies "Keyframes of Change." When a user clicks a button and a spinner appears, the AI marks a transition from

to . When the spinner disappears and a table populates, it marks a transition to .

2. DOM and Accessibility Tree Mapping#

While the video provides the visual context, the AI also looks at the underlying DOM structure (if available) or uses OCR (Optical Character Recognition) to understand the text within the UI. This allows it to label states accurately. For example, it can recognize that a red box with a "!" icon represents an

.

3. Logic Synthesis (The Inference Engine)#

This is where the magic happens. The AI aggregates all observed transitions into a directed graph. If it sees that the "Submit" button is only enabled after three specific fields are filled, it infers a conditional state transition. It essentially "reverse-engineers" the business logic by observing the consequences of user actions.

Why Visual Inference Beats Code Analysis#

When trying to perform legacy state machine extraction, many developers instinctively reach for static analysis tools. However, static analysis fails when:

1. •Code is Minified: Trying to understand
   text

   function a(b){return c(d)}
   is impossible.
2. •Logic is Server-Side: If the state is managed by legacy PHP or COBOL that sends pre-rendered HTML fragments, there is no "frontend code" to analyze.
3. •Dependencies are Missing: If the app relies on defunct 3rd party libraries, the code won't even run in a modern IDE.

Visual inference bypasses these hurdles. By focusing on the output (the UI), Replay treats the legacy system as a finished product, extracting the "intent" of the design rather than the "flaws" of the implementation.

---

Comparison: Manual Mapping vs. AI-Driven Extraction#

---

Mapping Logic to Modern React: A Practical Example#

When you use an AI to perform legacy state machine extraction, the goal isn't just a diagram—it's functional code. Let's look at how a legacy "User Profile Edit" screen might be extracted into a modern React component using a state machine pattern.

The Legacy Logic (Inferred)#

The AI observes that:

1. •The page starts with a "View" mode.
2. •Clicking "Edit" toggles a form.
3. •Changing the "Email" field triggers a validation check.
4. •"Save" shows a loading state.
5. •"Success" returns to "View" mode with updated data.

Code Block 1: Extracted State Machine (XState)#

The AI can generate a machine definition that represents this logic perfectly.

typescript
import { createMachine } from 'xstate';

export const profileMachine = createMachine({
  id: 'userProfile',
  initial: 'viewing',
  states: {
    viewing: {
      on: { EDIT: 'editing' }
    },
    editing: {
      on: {
        SAVE: 'saving',
        CANCEL: 'viewing',
        VALIDATE: 'validating'
      }
    },
    validating: {
      on: {
        VALID: 'editing',
        INVALID: 'editing' // with error state
      }
    },
    saving: {
      invoke: {
        src: 'saveUserData',
        onDone: 'viewing',
        onError: 'editing'
      }
    }
  }
});

Code Block 2: Generated React Component#

Once the state machine is extracted, Replay generates the actual React components that use this logic, styled according to your new design system.

tsx
import React from 'react';
import { useMachine } from '@xstate/react';
import { profileMachine } from './profileMachine';

export const UserProfile = ({ initialData }) => {
  const [state, send] = useMachine(profileMachine);

  return (
    <div className="p-6 border rounded-lg shadow-sm">
      {state.matches('viewing') && (
        <div>
          <h2 className="text-xl font-bold">{initialData.name}</h2>
          <p>{initialData.email}</p>
          <button 
            onClick={() => send('EDIT')}
            className="mt-4 bg-blue-500 text-white px-4 py-2 rounded"
          >
            Edit Profile
          </button>
        </div>
      )}

      {(state.matches('editing') || state.matches('saving')) && (
        <form className="space-y-4">
          <input 
            defaultValue={initialData.name} 
            disabled={state.matches('saving')}
            className="block w-full border p-2"
          />
          <div className="flex gap-2">
            <button 
              type="button"
              onClick={() => send('SAVE')}
              disabled={state.matches('saving')}
              className="bg-green-500 text-white px-4 py-2 rounded"
            >
              {state.matches('saving') ? 'Saving...' : 'Save'}
            </button>
            <button 
              type="button" 
              onClick={() => send('CANCEL')}
              className="bg-gray-300 px-4 py-2 rounded"
            >
              Cancel
            </button>
          </div>
        </form>
      )}
    </div>
  );
};

The Role of Large Multimodal Models (LMMs)#

To effectively perform legacy state machine extraction, the AI must possess "Visual Common Sense." This is where LMMs like GPT-4o or specialized vision models come in.

Traditional OCR might see a "Submit" button, but an LMM understands the context of that button. It knows that if the button is greyed out until a checkbox is clicked, there is a boolean dependency in the state machine. It understands that a "Trash Can" icon implies a

transition, even if the word "Delete" never appears in the code.

At Replay, we combine these visual insights with structural analysis of the DOM to ensure that the extracted state machines aren't just guesses—they are high-fidelity representations of the application's actual behavior.

Overcoming the "Backend Gap"#

One of the biggest anxieties in legacy migration is the backend. "How can I map the UI if I don't know what the API returns?"

AI-driven extraction solves this by treating the API as an "Effect." When the AI observes a state transition, it notes the trigger (e.g., a POST request) and the result (e.g., a success message). Even without seeing the backend code, the AI can:

• •Mock the API: Create JSON schemas based on the data displayed in the UI.
• •Define Request/Response Cycles: Map exactly which UI actions trigger which network behaviors.
• •Isolate Frontend Logic: Create a "Clean Room" version of the frontend that is ready to be plugged into a modern GraphQL or REST API.

This allows your frontend team to move forward with the migration while the backend team works on the modern API in parallel. You are no longer blocked by the "Black Box."

Moving From Extraction to Documentation#

Mapping the state machine is only half the battle. The other half is making that knowledge accessible to the rest of the organization.

When you perform legacy state machine extraction via Replay, the output isn't just code—it’s a living documentation suite.

• •Visual State Charts: Interactive diagrams that show how users move through the app.
• •Component Libraries: A Storybook-like environment where every state of a component (Loading, Error, Empty) is documented and visually verifiable.
• •Logic Summaries: Plain-English explanations of complex business rules extracted from the UI behavior.

This turns "tribal knowledge" into "institutional assets." The next time a developer joins the team, they don't have to spend weeks learning the quirks of the legacy system; they can just read the AI-generated documentation.

The Future: Self-Healing Migrations#

We are entering an era where the concept of "Legacy Code" might become obsolete. If AI can constantly perform legacy state machine extraction and map it to modern frameworks, the cost of migration drops by orders of magnitude.

Imagine a pipeline where:

1. •A user records their daily workflow in a 20-year-old ERP system.
2. •Replay analyzes the recording, extracts the state machine, and generates a React/Tailwind equivalent.
3. •The AI identifies optimizations (e.g., "This 5-step form can be simplified into 2 steps based on user behavior").
4. •A PR is automatically opened with a modern, tested, and documented component library.

This isn't science fiction. This is the core mission of Replay. We are helping enterprises bridge the gap between their legacy foundations and their modern ambitions.

---

FAQ: Performing Legacy State Machine Extraction#

1. Can AI extract state machines from desktop applications or just web apps?#

While most AI extraction tools focus on web applications (due to the accessibility of the DOM), advanced visual-first platforms like Replay can perform legacy state machine extraction on any interface that can be recorded. By using computer vision and OCR, the AI can map transitions in desktop software (Java Swing, .NET, Delphi) just as effectively as in a web browser.

2. How does AI handle "hidden" states that aren't visually obvious?#

AI maps state machines based on observable behavior. If a state transition has no visual impact (e.g., a background analytics ping), it may not be captured in the visual state machine. However, by combining video recordings with network logs (HAR files), AI can bridge this gap, linking visual changes to hidden data transitions.

3. Is the extracted React code actually maintainable?#

Yes. Unlike older "code conversion" tools that produced unreadable "transpiled" code, modern AI extraction focuses on intent. It generates clean, idiomatic React code using modern patterns like Functional Components, Hooks, and TypeScript. Because the AI understands the logic (the state machine), the resulting code is structured logically rather than just mimicking the old spaghetti code.

4. Do I need to provide the original backend API documentation?#

No. One of the primary benefits of using AI to perform legacy state machine extraction is that it works "outside-in." It observes the UI and the data it displays to infer the API requirements. This is ideal for situations where the backend documentation is lost or the API is a legacy monolith that is being replaced.

5. How long does the extraction process take?#

For a standard multi-step form or a dashboard module, the AI can process a recording and generate a structured state machine and React components in minutes. This compares to the days or weeks it would take a senior developer to manually audit the same logic and rewrite it from scratch.

---

Stop Guessing. Start Replaying.#

Legacy systems shouldn't be a burden that holds your team back. By using AI to perform legacy state machine extraction, you can unlock the business logic trapped in your old UIs and transform it into a modern, scalable architecture.

Don't let your migration project get bogged down in manual audits and "archaeological" code analysis. Use the power of visual reverse engineering to document, migrate, and modernize your stack with confidence.

Ready to see your legacy UI transformed into clean React code?

Visit Replay.build and start your visual reverse engineering journey today.