Supabase Integration

CodePup AI comes with native Supabase integration, allowing you to build a complete backend directly from your conversation.
You can design pages, create databases, configure authentication, and deploy backend logic all through natural prompts.

This integration gives you the power to define both UI and backend behavior without switching tools or writing boilerplate setup code.
Describe what you want, and CodePup AI handles the rest.

About Supabase

Supabase is an open-source alternative to Firebase, offering a hosted PostgreSQL database, real-time updates, user authentication, file storage, and Edge Functions.

By connecting Supabase to your CodePup AI project, you instantly gain:

A production-ready backend
No boilerplate setup
No server configuration
Automatic schema creation when needed

Supabase also provides a clean dashboard to manage data, users, storage, and SQL queries - giving you full transparency and control.

Key Features Unlocked with Supabase

Database (PostgreSQL)

Store and query your app’s data with full SQL power.
CodePup AI auto-generates tables and schema based on your prompts.

User Authentication

Add sign-up/login flows backed by Supabase Auth.
CodePup AI wires everything automatically.

File Storage

Upload and serve images, documents, or any media using Supabase Storage.

Real-time Updates

Build live dashboards, chats, or activity streams with streaming data updates.

Edge Functions

Run custom backend logic using Supabase serverless functions.

Why Use CodePup AI’s Supabase Integration?

When building with CodePup AI, you don’t juggle separate tools for UI, backend, or database setup.
Your workflow becomes:

“Describe what you want → CodePup AI builds the UI + backend + database together.”

For example:
“Create an event registration website and store responses in the database.”
CodePup AI will:

Generate the full form UI
Create the required Supabase table
Connect the UI to your database
Handle storing form submissions
Deliver a ready-to-use end-to-end workflow

All in one step.
This unified generation process dramatically speeds up development and eliminates integration complexity.

Getting Started: Connect Supabase to CodePup AI

Connecting Supabase requires:

A Supabase account (free tier supported)
A CodePup AI project generated with backend support

1. Create a Supabase Account

2. Create an Organization

Inside Supabase, create your organization and project.
No credit card is required.

3. Connect Supabase to CodePup AI

To connect:

Start generating your project in CodePup AI and select the Interactive Website project type.
A modal will appear asking for your Supabase Access Token.
Enter the token and CodePup AI automatically links your project to your Supabase backend.
Within moments, you’ll see a confirmation message:
“Supabase connected”
Your project is now ready to use Supabase features such as:
- Authentication
- Database tables
- Row-Level Security
- File uploads
- Serverless functions

Adding User Authentication

Authentication is one of the most common Supabase features.
With CodePup AI, it’s fully automated.

Just say:
“Add login”

CodePup AI will generate:

Login page
Signup page
Supabase Auth integration code
Routing and protection rules
Demo admin account for access to admin pages

You can customize the styling or UX with additional prompts.

Managing Data with Supabase

Most apps revolve around data storage.
CodePup AI + Supabase make this extremely simple.

Creating Database Tables

Just describe the feature you want, for example:

“Add a testimonial submission form and store name, message, and rating.”

CodePup AI will:

Generate the form UI
Create a Supabase table
Connect form submission to the table automatically

Importing Data From Files

If you provide an Excel or CSV file, CodePup AI can load it into Supabase for you.
CodePup AI does not store your data. It is sent directly to Supabase.

Supabase Dashboard

Supabase offers a powerful dashboard:

Spreadsheet-like table viewer
SQL editor with AI assistance
Relationship and schema tools
Data import/export
Auth management
Storage browser

Everything remains fully customizable after CodePup AI sets it up.

File Storage (Images & Media)

If your app needs image uploads or media storage, Supabase Storage handles it.

For example:

“Add profile picture upload to the settings page.”

CodePup AI will:

Generate the upload UI
Store files in public/avatar-images (or chosen bucket)
Retrieve the file URL for display

Supabase free tier supports files up to 50MB.

Storing Secrets (API Keys & Config)

Many apps need sensitive keys (Stripe, OpenAI, Resend, etc.).
When Supabase is connected, CodePup AI provides a secure UI to store secrets.

These are stored in:

Supabase → Edge Function Secrets
Encrypted and never exposed on the client

When CodePup AI deploys backend functions, they automatically use these secrets securely.

Backend Logic with Edge Functions

When your app requires custom backend logic, CodePup AI can generate Supabase Edge Functions automatically using natural language prompts.

Common Uses:

Integrating with AI APIs (OpenAI, Claude, Gemini)
Sending emails (Resend, Mailgun)
Processing payments (Stripe)
Scheduled background tasks
Third-party API integrations
Heavy computation offloaded from the client

Example prompt:

“When a user submits feedback, analyze it with AI and save a sentiment score.”

CodePup AI will:

Write the Edge Function
Deploy it to your Supabase project
Update your frontend to call the function

No manual coding required.

Before Going Live

Supabase’s default security rules are permissive in development.
Before production, set up Row Level Security (RLS).

RLS ensures:

Users can only access their own data
Sensitive tables are protected
Authenticated rules apply correctly

You can prompt CodePup AI:

“Apply security rules so users can only edit their own records.”

Still, review them manually in:
Supabase Dashboard → Auth → Policies

FAQ

What does the Supabase integration do for my CodePup AI project?

Supabase gives your CodePup AI project a complete backend, including authentication, PostgreSQL database, file storage, real-time updates, and serverless functions.
CodePup AI automatically configures everything the moment you connect Supabase.

Do I need separate accounts for CodePup AI and Supabase?

Yes.
CodePup AI manages your project, while Supabase hosts your backend.
You only need to connect them once using your Supabase Access Token.

How do I connect Supabase to CodePup AI?

When you start a Full-Stack or Interactive Website project, CodePup AI will ask for your Supabase Access Token.
Enter it, and CodePup AI automatically links your project to your Supabase backend. No manual setup required.

Is Supabase scalable when my project grows?

Yes.
Supabase is built on PostgreSQL and scales from small side projects to production workloads.
You can begin on the free tier and upgrade when your app gains more users.

Can I add real-time features like chat, notifications, or live activity?

Absolutely.
Supabase offers real-time channels that stream database changes instantly.
CodePup AI can generate real-time features such as chat, live dashboards, or activity feeds by simply asking for them in a prompt.

Can CodePup AI handle large Excel data files for visualization?

Yes! CodePup AI can process large Excel or CSV files and integrate them with Supabase.

Here’s how it works:

Data Import: Upload your Excel or CSV file through CodePup AI.
Database Setup: CodePup AI automatically creates a corresponding table in Supabase and inserts all your data.
Visualization: Using SQL queries, CodePup AI can generate charts, tables, and dashboards directly in your UI.
Dynamic Updates: Any updates to the database can automatically reflect in the visualizations.

This allows you to turn raw data into interactive dashboards without writing backend code manually.

Is there a limit to file uploads using Supabase Storage?

Yes. On the free tier, Supabase allows uploads up to 50MB per file.
Paid plans increase this limit and allow advanced features like resumable large uploads.

How do I handle payments inside a CodePup AI + Supabase project?

CodePup AI can set up payments using Stripe, while Supabase Edge Functions securely store API keys and handle backend logic (e.g., checkout sessions or webhooks).
You only need to describe what you want, and CodePup AI generates the UI + backend functions.

Do I need to write SQL manually?

Not unless you want to.
CodePup AI generates tables automatically based on your prompts.
You can still use Supabase’s SQL Editor or AI SQL Assistant if you want full control.

Can CodePup AI manage secrets like API keys?

Yes.
When a feature requires a secret (e.g., Stripe, OpenAI), CodePup AI will open a modal where you can securely enter your keys.
These secrets are then stored safely in your Supabase Edge Function Secret Manager, ensuring they remain private and never exposed in your frontend.

Do I need to configure security or Row-Level Security (RLS)?

Supabase enables powerful RLS policies for production.
CodePup AI can generate basic policies on request (e.g., “Allow users to access only their own data”).
However, you should still review them in the Supabase dashboard before going live.

Can I import CSV or Excel data into my Supabase project?

Yes.
Supabase’s dashboard allows importing tables directly from CSV or Excel.
If you upload a file to CodePup AI, it can automatically generate tables and push your data into Supabase.