Add a Database to Any AI-Built Website or Web App With Supabase

Choose the Data

Pick one type of shared content to move into Supabase first — products, resources, posts, services, listings or FAQs.

Start with one type of data. Once the connection works, you can expand the database later. Use non-sensitive shared or public data for this guide. Private data that belongs to individual users needs authentication and access rules.

Plan the Database

Plan the Database

Tell AI what your app should store and let it design the smallest Supabase table needed for that data.

I want to move one type of data in this project into a Supabase database. The app should store: {{DATA_TYPE}} Each item needs information such as: {{DATA_FIELDS}} Right now this data is: {{CURRENT_DATA_SOURCE}} Before changing anything, inspect the current project and plan the smallest sensible database structure for this data. Identify: - What existing data or temporary data should move to Supabase - A simple table name - The columns the table actually needs - Appropriate data types - Which existing parts of the app currently display or use this data Keep the first database version simple. Do not create authentication. Do not add private user data. Do not add file storage. Do not create unnecessary tables or relationships. Do not change any project files yet. If the data I described appears private, sensitive, or owned by individual users, stop and tell me that this workflow needs authentication and access rules before connecting it to the browser. Otherwise, give me a simple database plan and explain it in beginner-friendly language.

What should the app store?

Products, resources, posts, services, listings...

What information does each item need?

For example: name, category, description, price, status...

Where is this data now?

Review the proposed table before continuing. The goal is one simple table for the first connection, not a complete database architecture.

Create a Supabase Project

Skip this if you already have a Supabase project for this app.

Open Supabase Create a new project if you do not already have one for this app Wait until the project is ready

Generate the Database Setup

Create the Supabase Setup

Generate the SQL needed for the table, sample data, and safe read-only access for this app.

Using the database plan we already confirmed, generate one Supabase SQL script that sets up the first database table for this project. The script should: - Create only the table we need for this workflow - Use a generated primary key - Add only the columns we agreed on - Use sensible defaults where appropriate - Add created_at if it is useful for this data - Insert one or two harmless sample records - Explicitly enable Row Level Security - Grant only the minimum Data API permission required for the app to read this public/shared data - Create the matching Row Level Security policy for public read access For this guide, browser access must remain read-only. Do NOT grant anonymous INSERT, UPDATE, or DELETE access. Do not disable Row Level Security. Do not create authentication. Do not create users, profiles, storage buckets, Edge Functions, or unrelated tables. Do not use destructive DROP statements. If a table with the same name already exists, warn me instead of deleting or replacing it. Use current Supabase conventions. Give me: 1. One complete SQL block I can run in the Supabase SQL Editor 2. One short explanation of what it creates Do not modify the application code yet.

Run the SQL

You do not need to read the SQL — just run it and check the result.

Open the SQL Editor in your Supabase project Create a new query Paste the generated SQL Run it Confirm the table and sample rows now appear

Prepare the Connection

Connect Supabase to the App

Set up the Supabase client for this project and tell me exactly which project values I need to add.

Connect this existing project to Supabase. Use the project's current framework and existing patterns. Requirements: - Use the current Supabase JavaScript client if appropriate for this project - Create one reusable Supabase client instead of duplicating connection code - Use environment variables appropriate to this project's framework - Use the Supabase Project URL - Use a Supabase Publishable key for browser/client access - Do not hardcode project values directly into source files - Do not use a Supabase Secret key in browser code - Do not add authentication - Do not change the design - Do not replace the app's existing data yet Prepare only the connection layer. When finished, tell me: - Which environment variable names you created or expect - Which file should contain the local values - Where I can get the Project URL and Publishable key in Supabase - Which project file now creates the Supabase client Do not ask me to paste a Secret key into client code. Do not make unrelated changes.

Add the Project Values

Copy the two values your project needs from Supabase.

Supabase Your project Connect

Copy the Project URL and the Publishable key, then add them using the environment variable names the AI prepared. If the app is already running locally, restart it so the new values load.

Load the App Data From Supabase

This is the change that makes the data real.

Load the App Data From Supabase

Replace the selected hardcoded or temporary data with real records loaded from the Supabase table.

Now replace the selected temporary or hardcoded data with data from the Supabase table we created. Use the existing Supabase connection. Update only the part of the application that uses this data. Requirements: - Load the records from the correct Supabase table - Preserve the existing interface and layout - Preserve the current data shape where practical - Add a simple loading state if the current UI needs one - Add a clear empty state if there are no records - Handle a database read error without breaking the whole page - Remove or stop using the old hardcoded/mock/local data for this specific feature once the Supabase data works Do not redesign the app. Do not add authentication. Do not add file uploads. Do not add unrelated features. Do not create anonymous database write access. If this part of the app already contains Create, Edit, or Delete controls, do not make them write anonymously to Supabase just to make them work. If secure write access would require authentication or a trusted server-side flow that the project does not currently have, leave those writes alone and tell me what should be added in a later workflow. Do not expose a Supabase Secret key in browser code. When finished, tell me: - Which temporary data source was replaced - Which Supabase table the app now reads - Which files changed - Whether any existing write actions should be handled in a later authentication or server-side workflow Keep the fix focused on this database connection.

Test the Database Yourself

The point is to prove the app is reading Supabase and not quietly using its old data.

Open the app and confirm the Supabase sample records appear

Refresh the page and confirm the data still appears

Change one harmless sample value in the Supabase Table Editor

Refresh the app and confirm the new value appears

Confirm the old hardcoded or mock value is no longer being used

Verify the Supabase Connection

Verify the Database Connection

Confirm that the app is really reading from Supabase and that the connection is using safe read-only client access.

Perform a focused final check of the Supabase database connection we just added. Verify: - The selected app data now comes from Supabase - The app is not silently falling back to the old hardcoded, mock, localStorage, or local-file data - The Supabase client uses the Project URL and Publishable key through the project's environment-variable pattern - No Supabase Secret key is exposed to browser code - Row Level Security is enabled on the table - Browser access is limited to the read operation this workflow needs - The app handles loading, empty, and read-error states appropriately - Refreshing the app still loads the database records Do not broaden this into a general Supabase security audit. Do not add authentication. Do not add new database features. Do not redesign the app. If something in this database connection is genuinely broken, fix only that issue. When finished, report: - Whether the Supabase connection is working - Whether the app is reading the real database data - Whether the client access remains read-only - Any next step that requires authentication or a server-side write workflow

Change one sample value in Supabase and refresh the app one last time. If the new value appears, the database connection is working.