|Docs
Docs/Integrations/Supabase

Supabase Integration

Connect your Supabase database to generate code that works with your real data.

Overview

When you connect Supabase, Replay AI can see your database schema (table names, columns, types) and generate frontend code that fetches real data. Instead of mock data, you get actual supabase.from().select() calls.

Setup

1

Get your Supabase credentials

Go to your Supabase Dashboard → Project Settings → API

Project URLhttps://xxxxx.supabase.co
anon public keyeyJhbGciOiJIUzI1NiIs...
2

Add credentials to Replay

Open Project Settings ( icon) → Secrets tab

  • Paste your SUPABASE_URL
  • Paste your SUPABASE_ANON_KEY
  • Click Save Secrets
3

Configure Row Level Security

Important: RLS blocks access by default

If your tables show 0 rows, you need to add RLS policies.

Run this SQL in Supabase Dashboard → SQL Editor:

-- Allow public read access to your tables
CREATE POLICY "Allow public read"
ON profiles FOR SELECT
USING (true);

-- Repeat for other tables you want to expose:
CREATE POLICY "Allow public read"
ON products FOR SELECT
USING (true);
4

Verify connection

Go to Project Settings → Database tab. You should see:

Connected to Supabase

Your tables will be listed with row counts.

Using Database in AI Prompts

Once connected, mention your tables in Edit with AI prompts:

"Show all users from my profiles table"

→ AI generates: supabase.from('profiles').select('*')

"Create a product grid using data from products table"

→ AI generates fetch code with your actual column names

Generated Code Example

<div x-data="{
  users: [],
  loading: true,
  async init() {
    const SUPABASE_URL = localStorage.getItem('replay_supabase_url');
    const SUPABASE_KEY = localStorage.getItem('replay_supabase_key');
    const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
    
    const { data } = await supabase.from('profiles').select('*');
    this.users = data || [];
    this.loading = false;
  }
}">
  <div x-show="loading">Loading...</div>
  <template x-for="user in users" :key="user.id">
    <div class="p-4 border rounded">
      <p x-text="user.email"></p>
      <p x-text="user.created_at"></p>
    </div>
  </template>
</div>

Security Notes

Keys are stored locally. Your Supabase credentials are saved in your browser's localStorage, not on our servers.

Use anon key only. Never use your service_role key in frontend code. The anon key is safe for client-side use.

RLS protects your data. Row Level Security ensures users can only access data they're allowed to see.