|
| 1 | +--- |
| 2 | +title: Using Supabase with Hypermode |
| 3 | +sidebarTitle: Supabase |
| 4 | +description: |
| 5 | + Connect your Hypermode agent to Supabase for real-time database operations |
| 6 | +--- |
| 7 | + |
| 8 | +<div className="flex items-center gap-3 mb-6"> |
| 9 | + <img |
| 10 | + src="/images/agents/connections/icons/supabase.svg" |
| 11 | + alt="Supabase" |
| 12 | + width={48} |
| 13 | + height={48} |
| 14 | + /> |
| 15 | + <div> |
| 16 | + <h2 className="text-2xl font-bold m-0">Supabase</h2> |
| 17 | + <p className="text-gray-600 m-0"> |
| 18 | + Open source PostgreSQL development platform |
| 19 | + </p> |
| 20 | + </div> |
| 21 | +</div> |
| 22 | + |
| 23 | +## Overview |
| 24 | + |
| 25 | +Supabase is an open source alternative to Firebase that provides a complete |
| 26 | +backend solution with PostgreSQL at its core. This guide will walk you through |
| 27 | +connecting your Hypermode agent to Supabase, enabling powerful database |
| 28 | +operations and real-time interactions. |
| 29 | + |
| 30 | +## Prerequisites |
| 31 | + |
| 32 | +Before connecting Supabase to Hypermode, you'll need: |
| 33 | + |
| 34 | +1. A [Supabase account](https://supabase.com/) |
| 35 | +2. A Supabase project with API credentials |
| 36 | +3. A [Hypermode workspace](https://hypermode.com/) |
| 37 | + |
| 38 | +## Setting up Supabase |
| 39 | + |
| 40 | +### Step 1: Create your Supabase account |
| 41 | + |
| 42 | +If you haven't already, sign up for a free Supabase account. |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +### Step 2: Generate API credentials |
| 47 | + |
| 48 | +Navigate to your project settings and create a new API key: |
| 49 | + |
| 50 | +1. Go to **Settings** → **API** in your Supabase dashboard |
| 51 | +2. Create a new service role key (this bypasses Row Level Security) |
| 52 | +3. Copy your project URL to extract the subdomain ID |
| 53 | + |
| 54 | + |
| 55 | + |
| 56 | +<Note> |
| 57 | + The subdomain ID is the part before `.supabase.co` in the project URL. For |
| 58 | + example, if the URL is `https://supa-project-id.supabase.co`, then the |
| 59 | + subdomain ID is `supa-project-id`. |
| 60 | +</Note> |
| 61 | + |
| 62 | +## Creating your Supabase agent |
| 63 | + |
| 64 | +### Step 1: Create a new agent |
| 65 | + |
| 66 | +From the Hypermode interface, create a new agent manually: |
| 67 | + |
| 68 | +1. Click the agent dropdown menu |
| 69 | +2. Select "Create new Agent" |
| 70 | + |
| 71 | + |
| 72 | + |
| 73 | +### Step 2: Configure agent settings |
| 74 | + |
| 75 | +Use these recommended settings for your Supabase agent: |
| 76 | + |
| 77 | +- **Agent Name**: SupaAgent |
| 78 | +- **Agent Title**: Connects to Supabase |
| 79 | +- **Description**: SupaAgent issues queries |
| 80 | +- **Instructions**: You have a connection to Supabase and various other |
| 81 | + developer tools to streamline data access and awareness |
| 82 | +- **Model**: GPT-4.1 |
| 83 | + |
| 84 | + |
| 85 | + |
| 86 | +### Step 3: View your agent profile |
| 87 | + |
| 88 | +Once created, navigate to your agent's settings page to see the profile: |
| 89 | + |
| 90 | + |
| 91 | + |
| 92 | +## Connecting to Supabase |
| 93 | + |
| 94 | +### Step 1: Add the Supabase connection |
| 95 | + |
| 96 | +Navigate to the **Connections** tab and add Supabase: |
| 97 | + |
| 98 | +1. Click "Add connection" |
| 99 | +2. Select "Supabase" from the dropdown |
| 100 | + |
| 101 | + |
| 102 | + |
| 103 | +### Step 2: Configure credentials |
| 104 | + |
| 105 | +Enter your Supabase credentials: |
| 106 | + |
| 107 | +- **Subdomain ID**: Your project reference `supa-project-id` |
| 108 | +- **Service Key**: Your service role key from Supabase |
| 109 | + |
| 110 | + |
| 111 | + |
| 112 | +<Warning> |
| 113 | + Keep your service key secure! This key bypasses Row Level Security and should |
| 114 | + never be exposed in client-side code. |
| 115 | +</Warning> |
| 116 | + |
| 117 | +## Setting up your database |
| 118 | + |
| 119 | +<Note> |
| 120 | + The Supabase connector allows you to query and manipulate data but doesn't |
| 121 | + modify schemas. You'll need to create your database schema directly in |
| 122 | + Supabase. |
| 123 | +</Note> |
| 124 | + |
| 125 | +### Step 1: Create your schema |
| 126 | + |
| 127 | +Navigate to the SQL editor in your Supabase dashboard and run this example |
| 128 | +schema: |
| 129 | + |
| 130 | +```sql |
| 131 | +-- 1. Movies Table |
| 132 | +CREATE TABLE IF NOT EXISTS public."Movies" ( |
| 133 | + id SERIAL PRIMARY KEY, |
| 134 | + title VARCHAR(255) NOT NULL, |
| 135 | + year INTEGER |
| 136 | +); |
| 137 | + |
| 138 | +-- 2. Actors Table |
| 139 | +CREATE TABLE IF NOT EXISTS public."Actors" ( |
| 140 | + id SERIAL PRIMARY KEY, |
| 141 | + name VARCHAR(255) NOT NULL |
| 142 | +); |
| 143 | + |
| 144 | +-- 3. MovieActors Join Table |
| 145 | +CREATE TABLE IF NOT EXISTS public."MovieActors" ( |
| 146 | + movie_id INTEGER NOT NULL REFERENCES public."Movies"(id) ON DELETE CASCADE, |
| 147 | + actor_id INTEGER NOT NULL REFERENCES public."Actors"(id) ON DELETE CASCADE, |
| 148 | + PRIMARY KEY (movie_id, actor_id) |
| 149 | +); |
| 150 | +``` |
| 151 | + |
| 152 | + |
| 153 | + |
| 154 | +### Step 2: View your schema |
| 155 | + |
| 156 | +Confirm your tables are created successfully: |
| 157 | + |
| 158 | + |
| 159 | + |
| 160 | +### Step 3: Update agent instructions |
| 161 | + |
| 162 | +For your agent to understand your database structure, update its instructions |
| 163 | +with your schema information: |
| 164 | + |
| 165 | + |
| 166 | + |
| 167 | +## Testing the connection |
| 168 | + |
| 169 | +### Test 1: Query empty tables |
| 170 | + |
| 171 | +Start a new thread and test with a simple query: |
| 172 | + |
| 173 | +```text |
| 174 | +Can you list the movies? |
| 175 | +``` |
| 176 | + |
| 177 | +You should see a Supabase tool call in the chat history, confirming the |
| 178 | +connection works: |
| 179 | + |
| 180 | + |
| 181 | + |
| 182 | +### Test 2: Insert data |
| 183 | + |
| 184 | +Now try adding data to your database: |
| 185 | + |
| 186 | +```text |
| 187 | +Can you add The Matrix 1999 and Neo the actor into my Supabase database? |
| 188 | +``` |
| 189 | + |
| 190 | + |
| 191 | + |
| 192 | +## What you can do |
| 193 | + |
| 194 | +With your Supabase connection established, your agent can: |
| 195 | + |
| 196 | +- **Query data** with complex filters and joins |
| 197 | +- **Insert, update, and delete** records |
| 198 | +- **Execute transactions** for data consistency |
| 199 | +- **Work with relationships** between tables |
| 200 | +- **Integrate with other tools** like GitHub, Slack, and Stripe |
| 201 | + |
| 202 | +## Best practices |
| 203 | + |
| 204 | +1. **Schema documentation**: Keep your agent's instructions updated with your |
| 205 | + current schema |
| 206 | +2. **Security**: Use Row Level Security policies for additional protection |
| 207 | +3. **Performance**: Create indexes for frequently queried columns |
| 208 | +4. **Error handling**: Your agent will handle common database errors gracefully |
| 209 | + |
| 210 | +## Learn more |
| 211 | + |
| 212 | +- [Supabase Documentation](https://supabase.com/docs) |
| 213 | +- [MCP Supabase Connector](https://mcp.pipedream.com/app/supabase) |
| 214 | +- [PostgreSQL Best Practices](https://www.postgresql.org/docs/current/index.html) |
| 215 | + |
| 216 | +<Tip> |
| 217 | + Combine Supabase with other Hypermode connections to build powerful workflows. |
| 218 | + For example, use GitHub to track code changes that affect your database, or |
| 219 | + Slack to notify your team of important data updates. |
| 220 | +</Tip> |
0 commit comments