Supabase Integration

Capacity's Supabase integration allows you to seamlessly connect your applications to Supabase databases, enabling you to build powerful, data-driven applications with minimal setup.

Hero Light

What is Supabase?

Supabase is an open-source Firebase alternative that provides:

  • PostgreSQL Database: A fully managed, scalable PostgreSQL database
  • Real-time subscriptions: Live updates to your data
  • Authentication: Built-in user authentication and authorization
  • Edge Functions: Server-side functions for custom logic
  • Storage: File and media storage
  • Auto-generated APIs: Instant REST and GraphQL APIs

Why Connect Supabase to Capacity?

When you connect your Supabase project to Capacity, you unlock powerful capabilities:

Complete Backend Infrastructure

  • Unlock a real backend for your AI-generated applications - no setup required
  • Instant APIs - REST and GraphQL endpoints automatically generated from your database
  • Server-side functions with Supabase Edge Functions for custom backend logic
  • Built-in authentication system with multiple providers (Google, GitHub, email, etc.)
  • File storage and CDN for handling media uploads and assets
  • Database management with PostgreSQL's full power and SQL capabilities

Instant Database Integration

  • Your AI-generated applications automatically connect to your Supabase database
  • No manual configuration or connection string setup required
  • Database schema and relationships are automatically recognized

Secure by Default

  • API keys and connection details are securely managed
  • Row Level Security (RLS) policies are preserved and respected
  • Authentication flows work out of the box

Real-time Features

  • Applications can leverage Supabase's real-time subscriptions
  • Live data updates without additional configuration
  • WebSocket connections handled automatically

Getting Started

Prerequisites

Before connecting Supabase to Capacity, ensure you have:

  1. A Supabase account
  2. At least one Supabase project created
  3. A Personal Access Token from Supabase

Step 1: Generate a Personal Access Token

  1. Go to your Supabase Dashboard
  2. Navigate to Account Settings > Access Tokens or click here
  3. Click Generate new token Hero Light
  4. Give your token a descriptive name (e.g., "Capacity Integration")
  5. Copy the generated token (it starts with sbp_) Hero Light

Note:

Keep your Personal Access Token secure. Don't share it or commit it to version control.

Step 2: Connect Your Supabase Account

When Creating a New Project

  1. Start creating a new project in Capacity
  2. Look for the Supabase connection button in the project creation interface
  3. Click "Connect Supabase" or "Select Project" if you haven't connected any accounts yet Hero Light
  4. Enter your Personal Access Token in the dialog that appears
  5. Click "Connect" to authenticate Hero Light
  6. Select the Supabase project you want to use for this Capacity project
  7. Proceed with your project creation - your app will now have database capabilities!

From an Existing Project

  1. Open your project in Capacity
  2. Navigate to the project topbar
  3. Click the Supabase connection button
  4. If you haven't connected any accounts:
    • Click "Connect Supabase"
    • Enter your Personal Access Token
    • Click "Connect"
  5. Select the Supabase project you want to connect to this Capacity project

Step 3: Verify the Connection

Once connected, you should see:

  • Green indicator showing your connected Supabase project name
  • Project name displayed in the Supabase connection button
  • Database capabilities available in your AI prompts

Using Supabase in Your Projects

Database Operations

When your project is connected to Supabase, you can ask the AI to:

Create a user registration form that saves to the users table
Build a todo app with real-time updates using my tasks table
Add authentication to this app using Supabase Auth

Available Features

Your connected Supabase project provides access to:

  • All your database tables and views
  • Custom functions and stored procedures
  • Row Level Security policies
  • Real-time subscriptions
  • File storage buckets
  • Authentication providers

Example Prompts

Here are some example prompts that work great with Supabase integration:

User Management

Build a user profile page that lets users update their information in the profiles table. Include avatar upload to Supabase Storage.

Real-time Chat

Create a chat application using the messages table with real-time updates. Users should see new messages instantly.

Dashboard with Analytics

Build an admin dashboard that shows statistics from my orders and users tables. Include charts and real-time metrics.

E-commerce Store

Create a product catalog using my products table. Include shopping cart functionality and order processing.

Managing Connections

Multiple Supabase Accounts

You can connect multiple Supabase accounts to Capacity:

  1. Click the Supabase connection button
  2. Select "Connect Another Account" from the dropdown
  3. Enter the Personal Access Token for the new account
  4. Switch between accounts by selecting different projects from the dropdown

Project Selection

  • Each Capacity project can be connected to one Supabase project at a time
  • Switch projects anytime from the Supabase connection dropdown
  • Projects from different organizations are clearly labeled

Security Management

  • Tokens are encrypted and stored securely
  • Revoke access anytime by deleting tokens from your Supabase dashboard
  • Audit access by reviewing connection logs in Supabase

Troubleshooting

Common Issues

Connection failed
  • Verify your Personal Access Token is correct and hasn't expired
  • Ensure you have proper permissions in your Supabase organization
  • Check that your Supabase project is active and accessible
Can't see my project
  • Confirm you're using a token from the correct Supabase organization
  • Verify you have access to the project in Supabase dashboard
  • Try refreshing the organization data from the connection settings
Database queries not working
  • Check that your database tables are accessible
  • Verify Row Level Security policies allow the operations
  • Ensure the Supabase service role key is properly configured

Getting Help

If you're experiencing issues with the Supabase integration:

  1. Check the browser console for any error messages
  2. Verify your Supabase project status in the Supabase dashboard
  3. Test your connection by creating a simple database query
  4. Contact support through the Capacity dashboard if issues persist

Best Practices

Database Design

  • Use clear, descriptive table names for better AI understanding
  • Add comments to tables and columns to help AI generate better code
  • Follow PostgreSQL naming conventions for consistency
  • Set up proper relationships between tables using foreign keys

Security

  • Enable Row Level Security (RLS) on all tables containing user data
  • Use proper authentication policies for your application's needs
  • Regularly rotate Personal Access Tokens for enhanced security
  • Review and audit database access regularly

Performance

  • Add indexes on frequently queried columns
  • Use appropriate data types for optimal storage and query performance
  • Implement proper caching strategies in your applications
  • Monitor query performance through Supabase dashboard

Advanced Features

Real-time Subscriptions

Connected projects can leverage Supabase's real-time capabilities:

// AI can generate code like this automatically
const { data, error } = await supabase
  .from("messages")
  .select("*")
  .on("INSERT", (payload) => {
    console.log("New message:", payload.new);
  })
  .subscribe();

Edge Functions

Your Supabase Edge Functions are available for:

  • Custom API endpoints
  • Database triggers
  • Scheduled tasks
  • Third-party integrations

Custom Types

AI automatically generates TypeScript types based on your database schema:

// Generated automatically from your Supabase schema
interface User {
  id: string;
  email: string;
  created_at: string;
  profile: Profile;
}

Migration and Data Management

Existing Data

When connecting an existing Supabase project:

  • All existing data is immediately available
  • Schema changes are reflected in AI-generated code
  • Migrations can be handled through Supabase dashboard

Backup and Recovery

  • Supabase handles backups automatically
  • Point-in-time recovery available on Pro plans
  • Manual backups can be created before major changes

Ready to supercharge your applications with Supabase? Connect your account now and start building data-driven applications with AI assistance!