How to convert a UI video into a production-ready Remix app with authentication?

TL;DR: Replay converts UI screen recordings into a production-ready Remix application with Supabase authentication, saving development time and ensuring accurate user flow representation.

The dream of automatically generating code from visual input has been around for ages. While screenshot-to-code tools have offered a glimpse of this future, they often fall short when it comes to capturing the behavior behind the UI. They see the pixels, but they don't understand the flow. That's where Replay comes in.

Replay leverages Gemini to analyze videos of UI interactions, understanding user intent and reconstructing not just the visual layout, but also the underlying logic. This "Behavior-Driven Reconstruction" approach allows you to quickly generate production-ready code, complete with authentication, data fetching, and state management. Let's explore how to convert a UI video into a Remix app with Supabase authentication using Replay.

Understanding Behavior-Driven Reconstruction#

Traditional screenshot-to-code tools focus solely on the visual appearance of a UI. They can generate HTML and CSS based on a static image, but they lack the ability to understand the dynamic behavior of the application. Replay, on the other hand, analyzes video recordings of user interactions to understand the flow of the application. This includes:

• •Button clicks and form submissions
• •Navigation between pages
• •Data fetching and display
• •State management

By understanding these behaviors, Replay can generate code that accurately reflects the intended functionality of the UI.

Setting Up Your Remix Project and Supabase#

Before diving into Replay, you'll need a Remix project and a Supabase instance.

Step 1: Create a Remix Project#

If you don't already have a Remix project, you can create one using the following command:

bash
npx create-remix@latest my-remix-app

Choose the options that best suit your needs, such as TypeScript and Tailwind CSS.

Step 2: Set Up Supabase#

1. •Create a Supabase project at supabase.com.
2. •Retrieve your Supabase URL and anon key from your project settings.
3. •Install the Supabase client library in your Remix project:

bash
npm install @supabase/supabase-js

Step 3: Configure Environment Variables#

Create a

file in your Remix project and add your Supabase credentials:

text
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key

⚠️ Warning: Never commit your

text

.env

file to your repository.

Step 4: Create a Supabase Client#

Create a

file in your directory to initialize the Supabase client:

typescript
// app/supabase.server.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPABASE_URL!;
const supabaseKey = process.env.SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    persistSession: false, // Important for Remix server-side execution
  },
});

💡 Pro Tip: Setting

text

persistSession

to

text

false

is crucial for server-side environments like Remix.

Recording Your UI Flow#

Now, record a video of the UI flow you want to convert into code. Ensure the video clearly demonstrates:

• •Page navigation
• •Form interactions
• •User authentication (login/signup)
• •Data display

Keep the video concise and focused on the essential interactions.

Using Replay to Generate the Remix App#

With your video recorded and your Remix/Supabase setup complete, it's time to unleash Replay.

Step 1: Upload Your Video to Replay#

Upload the video to the Replay platform. Replay will start analyzing the video and identifying the different UI elements and interactions.

Step 2: Configure Replay Settings#

Specify that you want to generate a Remix application with Supabase authentication. Replay will use this information to tailor the generated code to your specific needs.

Step 3: Review and Adjust the Generated Code#

Once Replay has finished analyzing the video, it will present you with a code preview. Review the generated code and make any necessary adjustments. This is your chance to fine-tune the code and ensure it meets your exact requirements. Replay's UI is intuitive and allows for easy modification of components, data fetching logic, and styling.

Step 4: Download and Integrate the Code#

Download the generated code and integrate it into your Remix project. Replay will provide a well-structured codebase with clear separation of concerns.

Authentication Implementation#

Replay will generate the necessary code for user authentication using Supabase Auth. This includes:

• •Login and signup forms
• •Session management
• •Protected routes

Here's an example of how the authentication logic might look in your Remix route:

typescript
// app/routes/login.tsx
import { useState } from 'react';
import { useActionData, useNavigation } from '@remix-run/react';
import { ActionFunction, json, redirect } from '@remix-run/node';
import { supabase } from '~/supabase.server';

type ActionData = {
  formError?: string;
};

export const action: ActionFunction = async ({ request }) => {
  const form = await request.formData();
  const email = form.get('email') as string | null;
  const password = form.get('password') as string | null;

  if (!email || !password) {
    return json<ActionData>(
      { formError: 'Please fill in all fields.' },
      { status: 400 }
    );
  }

  const { error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) {
    return json<ActionData>(
      { formError: error.message },
      { status: 400 }
    );
  }

  return redirect('/');
};

export default function Login() {
  const actionData = useActionData<ActionData>();
  const navigation = useNavigation();
  const isSubmitting = navigation.state === 'submitting';
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <div>
      <h1>Login</h1>
      {actionData?.formError && (
        <p style={{ color: 'red' }}>{actionData.formError}</p>
      )}
      <form method="post">
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
        <button type="submit" disabled={isSubmitting}>
          {isSubmitting ? 'Logging in...' : 'Login'}
        </button>
      </form>
    </div>
  );
}

This example demonstrates how Replay-generated code integrates seamlessly with Remix's action and loader functions for authentication. Replay handles the complexities of setting up the necessary API endpoints and UI components, allowing you to focus on customizing the user experience.

Data Fetching and Display#

Replay also handles data fetching and display based on the interactions in the video. If the video shows data being fetched from an API, Replay will generate the necessary code to fetch and display that data in your Remix application. This includes:

• •API calls using
  text

  fetch
  or a similar library
• •Data transformations
• •Rendering data in the UI

Style Injection#

Replay allows injecting custom styles to match your design system. You can provide CSS or Tailwind CSS snippets, and Replay will intelligently apply them to the generated components. This ensures that the generated code seamlessly integrates with your existing design.

Comparison with Other Tools#

Here's a comparison of Replay with other code generation tools:

As the table shows, Replay offers a unique combination of video input, behavior analysis, and code quality, making it a powerful tool for developers.

Product Flow Maps#

Replay automatically generates product flow maps based on the video analysis. These maps visually represent the user journey through the application, making it easier to understand and optimize the user experience.

Benefits of Using Replay#

• •Speed up development: Generate code in seconds, not hours.
• •Improve accuracy: Capture the intended behavior of the UI.
• •Reduce errors: Eliminate manual coding mistakes.
• •Enhance collaboration: Share video recordings and generated code with your team.
• •Iterate faster: Quickly prototype and test new ideas.

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 usage. Check the Replay pricing page for details.

How is Replay different from v0.dev?#

v0.dev primarily focuses on generating UI components based on text prompts. Replay, on the other hand, analyzes video recordings of UI interactions to understand the behavior and generate complete applications. Replay excels at capturing user flows and complex interactions, while v0.dev is better suited for generating individual components.

What frameworks does Replay support?#

Currently, Replay supports Remix, React, and Next.js. Support for other frameworks is planned for the future.

Can I customize the generated code?#

Yes, Replay provides a code preview that allows you to review and adjust the generated code before downloading it. You can modify the components, data fetching logic, and styling to meet your specific requirements.

---

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