# Tutorial: How to connect Supabase database to your Bind AI application

This tutorial will walk you through connecting a Supabase database to your web application, step by step. No technical background required!

\
**What is Supabase?**

Supabase is a free database service that lets you store and manage data for your applications without setting up complex servers. Think of it as a digital filing cabinet that your website can read from and write to.

Part 1: Creating Your Supabase Account and Database

#### Step 1: Sign Up for Supabase

1. Go to [supabase.com](https://supabase.com/)
2. Click **"Start your project"**
3. Sign up with your GitHub account or email
4. Verify your email if required

#### Step 2: Create a New Project

1. Once logged in, click **"New Project"**
2. Choose your organization (usually your username)
3. Fill in the project details:
   * **Name**: Give your project a memorable name (e.g., "My App Database")
   * **Database Password**: Create a strong password and **save it somewhere safe**
   * **Region**: Choose the region closest to your users
4. Click **"Create new project"**
5. Wait 2-3 minutes for the project to be set up

***

### Part 2: Creating Your Database Table

#### Step 3: Create a Table

1. In your Supabase dashboard, click **"Table Editor"** in the left sidebar
2. Click **"Create a new table"**
3. Fill in the table details:
   * **Name**: Enter your table name (e.g., "workflows")
   * **Description**: Optional description of what this table stores
4. Click **"Save"**

#### Step 4: Add Columns to Your Table

Your table needs columns to store different types of data. Here's how to add them:

1. Click **"New Column"** button
2. For each column, fill in:
   * **Name**: The column name (e.g., "name")
   * **Type**: Choose the data type:
     * `text` - for names, descriptions, short text
     * `bigint` - for numbers (IDs, counts)
     * `jsonb` - for complex data structures
     * `timestamp with time zone` - for dates and times
   * **Default Value**: Leave blank unless you want a default
   * **Primary Key**: Only check this for your ID column
3. Click **"Save"**

**Example columns for a workflows table:**

* `id` (bigint, Primary Key) - Auto-generated unique identifier
* `created_at` (timestamp with time zone) - When the record was created
* `name` (text) - The workflow name
* `workflow_data` (jsonb) - Additional workflow information

> **Tip**: Supabase automatically creates `id` and `created_at` columns when you create a new table. You just need to add your custom columns!

***

### Part 3: Getting Your Connection Details

#### Step 5: Find Your Project URL and API Key

1. In your Supabase dashboard, click **"Settings"** in the left sidebar
2. Click **"API"** under Settings
3. You'll see two important pieces of information:
   * **Project URL**: Looks like `https://abcdefg.supabase.co`
   * **Public anon key**: A long string starting with `eyJ...`
4. **Copy both values** - you'll need them in your code

> **Important**: The "anon" key is safe to use in your website code. Never use the "service\_role" key in browser code!

***

### Part 4: Disable Row Level Security (For Beginners)

#### Step 6: Turn Off RLS (Row Level Security)

Row Level Security can prevent your app from saving data. For learning purposes, we'll disable it:

1. Go to **"Authentication"** in the left sidebar
2. Click **"Policies"**
3. Find your table (e.g., "workflows")
4. You'll see a toggle switch for **"Enable RLS"**
5. Click to **turn it OFF**
6. Confirm when prompted

> **Note**: In production apps, you should enable RLS and create proper policies for security. But for learning, turning it off makes things simpler.

***

**Part 5: Connecting to Your Application**

#### Step 7: Add Supabase to Your Code

**Option A: Use AI to Generate the Code (Recommended for Beginners)**

Instead of writing code manually, you can ask AI to create it for you. Try out these test prompts to create a simple html file and save data to Supabase :

**Prompt 1 - Generate Basic HTML Form:**

```css
Create a simple HTML form with a text input for "name" and a submit button. Include the Supabase JavaScript library from CDN and link to a script.js file.
```

**Prompt 2 - Generate Supabase JavaScript Code:**

```css
Create JavaScript code that connects to Supabase and saves form data to a table called "workflows" with columns: name (text) and workflow_data (jsonb). Include proper error handling and success messages. Use placeholder values for the Supabase URL and API key that I can replace later.
```

**Option B: Manual Setup (If you prefer to type)**

If you want to add Supabase manually, add this line before your closing `</body>` tag in your HTML:

```html
Html<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
```

#### Step 8: Update Your Supabase Credentials

After the AI generates your code (or if you wrote it manually), you need to replace the placeholder values:

1. **Find your JavaScript file** (usually named `script.js`)
2. **Look for these lines** at the top of the file:

   ```javascript
   Javascriptconst SUPABASE_URL = 'YOUR-SUPABASE-URL-HERE';
   const SUPABASE_ANON_KEY = 'YOUR-SUPABASE-ANON-KEY-HERE';
   ```
3. **Replace the placeholder text** with your actual values from Step 5:
   * Replace `'YOUR-SUPABASE-URL-HERE'` with your Project URL (keep the quotes)
   * Replace `'YOUR-SUPABASE-ANON-KEY-HERE'` with your anon key (keep the quotes)

**Example of what it should look like:**

```javascript
Javascriptconst SUPABASE_URL = 'https://iloddfdekwsnrxpncwnhlgz.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NidfdfIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imlsb2Rla3dzbnJ4cG5jd25obGd6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDgxNTA4OTcsImV4cCI6MjA2MzcyNjg5N30.7K2yOrXEqZ3e7H1yyVQyc3hSntQNUp7WI3pbLrePqQc';
```

#### Step 9: Update Table and Column Names

If your table or column names are different from what the AI generated:

1. **Find the table name** in your JavaScript code - look for something like:

   ```javascript
   Javascript.from('workflows')
   ```

   Replace `'workflows'` with your actual table name
2. **Find the column names** in the insert section - look for something like:

   ```javascript
   Javascript.insert({
       name: name,
       workflow_data: {}
   })
   ```

   Update the column names to match your actual columns

***

\
\
**Common Issues and Solutions**

#### Issue 1: "Invalid API key" or Connection Errors

**Symptoms**: Error messages about invalid keys or failed connections

**Solutions**:

* Double-check your URL and anon key from the Supabase dashboard
* Make sure there are no extra spaces or missing characters
* Verify you're using the **anon** key, not the service\_role key

#### Issue 2: Data Not Saving (No Error Messages)

**Symptoms**: Form submits but nothing appears in your Supabase table

**Solutions**:

1. **Check Row Level Security**: Make sure RLS is disabled (see Step 6)
2. **Verify table and column names**: They must match exactly (case-sensitive)
3. **Check browser console**: Press F12, look for error messages in the Console tab

#### Issue 3: "Permission Denied" Errors

**Symptoms**: Error messages about permissions or access denied

**Solutions**:

* Ensure Row Level Security is disabled
* Verify you're using the correct anon key
* Check that your table exists and column names are correct

#### Issue 4: "Column does not exist" Errors

**Symptoms**: Error messages about missing columns

**Solutions**:

* Check spelling of column names in your code
* Verify the columns exist in your Supabase table
* Column names are case-sensitive

#### Issue 5: Wrong Data Types

**Symptoms**: Errors about data type mismatches

**Solutions**:

* Don't manually set `id` values if using bigint auto-increment
* Ensure JSON data is properly formatted for jsonb columns
* Match text data to text columns, numbers to numeric columns

***

### Testing Your Connection

#### Step 10: Verify Everything Works

1. **Test the connection**: Try saving a simple record through your form
2. **Check Supabase**: Go to your Table Editor and see if the data appears
3. **Check browser console**: Press F12 and look for any error messages
4. **Check Supabase logs**: In your dashboard, go to "Logs" → "API" to see request logs

***

### Quick Troubleshooting Checklist

When something isn't working, check these in order:

1. ✅ **URL and Key**: Are they copied correctly from Supabase dashboard?
2. ✅ **Table Name**: Does it match exactly (case-sensitive)?
3. ✅ **Column Names**: Do they match your table schema?
4. ✅ **RLS**: Is Row Level Security disabled?
5. ✅ **Browser Console**: Any error messages when you submit?
6. ✅ **Supabase Logs**: Any failed requests in the API logs?

***

### Next Steps

Once you have basic connectivity working:

1. **Learn about Row Level Security**: Enable it and create policies for better security
2. **Add more features**: Reading data, updating records, deleting records
3. **User authentication**: Let users log in and manage their own data
4. **Real-time updates**: Subscribe to database changes

Congratulations! You now have a working database connection. Start simple and build up your features gradually.<br>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bind-ai.gitbook.io/docs/ide-by-bind-ai/tutorial-how-to-connect-supabase-database-to-your-bind-ai-application.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.