diff --git a/apps/docs/content/_partials/quickstart_db_setup.mdx b/apps/docs/content/_partials/quickstart_db_setup.mdx
index e639c4e05c8..08e577f4446 100644
--- a/apps/docs/content/_partials/quickstart_db_setup.mdx
+++ b/apps/docs/content/_partials/quickstart_db_setup.mdx
@@ -25,72 +25,33 @@ using (true);`
## 1. Create a Supabase project
-Before you can use Supabase, you need a Supabase project. You can create a project visually in the Dashboard or programmatically using [the Management API](/docs/reference/api/introduction).
-
-
-
-
+To start, you need a Supabase project.
Create a new Supabase project from [the Dashboard of any organization](/dashboard/new/_) you belong to.
-
+
-You can also use [database.new](https://database.new) to create a new Supabase project.
+Use [the Management API](/docs/reference/api/v1-create-a-project) or ask [the MCP server](/docs/guides/ai-tools/mcp#account-management) to create a new Supabase project.
-
-
-
-
-First, get your access token from the [**Account Settings > Access Tokens**](/dashboard/account/tokens) section of the Dashboard.
-
-Then create a project using [the Management API](/docs/reference/api/introduction):
-
-```bash
-export SUPABASE_ACCESS_TOKEN="your-access-token"
-
-# List your organizations to get the organization ID
-curl -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
- https://api.supabase.com/v1/organizations
-
-# Create a new project (replace with your organization ID)
-curl -X POST https://api.supabase.com/v1/projects \
- -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
- -H "Content-Type: application/json" \
- -d '{
- "organization_id": "",
- "name": "My Project",
- "region": "us-east-1",
- "db_pass": ""
- }'
-```
-
-
-
-
-
-## 2. Install agent skills (optional)
-
-[Agent Skills](/docs/guides/ai-tools/ai-skills) are curated instruction sets that give your AI agent procedural knowledge about working with Supabase.
-
-Install them in your project with:
-
-```bash
-npx skills add supabase/agent-skills
-```
-
-## 3. Set up your database
+## 2. Set up your database
When your Supabase project is up and running, create an `instruments` table with some sample data. Then set only the privileges each Postgres role needs, add [Row Level Security (RLS)](/docs/guides/database/postgres/row-level-security) for enhanced security for database data by default, and create an RLS policy to make the data in the table publicly readable.
+Do these steps within your project's dashboard by copying and running the snippet in your project's [SQL Editor](/dashboard/project/_/sql/new).
+
Save some steps by clicking here to prefill the SQL in the SQL Editor, and then clicking **Run**.
-Or do this manually in your project's [SQL Editor](/dashboard/project/_/sql/new), by pasting the SQL below, and clicking **Run**.
+
+
+You can use [the Management API](/docs/reference/api/v1-run-a-query) or ask [the MCP server](/docs/guides/ai-tools/mcp#database) to execute SQL queries.
+
+
```sql SQL_EDITOR
-- Create the table
diff --git a/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
index 6b4665af590..392227c9fb6 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create an Astro app
+## 3. Create an Astro app
Create an Astro app using the `npm create` command.
@@ -15,6 +15,16 @@ npm create astro@latest my-app
cd my-app
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install Supabase client library and Node adapter
Install the `supabase-js` client library and the `@astrojs/node` adapter to enable server-side rendering.
@@ -39,11 +49,9 @@ export default defineConfig({
})
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "astro", "tab": "frameworks" }} />
-
## 7. Declare Supabase environment variables
-Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=astro&tab=frameworks):
+Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=astro&tab=frameworks):
@@ -56,6 +64,8 @@ PUBLIC_SUPABASE_URL=
PUBLIC_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "astro", "tab": "frameworks" }} />
+
## 8. Create a Supabase client helper
Create a utility file to initialize the Supabase client:
diff --git a/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx b/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
index 54a5cc8e10b..d9b581b5e9f 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create an Expo app
+## 3. Create an Expo app
Create a minimal Expo app using the `create-expo-app` command with the blank TypeScript template.
@@ -14,6 +14,16 @@ Create a minimal Expo app using the `create-expo-app` command with the blank Typ
npx create-expo-app my-app --template blank-typescript
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the `@supabase/supabase-js` client library which provides a convenient interface for working with Supabase from a React Native app.
@@ -24,11 +34,9 @@ Navigate to the Expo app and install `supabase-js` along with the required depen
cd my-app && npx expo install @supabase/supabase-js react-native-url-polyfill expo-sqlite
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
-
## 6. Declare Supabase environment variables
-Create a `.env` file in the root of your project and populate it with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true).
+Create a `.env` file in the root of your project and populate it with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true).
Open Connect panel
@@ -41,6 +49,8 @@ EXPO_PUBLIC_SUPABASE_URL=
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
+
## 7. Initialize the Supabase client
Create a helper file at `lib/supabase.ts` to initialize the Supabase client using the environment variables.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/flask.mdx b/apps/docs/content/guides/getting-started/quickstarts/flask.mdx
index 9895e3bee8d..aa3be961447 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/flask.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/flask.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Python app with Flask
+## 3. Create a Python app with Flask
Create a new directory for your Python app and set up a virtual environment.
@@ -16,6 +16,16 @@ python3 -m venv venv
source venv/bin/activate
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install Flask and the Supabase client library
The fastest way to get started is to use Flask for the web framework and the `supabase-py` client library which provides a convenient interface for working with Supabase from a Python app.
@@ -26,11 +36,9 @@ Install both packages using pip.
pip install flask supabase
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
-
## 6. Create environment variables file
-Create a `.env` file in your project root and populate it with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true):
+Create a `.env` file in your project root and populate it with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true):
Open Connect panel
@@ -41,6 +49,8 @@ SUPABASE_URL=
SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
+
## 7. Query data from the app
Install the `python-dotenv` package to load environment variables:
diff --git a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx
index ed84c166372..c34cef02b6a 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Flutter app
+## 3. Create a Flutter app
Create a Flutter app using the `flutter create` command.
@@ -14,6 +14,16 @@ Create a Flutter app using the `flutter create` command.
flutter create my_app
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the [`supabase_flutter`](https://pub.dev/packages/supabase_flutter) client library which provides a convenient interface for working with Supabase from a Flutter app.
@@ -24,11 +34,9 @@ Open the `pubspec.yaml` file inside your Flutter app and add `supabase_flutter`
supabase_flutter: ^2.0.0
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "flutter", "tab": "mobiles" }} />
-
## 6. Initialize the Supabase client
-Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and publishable key, which you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=flutter&tab=mobiles):
+Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=flutter&tab=mobiles):
@@ -50,6 +58,8 @@ Future main() async {
}
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "flutter", "tab": "mobiles" }} />
+
## 7. Query data from the app
Use a `FutureBuilder` to fetch the data when the home page loads and display the query result in a `ListView`.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/hono.mdx b/apps/docs/content/guides/getting-started/quickstarts/hono.mdx
index afdd0c3bb24..6d9c331172c 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/hono.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/hono.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Hono app
+## 3. Create a Hono app
Bootstrap the Hono example app from the Supabase Samples using the CLI.
@@ -14,6 +14,16 @@ Bootstrap the Hono example app from the Supabase Samples using the CLI.
npx supabase@latest bootstrap hono
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The `package.json` file in the project includes the necessary dependencies, including `@supabase/supabase-js` and `@supabase/ssr` to help with server-side auth.
@@ -22,12 +32,9 @@ The `package.json` file in the project includes the necessary dependencies, incl
npm install
```
-{/* TODO: Not ideal for frameworks that have no entry in Connect */}
-<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "frameworks" }} />
-
## 6. Set up the required environment variables
-Copy the `.env.example` file to `.env` and update the values with your Supabase project URL and publishable key, which you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&tab=frameworks).
+Copy the `.env.example` file to `.env` and update the values with your Supabase project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&tab=frameworks).
Lastly, [enable anonymous sign-ins](/dashboard/project/_/auth/providers) in the Auth settings.
@@ -35,6 +42,9 @@ Lastly, [enable anonymous sign-ins](/dashboard/project/_/auth/providers) in the
cp .env.example .env
```
+{/* TODO: Not ideal for frameworks that have no entry in Connect */}
+<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "frameworks" }} />
+
## 7. Start the app
Start the app, go to http://localhost:5173.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx
index abcc97b0905..24523e7027e 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx
@@ -6,10 +6,20 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create an iOS SwiftUI app with Xcode
+## 3. Create an iOS SwiftUI app with Xcode
Select the **Xcode > New Project > iOS > App** menu item.
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
Add the [supabase-swift](https://github.com/supabase/supabase-swift) package to your app using the Swift Package Manager.
@@ -18,11 +28,9 @@ In Xcode, navigate to **File > Add Package Dependencies...** and enter the repos
Make sure to add `Supabase` product package as a dependency to your application target.
-<$Partial path="api_settings.mdx" variables={{ "framework": "swift", "tab": "mobiles" }} />
-
## 6. Initialize the Supabase client
-Create a new `Supabase.swift` file add a new Supabase instance using your project URL and publishable key, which you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=swift&tab=mobiles):
+Create a new `Supabase.swift` file add a new Supabase instance using your project URL and publishable key, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=swift&tab=mobiles):
@@ -39,6 +47,8 @@ let supabase = SupabaseClient(
)
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "swift", "tab": "mobiles" }} />
+
## 7. Create a data model for instruments
Create a decodable struct to deserialize the data from the database.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx
index 2bbd104cc3a..6c9b2d1fa71 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx
@@ -6,10 +6,20 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create an Android app with Android Studio
+## 3. Create an Android app with Android Studio
Select the **Android Studio > New > New Android Project** menu item.
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install dependencies
Open `build.gradle.kts` (app) file and add the serialization plugin, Ktor client, and Supabase client.
@@ -46,15 +56,13 @@ Add the following line to the `AndroidManifest.xml` file under the `manifest` ta
...
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "androidkotlin", "tab": "mobiles" }} />
-
## 7. Initialize the Supabase client
You can create a Supabase client whenever you need to perform an API call.
For a quick example, create a client at the top of the `MainActivity.kt` file below the imports.
-Replace the `supabaseUrl` and `supabaseKey` with your own, which you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=androidkotlin&tab=mobiles):
+Replace the `supabaseUrl` and `supabaseKey` with your own, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=androidkotlin&tab=mobiles):
@@ -74,6 +82,8 @@ val supabase = createSupabaseClient(
...
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "androidkotlin", "tab": "mobiles" }} />
+
## 8. Create a data model for instruments
Create a serializable data class to represent the data from the database.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/laravel.mdx b/apps/docs/content/guides/getting-started/quickstarts/laravel.mdx
index 9201cde1ef5..6c9e55acc60 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/laravel.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/laravel.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Laravel project
+## 3. Create a Laravel project
Make sure your PHP and Composer versions are up to date, then use `composer create-project` to scaffold a new Laravel project.
@@ -16,6 +16,16 @@ See the [Laravel docs](https://laravel.com/docs/10.x/installation#creating-a-lar
composer create-project laravel/laravel example-app
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the authentication template
Install [Laravel Breeze](https://laravel.com/docs/10.x/starter-kits#laravel-breeze), a basic implementation of all of Laravel's [authentication features](https://laravel.com/docs/10.x/authentication).
diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx
index c362f436523..654823cecf8 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Next.js app
+## 3. Create a Next.js app
Use the `create-next-app` command and the `with-supabase` template, to create a Next.js app pre-configured with [Cookie-based Auth](/docs/guides/auth/server-side/creating-a-client?queryGroups=package-manager&package-manager=npm&queryGroups=framework&framework=nextjs&queryGroups=environment&environment=server), [TypeScript](https://www.typescriptlang.org/), and [Tailwind CSS](https://tailwindcss.com/).
@@ -14,11 +14,19 @@ Use the `create-next-app` command and the `with-supabase` template, to create a
npx create-next-app -e with-supabase
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "nextjs", "tab": "frameworks" }} />
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
## 5. Declare Supabase environment variables
-Rename `.env.example` to `.env.local` and populate with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nextjs&tab=frameworks).
+Rename `.env.example` to `.env.local` and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nextjs&tab=frameworks).
@@ -31,6 +39,8 @@ NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "nextjs", "tab": "frameworks" }} />
+
## 6. Query Supabase data from Next.js
Create a new file at `app/instruments/page.tsx` and populate with the following.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx
index 49a3a33fd63..c91850e0df3 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Nuxt app
+## 3. Create a Nuxt app
Create a Nuxt app using the `npx nuxi` command.
@@ -14,6 +14,16 @@ Create a Nuxt app using the `npx nuxi` command.
npx nuxi@latest init my-app
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a Nuxt app.
@@ -24,11 +34,9 @@ Navigate to the Nuxt app and install `supabase-js`.
cd my-app && npm install @supabase/supabase-js
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "nuxt", "tab": "frameworks" }} />
-
## 6. Declare Supabase environment variables
-Create a `.env` file and populate with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nuxt&tab=frameworks):
+Create a `.env` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=nuxt&tab=frameworks):
@@ -56,6 +64,8 @@ export default defineNuxtConfig({
$CodeTabs>
+<$Partial path="api_settings.mdx" variables={{ "framework": "nuxt", "tab": "frameworks" }} />
+
## 7. Query data from the app
In `app.vue`, create a Supabase client using your config values and replace the existing content with the following code.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx
index ac83c95b4f7..515e6267c68 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a React app
+## 3. Create a React app
Create a React app using a [Vite](https://vitejs.dev/guide/) template.
@@ -14,6 +14,16 @@ Create a React app using a [Vite](https://vitejs.dev/guide/) template.
npm create vite@latest my-app -- --template react
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the `supabase-js` client library, which provides a convenient interface for working with Supabase from a React app.
@@ -24,11 +34,9 @@ Navigate to the React app and install `supabase-js`.
cd my-app && npm install @supabase/supabase-js
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "react", "tab": "frameworks" }} />
-
## 6. Declare Supabase environment variables
-Create a `.env.local` file and populate it with your Supabase URL and publishable key that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=react&tab=frameworks)
+Create a `.env.local` file and populate it with your Supabase URL and publishable key that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=react&tab=frameworks)
@@ -41,6 +49,8 @@ VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "react", "tab": "frameworks" }} />
+
## 7. Query data from the app
Replace the contents of `App.jsx` with a `getInstruments` function that fetches the data and displays the query result on the page using a Supabase client.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/redwoodjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/redwoodjs.mdx
index d98de59234b..4bd411ef331 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/redwoodjs.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/redwoodjs.mdx
@@ -24,7 +24,7 @@ To do this, set the connection mode to `Transaction` in the [Database Settings p
To get the Session mode connection pooler string, change the port of the connection string from the dashboard to 5432.
-You will need the Transaction mode connection string and the Session mode connection string to set up environment variables in Step 4.
+You will need the Transaction mode connection string and the Session mode connection string to set up environment variables in Step 6.
@@ -50,7 +50,21 @@ While TypeScript is recommended, If you want a JavaScript app, omit the `--ts` f
yarn create redwood-app my-app --ts
```
-## 4. Configure environment variables
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
+## 5. Install MCP server (optional)
+
+The Supabase MCP server connects AI assistants to Supabase, allowing you to interact with your projects on your behalf. Find out more on how to add it to your client in [the MCP docs](/docs/guides/ai-tools/mcp).
+
+## 6. Configure environment variables
In your `.env` file, add the following environment variables for your database connection:
@@ -66,11 +80,11 @@ DATABASE_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabas
DIRECT_URL="postgres://postgres.[project-ref]:[db-password]@xxx.pooler.supabase.com:5432/postgres"
```
-## 5. Update your Prisma schema
+## 7. Update your Prisma schema
By default, RedwoodJS ships with a SQLite database, but we want to use Postgres.
-Update your Prisma schema file `api/db/schema.prisma` to use your Supabase Postgres database connection environment variables you set up in Step 4.
+Update your Prisma schema file `api/db/schema.prisma` to use your Supabase Postgres database connection environment variables you set up in Step 6.
```prisma name=api/db/schema.prisma
datasource db {
@@ -80,7 +94,7 @@ datasource db {
}
```
-## 6. Create the instrument model and apply a schema migration
+## 8. Create the instrument model and apply a schema migration
Create the Instrument model in `api/db/schema.prisma` and then run `yarn rw prisma migrate dev` from your terminal to apply the migration.
@@ -91,7 +105,7 @@ model Instrument {
}
```
-## 7. Update seed script
+## 9. Update seed script
Seed the database with a few instruments.
@@ -120,7 +134,7 @@ export default async () => {
}
```
-## 8. Seed your database
+## 10. Seed your database
Run the seed database command to populate the `Instrument` table with the instruments you created.
@@ -134,7 +148,7 @@ The reset database command `yarn rw prisma db reset` recreates the tables and al
yarn rw prisma db seed
```
-## 9. Scaffold the instrument UI
+## 11. Scaffold the instrument UI
Use RedwoodJS generators to scaffold a CRUD UI for the `Instrument` model.
@@ -142,13 +156,13 @@ Use RedwoodJS generators to scaffold a CRUD UI for the `Instrument` model.
yarn rw g scaffold instrument
```
-## 10. Start the app
+## 12. Start the app
Start the app via `yarn rw dev`. A browser will open to the RedwoodJS Splash page.

-## 11. View instruments UI
+## 13. View instruments UI
Click on `/instruments` to visit http://localhost:8910/instruments where should see the list of instruments.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx
index ff202d6c2cb..5fe26f5057a 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Refine app
+## 3. Create a Refine app
Create a [Refine](https://github.com/refinedev/refine) app using the [create refine-app](https://refine.dev/docs/getting-started/quickstart/).
@@ -18,11 +18,19 @@ npm create refine-app@latest -- --preset refine-supabase my-app

-<$Partial path="api_settings.mdx" variables={{ "framework": "refine", "tab": "frameworks" }} />
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
## 5. Update `supabaseClient` with environment variables
-Update the `supabaseClient` with the `SUPABASE_URL` and `SUPABASE_KEY` of your Supabase API, which you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=refine&tab=frameworks). The `supabaseClient` is used in auth provider and data provider methods that allow the Refine app to connect to your Supabase backend.
+Update the `supabaseClient` with the `SUPABASE_URL` and `SUPABASE_KEY` of your Supabase API, which you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=refine&tab=frameworks). The `supabaseClient` is used in auth provider and data provider methods that allow the Refine app to connect to your Supabase backend.
@@ -46,6 +54,8 @@ export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
})
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "refine", "tab": "frameworks" }} />
+
## 6. Add instruments resource and pages
Use the following code to automatically add resources and generate code for the pages to show the `instruments` data using Refine Inferencer.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx b/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx
index bbf867e3aad..f1d6a8aef66 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx
@@ -16,7 +16,19 @@ Check the [Rails docs](https://guides.rubyonrails.org/getting_started.html) for
rails new blog -d=postgresql
```
-## 2. Set up the Postgres connection details
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
+## 3. Install MCP server (optional)
+
+The Supabase MCP server connects AI assistants to Supabase, allowing you to interact with your projects on your behalf. Find out more on how to add it to your client in [the MCP docs](/docs/guides/ai-tools/mcp).
+
+## 4. Set up the Postgres connection details
Go to [database.new](https://database.new) and create a new Supabase project. Save your database password securely.
@@ -34,7 +46,7 @@ If you're in an [IPv6 environment](https://github.com/orgs/supabase/discussions/
export DATABASE_URL=postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
```
-## 3. Create and run a database migration
+## 5. Create and run a database migration
Rails includes Active Record as the ORM as well as database migration tooling which generates the SQL migration files for you.
@@ -45,7 +57,7 @@ bin/rails generate model Article title:string body:text
bin/rails db:migrate
```
-## 4. Use the model to interact with the database
+## 6. Use the model to interact with the database
You can use the included Rails console to interact with the database. For example, you can create new entries or list all entries in a Model's table.
@@ -60,7 +72,7 @@ article.save # Saves the entry to the database
Article.all
```
-## 5. Start the app
+## 7. Start the app
Run the development server. Go to http://127.0.0.1:3000 in a browser to see your application running.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx
index e6f68a34189..6ac87800239 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a SolidJS app
+## 3. Create a SolidJS app
Create a SolidJS app using the `degit` command.
@@ -14,6 +14,16 @@ Create a SolidJS app using the `degit` command.
npx degit solidjs/templates/js my-app
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a SolidJS app.
@@ -24,11 +34,9 @@ Navigate to the SolidJS app and install `supabase-js`.
cd my-app && npm install @supabase/supabase-js
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "solidjs", "tab": "frameworks" }} />
-
## 6. Declare Supabase environment variables
-Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=solidjs&tab=frameworks):
+Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=solidjs&tab=frameworks):
@@ -41,6 +49,8 @@ VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "solidjs", "tab": "frameworks" }} />
+
## 7. Query data from the app
In `App.jsx`, create a Supabase client to fetch the instruments data.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx
index 65ca944271b..669079174bc 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a SvelteKit app
+## 3. Create a SvelteKit app
Create a SvelteKit app using the `npm create` command.
@@ -14,6 +14,16 @@ Create a SvelteKit app using the `npm create` command.
npx sv create my-app
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a SvelteKit app.
@@ -24,11 +34,9 @@ Navigate to the SvelteKit app and install `supabase-js`.
cd my-app && npm install @supabase/supabase-js
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "sveltekit", "tab": "frameworks" }} />
-
## 6. Declare Supabase environment variables
-Create a `.env` file at the root of your project and populate with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=sveltekit&tab=frameworks):
+Create a `.env` file at the root of your project and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=sveltekit&tab=frameworks):
@@ -41,6 +49,8 @@ PUBLIC_SUPABASE_URL=
PUBLIC_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "sveltekit", "tab": "frameworks" }} />
+
## 7. Create the Supabase client
Create a `src/lib` directory in your SvelteKit app, create a file called `supabaseClient.js` and add the following code to initialize the Supabase client:
diff --git a/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx b/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
index 5b6df768d7b..b59f80d39ad 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a TanStack Start app
+## 3. Create a TanStack Start app
Create a TanStack Start app using the official CLI.
@@ -14,6 +14,16 @@ Create a TanStack Start app using the official CLI.
npm create @tanstack/start@latest my-app -- --package-manager npm --toolchain biome
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a TanStack Start app.
@@ -24,11 +34,9 @@ Navigate to the TanStack Start app and install `supabase-js`.
cd my-app && npm install @supabase/supabase-js
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
-
## 6. Declare Supabase environment variables
-Create a `.env` file in the root of your project and populate with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true):
+Create a `.env` file in the root of your project and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true):
Open Connect panel
@@ -39,6 +47,8 @@ VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "", "tab": "" }} />
+
## 7. Create a Supabase client utility
Create a new file at `src/utils/supabase.ts` to initialize the Supabase client.
diff --git a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx
index fa1deddd069..6e34ba1244e 100644
--- a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx
+++ b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx
@@ -6,7 +6,7 @@ breadcrumb: 'Framework Quickstarts'
<$Partial path="quickstart_db_setup.mdx" />
-## 4. Create a Vue app
+## 3. Create a Vue app
Create a Vue app using the `npm init` command.
@@ -14,6 +14,16 @@ Create a Vue app using the `npm init` command.
npm init vue@latest my-app
```
+## 4. Install Agent Skills (optional)
+
+Supabase's [Agent Skills](/docs/guides/ai-tools/ai-skills) is a curated set of instructions that give your AI agent procedural knowledge about working with Supabase.
+
+To install, run the following command in the root of your project:
+
+```bash
+npx skills add supabase/agent-skills
+```
+
## 5. Install the Supabase client library
The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a Vue app.
@@ -24,11 +34,9 @@ Navigate to the Vue app and install `supabase-js`.
cd my-app && npm install @supabase/supabase-js
```
-<$Partial path="api_settings.mdx" variables={{ "framework": "vue", "tab": "frameworks" }} />
-
## 6. Declare Supabase environment variables
-Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper above, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=vue&tab=frameworks):
+Create a `.env.local` file and populate with your Supabase connection variables that you can get from the helper below, or [from the project **Connect** panel](/dashboard/project/_?showConnect=true&framework=vue&tab=frameworks):
@@ -41,6 +49,8 @@ VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=
```
+<$Partial path="api_settings.mdx" variables={{ "framework": "vue", "tab": "frameworks" }} />
+
## 7. Create the Supabase client
Create a `/src/lib` directory in your Vue app, create a file called `supabaseClient.js` and add the following code to initialize the Supabase client:
diff --git a/supa-mdx-lint/Rule001HeadingCase.toml b/supa-mdx-lint/Rule001HeadingCase.toml
index b534cf3583f..4ac382b06b8 100644
--- a/supa-mdx-lint/Rule001HeadingCase.toml
+++ b/supa-mdx-lint/Rule001HeadingCase.toml
@@ -6,6 +6,7 @@ may_uppercase = [
"[A-Z0-9]{2,5}s?",
"Option [A-Z]",
"Account component",
+ "Agent Skills",
"APIs",
"Add-ons?",
"Amazon RDS",