|Docs
Docs/Guides/Database Integration

Database Integration

Connect Supabase to generate UI that works with your real data.

Why Connect a Database?

By connecting your Supabase database, the AI understands your actual data structure. When you ask "create a users list", it generates code that fetches from your realusers table with correct column names.

What Replay Can Access

Read Access:

  • • Table names
  • • Column names and types
  • • Sample data (for schema inference)
  • • Row counts

No Write Access:

  • • Cannot modify data
  • • Cannot delete records
  • • Cannot alter schema
  • • Uses anon key only

Setup Guide

Step 1: Get Your Supabase Credentials

Go to your Supabase project → Settings → API. Copy the Project URL and anon/public key.

Step 2: Open Project Settings

In Replay, click the gear icon next to History to open Project Settings.

Step 3: Add Credentials

Go to the Secrets tab. Paste your SUPABASE_URL and SUPABASE_ANON_KEY. Click Save.

Step 4: Configure RLS

In Supabase, enable Row Level Security and create SELECT policies for tables you want Replay to see.

Step 5: Verify Connection

Go to the Database tab in Project Settings. You should see your tables listed.

Configuring Row Level Security

For Replay to see your tables, you need to enable RLS and create policies. Here's an example:

-- Enable RLS on the table
ALTER TABLE public.products ENABLE ROW LEVEL SECURITY;

-- Create a policy that allows SELECT for anonymous users
CREATE POLICY "Allow public read access"
ON public.products
FOR SELECT
TO anon
USING (true);

Only create read policies for data that's safe to expose. Don't expose sensitive user data.

Using Database Context with AI

Once connected, the AI automatically knows about your schema. Try prompts like:

"Create a product grid using my products table"

"Add a user profile section with data from profiles"

"Build a dashboard showing order statistics"

The generated code will include proper Supabase client initialization and queries:

<script>
  const supabase = supabase.createClient(
    'YOUR_SUPABASE_URL',
    'YOUR_ANON_KEY'
  );
  
  async function loadProducts() {
    const { data, error } = await supabase
      .from('products')
      .select('id, name, price, image_url');
    // ...
  }
</script>

Troubleshooting

Tables not showing?

Check that RLS is enabled AND you have a SELECT policy for the anon role.

Showing 0 rows?

Your RLS policy might be too restrictive. Try USING (true) for public data.

Invalid URL error?

Make sure your URL starts with https:// and ends with .supabase.co

Security Notes

  • Credentials are stored in your browser's localStorage - never sent to our servers
  • Only use the anon key - never the service role key
  • Generated code uses your credentials - review before publishing