Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 84 additions & 0 deletions apps/design-system/components/color-palette.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
'use client'

import { useState } from 'react'

const colorNames = [
'Amber',
'Blue',
'Brand',
'Crimson',
'Gold',
'Gray',
'Green',
'Indigo',
'Orange',
'Pink',
'Purple',
'Red',
'Scale',
'Slate',
'Tomato',
'Violet',
'Yellow',
]

const SCALE_STEPS = Array.from({ length: 12 }, (_, i) => i + 1)

const GRID_COLS = 'grid-cols-[6rem_repeat(12,minmax(0,1fr))]'

const ColorPalette = () => {
const [copied, setCopied] = useState<string | null>(null)

const handleCopy = async (value: string) => {
try {
await navigator.clipboard.writeText(value)
setCopied(value)
setTimeout(() => setCopied(null), 1500)
} catch (err) {
console.error('Failed to copy text: ', err)
}
}

return (
<div className="my-6 w-full">
<div className="flex min-w-[640px] flex-col gap-1">
<div className={`grid gap-1 ${GRID_COLS}`}>
<div />
{SCALE_STEPS.map((step) => (
<div key={step} className="text-center font-mono text-[10px] text-foreground-lighter">
{step}
</div>
))}
</div>
{colorNames.map((name) => {
const slug = name.toLowerCase()
return (
<div key={slug} className={`grid items-center gap-1 ${GRID_COLS}`}>
<div className="pr-2 text-sm font-medium text-foreground">{name}</div>
{SCALE_STEPS.map((step) => {
const reference = `var(--colors-${slug}${step})`
const isCopied = copied === reference
return (
<button
key={step}
type="button"
onClick={() => handleCopy(reference)}
className="group relative flex aspect-square w-full items-center justify-center rounded-sm border border-overlay/40 transition hover:scale-[1.05] focus:outline-none focus-visible:ring-2 focus-visible:ring-foreground"
style={{ backgroundColor: reference }}
title={reference}
>
<span className="rounded-xs bg-surface-100/90 px-1 font-mono text-[10px] text-foreground-light opacity-0 transition group-hover:opacity-100">
{isCopied ? 'Copied!' : step}
</span>
</button>
)
})}
</div>
)
})}
</div>
</div>
)
}

export { ColorPalette }
2 changes: 2 additions & 0 deletions apps/design-system/components/mdx-components.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import { StyleWrapper } from './style-wrapper'
import { Callout } from '@/components/callout'
import { CodeBlockWrapper } from '@/components/code-block-wrapper'
import { CodeFragment } from '@/components/code-fragment'
import { ColorPalette } from '@/components/color-palette'
import { Colors } from '@/components/colors'
import { ComponentExample } from '@/components/component-example'
import { ComponentPreview } from '@/components/component-preview'
Expand Down Expand Up @@ -265,6 +266,7 @@ const components = {
/>
),
Colors,
ColorPalette,
Icons,
ThemeSettings,
CodeFragment,
Expand Down
7 changes: 7 additions & 0 deletions apps/design-system/content/docs/color-usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,3 +69,10 @@ This is not to be confused with `Dialogs`, they require to use the same app back
These can also be accessed with `foreground`. Like `text-foreground-light`.

<Colors definition={'colors'} />

## Color palette

Every Radix scale exposed via `--colors-{name}{1..12}`. Click a swatch to copy the CSS variable reference. The colors are taken
from `@radix-ui/colors` v0.1.9 except the `Brand` and `Scale` colors.

<ColorPalette />
8 changes: 4 additions & 4 deletions apps/docs/spec/supabase_dart_v2.yml
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ functions:
isOptional: false
type: string
description: The unique Supabase URL which is supplied when you create a new project in your project dashboard.
- name: anonKey
- name: publishableKey
isOptional: false
type: string
description: The unique Supabase Key which is supplied when you create a new project in your project dashboard.
description: The publishable (anon) key supplied when you create a new project in your project dashboard. Use this for client-side apps. The deprecated `anonKey` parameter is still accepted but `publishableKey` takes precedence when both are supplied.
- name: headers
isOptional: true
type: Map<String, String>
Expand Down Expand Up @@ -94,7 +94,7 @@ functions:
Future<void> main() async {
await Supabase.initialize(
url: 'https://xyzcompany.supabase.co',
anonKey: 'publishable-or-anon-key',
publishableKey: 'your-publishable-key',
);

runApp(MyApp());
Expand All @@ -109,7 +109,7 @@ functions:
```dart
final supabase = SupabaseClient(
'https://xyzcompany.supabase.co',
'publishable-or-anon-key',
'your-secret-key', // use your secret key for server-side usage
);
```

Expand Down
142 changes: 142 additions & 0 deletions apps/docs/spec/supabase_py_v2.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3706,6 +3706,8 @@ functions:

- id: insert
title: 'Create data: insert()'
notes: |
- Chain `.select()` after `insert()` to return specific columns from the inserted row(s).
params:
- name: json
isOptional: false
Expand Down Expand Up @@ -3796,10 +3798,41 @@ functions:
A bulk create operation is handled in a single transaction.
If any of the inserts fail, none of the rows are inserted.
hideCodeBlock: true
- id: insert-with-select
name: Insert and return selected columns
code: |
```python
response = (
supabase.table("planets")
.insert({"id": 1, "name": "Pluto"})
.select("id, name")
.execute()
)
```
data:
sql: |
```sql
create table
planets (id int8 primary key, name text);
```
response: |
```json
{
"data": [
{
"id": 1,
"name": "Pluto"
}
],
"count": null
}
```
hideCodeBlock: true
- id: update
title: 'Modify data: update()'
notes: |
- `update()` should always be combined with [Filters](/docs/reference/python/using-filters) to target the item(s) you wish to update.
- Chain `.select()` after `update()` to return specific columns from the updated row(s).
params:
- name: json
isOptional: false
Expand Down Expand Up @@ -3891,10 +3924,47 @@ functions:
description: |
Postgres offers some [operators](/docs/guides/database/json#query-the-jsonb-data) for working with JSON data. Currently, it is only possible to update the entire JSON document.
hideCodeBlock: true
- id: update-with-select
name: Update and return selected columns
code: |
```python
response = (
supabase.table("instruments")
.update({"name": "piano"})
.eq("id", 1)
.select("id, name")
.execute()
)
```
data:
sql: |
```sql
create table
instruments (id int8 primary key, name text);

insert into
instruments (id, name)
values
(1, 'harpsichord');
```
response: |
```json
{
"data": [
{
"id": 1,
"name": "piano"
}
],
"count": null
}
```
hideCodeBlock: true
- id: upsert
title: 'Upsert data: upsert()'
notes: |
- Primary keys must be included in the `values` dict to use upsert.
- Chain `.select()` after `upsert()` to return specific columns from the upserted row(s).
params:
- name: json
isOptional: false
Expand Down Expand Up @@ -4041,6 +4111,41 @@ functions:
In the following query, `upsert()` implicitly uses the `id`(primary key) column to determine conflicts. If there is no existing row with the same `id`, `upsert()` inserts a new row, which will fail in this case as there is already a row with `handle` `"saoirse"`.
Using the `on_conflict` option, you can instruct `upsert()` to use another column with a unique constraint to determine conflicts.
hideCodeBlock: true
- id: upsert-with-select
name: Upsert and return selected columns
code: |
```python
response = (
supabase.table("instruments")
.upsert({"id": 1, "name": "piano"})
.select("id, name")
.execute()
)
```
data:
sql: |
```sql
create table
instruments (id int8 primary key, name text);

insert into
instruments (id, name)
values
(1, 'harpsichord');
```
response: |
```json
{
"data": [
{
"id": 1,
"name": "piano"
}
],
"count": null
}
```
hideCodeBlock: true

- id: delete
title: 'Delete data: delete()'
Expand All @@ -4052,6 +4157,7 @@ functions:
no rows are visible, so you need at least one `SELECT`/`ALL` policy that
makes the rows visible.
- When using `delete().in_()`, specify an array of values to target multiple rows with a single query. This is particularly useful for batch deleting entries that share common criteria, such as deleting users by their IDs. Ensure that the array you provide accurately represents all records you intend to delete to avoid unintended data removal.
- Chain `.select()` after `delete()` to return specific columns from the deleted row(s).
params:
- name: count
isOptional: true
Expand Down Expand Up @@ -4142,6 +4248,42 @@ functions:
```
hideCodeBlock: false
isSpotlight: false
- id: delete-with-select
name: Delete and return selected columns
code: |
```python
response = (
supabase.table("countries")
.delete()
.eq("id", 1)
.select("id, name")
.execute()
)
```
data:
sql: |
```sql
create table
countries (id int8 primary key, name text);

insert into
countries (id, name)
values
(1, 'Mordor');
```
response: |
```json
{
"data": [
{
"id": 1,
"name": "Mordor"
}
],
"count": null
}
```
hideCodeBlock: true

- id: rpc
title: 'Postgres functions: rpc()'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,6 @@ export const ThirdPartyAuthForm = () => {
<AddIntegrationDropdown
align="center"
type="default"
open={addIntegrationOpen}
onOpenChange={setAddIntegrationOpen}
onSelectIntegrationType={setSelectedIntegration}
/>
</EmptyStatePresentational>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
title: 'Supabase Is Now an Official ChatGPT App'
description: 'Connect your Supabase projects to ChatGPT and manage your database infrastructure by telling ChatGPT what you need.'
author: gregnr
date: '2026-05-08'
categories:
- product
tags:
- ai
- chatgpt
- integrations
imgSocial: 'https://zhfonblqamxferhoguzj.supabase.co/functions/v1/generate-og?template=partnerships&layout=icon-text&copy=Supabase+is+now%0A%5Ban+official+ChatGPT+app%5D&icon=supabase.svg&icon2=openai.svg'
imgThumb: 'https://zhfonblqamxferhoguzj.supabase.co/functions/v1/generate-og?template=partnerships&layout=icon-only&icon=supabase.svg&icon2=openai.svg'
toc_depth: 2
---

Supabase is now an official app in ChatGPT. Connect your Supabase projects and manage your entire database infrastructure by telling ChatGPT what you need.

With the Supabase ChatGPT app, you can execute SQL queries, modify schemas, deploy edge functions, manage branches, and troubleshoot your projects without leaving your conversation with ChatGPT.

Ask ChatGPT to check security advisors on your project and fix any issues. Request a schema change and ChatGPT executes it. Deploy an edge function with a single prompt.

<div className="video-container">
<iframe
className="w-full"
src="https://www.youtube-nocookie.com/embed/VQBunqH0yZg"
title="Supabase ChatGPT App"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture; web-share"
allowfullscreen
/>
</div>

## What you can do

The Supabase ChatGPT app includes 29 tools:

- **Database management**: Execute SQL queries on Postgres databases, design and modify table schemas, list tables and extensions, get security recommendations.
- **Project operations**: List and create projects, get cost estimates, pause and restore projects, access real-time logs.
- **Branching and migrations**: Create development branches, merge changes, rebase and reset branches, list and apply migrations.
- **Edge functions**: List, deploy, and manage serverless functions.
- **Documentation**: Search Supabase docs directly from ChatGPT.

You can also pair the app with [ChatGPT Projects](https://help.openai.com/en/articles/10169521-projects-in-chatgpt) to scope a conversation to a specific Supabase project. Set your project reference in the project instructions once, and every chat in that project connects to the right database automatically.

## Getting started

In ChatGPT, open the app directory and search for Supabase, or go directly to [the app listing](https://chatgpt.com/apps/supabase/asdk_app_69d3e5ee6a708191baa733f7b8931995). Authorize ChatGPT to access your Supabase organization.

![Supabase app authorization screen in ChatGPT](/images/blog/2026-05-08-supabase-is-now-an-official-chatgpt-app/screenshot.png)

The app works on all Supabase plans and paid ChatGPT plans (Plus, Pro, Team, Enterprise).

If you don't have a Supabase account yet, start your project for free at [supabase.com](https://supabase.com/). Then connect it to ChatGPT and manage your projects by describing what you need.

Read the documentation at [supabase.com/docs/guides/getting-started/mcp](https://supabase.com/docs/guides/getting-started/mcp).
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading