How Replay AI generates code that is Redux and MobX, in the form of UI tests.

TL;DR: Replay AI generates robust UI code, including Redux and MobX implementations, directly from video analysis, ensuring testable and maintainable applications.

Stop Writing UI Tests, Start Recording Them#

The biggest bottleneck in modern web development isn't writing code, it's testing it. Specifically, writing UI tests that accurately reflect user behavior and prevent regressions. Traditional methods are time-consuming, error-prone, and often fail to capture the nuances of real-world user interactions. What if you could simply record a user flow and have that automatically translated into a working, tested UI?

That's the promise of Replay.

Replay leverages advanced video analysis and AI to reconstruct UI components and application logic directly from screen recordings. This "Behavior-Driven Reconstruction" approach allows you to generate code that is not only functional but also inherently testable, often including Redux or MobX implementations where appropriate.

Why Video-to-Code is a Game Changer#

Screenshot-to-code tools are a decent starting point, but they fundamentally misunderstand the problem. They focus on visual representation instead of user intention. Replay analyzes the video itself, understanding the sequence of actions, the data being manipulated, and the expected outcomes. This deeper understanding allows Replay to generate code that is more accurate, more maintainable, and more closely aligned with the actual user experience.

Replay's ability to infer state management patterns like Redux and MobX is particularly powerful. It means you get not just UI components, but also the underlying logic to manage application state, making your generated code immediately usable and scalable.

Replay in Action: Generating Redux Code from a Video#

Let's walk through a simplified example. Imagine you're recording a user interacting with a basic to-do list application. The user adds a few tasks, marks one as complete, and then deletes another. Here's how Replay might generate Redux code to handle this behavior:

Step 1: Video Analysis and Action Inference#

Replay analyzes the video and identifies the key user actions: adding a task, marking a task as complete, and deleting a task. It infers the data being manipulated (the to-do list) and the expected state changes.

Step 2: Redux Code Generation#

Based on the analysis, Replay generates Redux actions, reducers, and selectors to manage the to-do list state. Here's a simplified example:

typescript
// actions.ts
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const DELETE_TODO = 'DELETE_TODO';

interface AddTodoAction {
  type: typeof ADD_TODO;
  payload: string; // Task text
}

interface ToggleTodoAction {
  type: typeof TOGGLE_TODO;
  payload: number; // Task ID
}

interface DeleteTodoAction {
  type: typeof DELETE_TODO;
  payload: number; // Task ID
}

export type TodoActionTypes = AddTodoAction | ToggleTodoAction | DeleteTodoAction;

export const addTodo = (text: string): AddTodoAction => ({
  type: ADD_TODO,
  payload: text,
});

export const toggleTodo = (id: number): ToggleTodoAction => ({
  type: TOGGLE_TODO,
  payload: id,
});

export const deleteTodo = (id: number): DeleteTodoAction => ({
  type: DELETE_TODO,
  payload: id,
});

typescript
// reducers.ts
import { ADD_TODO, TOGGLE_TODO, DELETE_TODO, TodoActionTypes } from './actions';

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

let nextTodoId = 0;

export function todoReducer(state = initialState, action: TodoActionTypes): TodoState {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: nextTodoId++,
            text: action.payload,
            completed: false,
          },
        ],
      };
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map((todo) =>
          todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
        ),
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
}

This is a basic example, but it illustrates the core principle: Replay can automatically generate the Redux boilerplate needed to manage application state based on observed user behavior.

Step 3: UI Test Generation#

Replay goes a step further by generating UI tests that verify the Redux logic and UI components are working correctly. These tests are based on the original video recording, ensuring they accurately reflect the intended user experience. Using tools like Cypress or Playwright, the generated tests automatically replay the user's interaction, checking the state changes and UI updates.

MobX Support: An Alternative Approach#

Replay is not limited to Redux. If the video analysis suggests that MobX is a more appropriate state management solution, Replay can generate MobX stores and components instead. This flexibility allows you to choose the best state management approach for your specific application.

For example, Replay could generate a MobX store like this:

typescript
import { makeAutoObservable } from "mobx";

class TodoStore {
  todos: { id: number; text: string; completed: boolean }[] = [];
  nextId = 0;

  constructor() {
    makeAutoObservable(this);
  }

  addTodo(text: string) {
    this.todos.push({ id: this.nextId++, text, completed: false });
  }

  toggleTodo(id: number) {
    const todo = this.todos.find(todo => todo.id === id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  }

  deleteTodo(id: number) {
    this.todos = this.todos.filter(todo => todo.id !== id);
  }
}

const todoStore = new TodoStore();
export default todoStore;

This store can then be easily integrated into your React components using

from . Replay handles this integration seamlessly, generating the necessary code to connect your UI components to the MobX store.

Beyond Basic Examples: Complex Flows and Supabase Integration#

Replay isn't limited to simple to-do lists. It can handle complex multi-page flows, data validation, and even integration with backend services like Supabase.

For example, if the video shows a user submitting a form that saves data to a Supabase database, Replay can generate the necessary API calls and data models to replicate this behavior. This includes:

• •Supabase client initialization
• •API endpoint definitions
• •Data validation logic
• •Error handling

📝 Note: Replay supports injection of styles to allow for easy customization of the generated UI.

Addressing Common Concerns#

Some developers are skeptical of AI-generated code. Here are some common concerns and how Replay addresses them:

• •

  Code Quality: Replay generates clean, well-structured code that adheres to industry best practices. The generated code is designed to be easily readable and maintainable.

• •

  Accuracy: Replay's behavior-driven reconstruction approach ensures high accuracy. By analyzing the video itself, Replay captures the nuances of user behavior and generates code that accurately reflects the intended functionality.

• •

  Customization: Replay allows you to customize the generated code to meet your specific needs. You can modify the code directly or use Replay's style injection feature to apply custom styles.

• •

  Testability: Replay generates UI tests automatically, ensuring the generated code is thoroughly tested and reliable.

⚠️ Warning: While Replay significantly reduces development time, it's crucial to review and adapt the generated code to your specific project requirements.

Frequently Asked Questions#

Is Replay free to use?#

Replay offers a free tier with limited features. Paid plans are available for more advanced features and higher usage limits. Check the Replay website for the most up-to-date pricing information.

How is Replay different from v0.dev?#

v0.dev is a text-to-code tool, while Replay is a video-to-code engine. Replay analyzes user behavior from video recordings to generate more accurate and behaviorally-relevant code. Replay understands the intent behind the UI interactions, something a text-based prompt can't easily capture.

Can I use Replay with my existing codebase?#

Yes, Replay is designed to be integrated with existing codebases. You can generate code snippets and components and then integrate them into your project.

What frameworks does Replay support?#

Replay currently supports React, but support for other frameworks like Vue and Angular is planned for the future.

How secure is Replay?#

Replay uses industry-standard security measures to protect your data. Video recordings are processed securely and are not shared with third parties.

The Future of UI Development is Here#

Replay is revolutionizing UI development by making it faster, easier, and more accurate. By leveraging the power of video analysis and AI, Replay allows you to generate code that is not only functional but also inherently testable and maintainable. Stop writing UI tests manually, start recording them with Replay.

---

Ready to try behavior-driven code generation? Get started with Replay - transform any video into working code in seconds.