dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

docs: Add AI Tools to QuickStarts (#47684)

Browse Source 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## Summary

Adds two new optional onboarding steps — **Install Agent Skills** and
**Install MCP server** — to every framework quickstart guide, right
after the "create app" step, so readers are pointed at [Agent
Skills](/docs/guides/ai-tools/ai-skills) and the [Supabase MCP
server](/docs/guides/ai-tools/mcp) early in the setup flow.

**Where each step lives:**
- **16 quickstarts that include the shared `quickstart_db_setup.mdx`
partial** (Next.js, Astro, Expo/React Native, Flask, Flutter, Hono,
iOS/SwiftUI, Kotlin, Laravel, Nuxt, React, Refine, SolidJS, SvelteKit,
TanStack Start, Vue): the partial itself now has a step 2 "Install MCP
server (optional)" (between project creation and database setup), and
each individual file gets its own "Install Agent Skills (optional)" step
right after its app-creation step.
- **RedwoodJS and Ruby on Rails** (don't use the shared partial): got
both steps added inline, in the same order (Agent Skills, then MCP
server), since they can't inherit from the partial.
- All subsequent step numbers (and the "Step N" cross-references in
prose, e.g. in RedwoodJS) were renumbered to stay sequential.

## Test plan

- Check the quickstarts locally or in preview.
- Any other ideas on how to optimise showing these items?
- Does the SQL prefill add anything?
- Other ideas on how to simplify without losing the information?
- Check the MD output too and see if that also makes sense.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Refreshed multiple getting-started quickstarts with consistent,
clearer step sequencing (including renumbering) across frameworks.
* Added an optional “Install Agent Skills” step where applicable, plus
updated placements of shared environment-variable setup content.
* Simplified the database quickstart flow: single “Create a Supabase
project” step, streamlined SQL Editor instructions for creating an
`instruments` table, enabling RLS, and granting public read access.
* Added optional “Install MCP server” steps in the relevant quickstarts.
* **Style**
* Updated MDX linting rules to allow the uppercase phrase “Agent
Skills”.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Jeremias Menichelli <jmenichelli@gmail.com>
Co-authored-by: Nik Richers <nrichers@gmail.com>
This commit is contained in:
Chris ChinchillaJeremias MenichelliNik Richers
 authored and GitHub committed 2026-07-08 18:41:39 +00:00
1 parent 944c5862f3
commit 26248be753
20 files changed
+272 -124
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/content/_partials/quickstart_db_setup.mdx
+11 -50
View File
@@ -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).
<Tabs scrollable size="small" type="underlined" defaultActiveId="dashboard" queryGroup="create-project">
<TabPanel id="dashboard" label="Dashboard">
To start, you need a Supabase project.
Create a new Supabase project from [the Dashboard of any organization](/dashboard/new/_) you belong to.
<Admonition type="tip">
<Admonition type="tip" title="Want to create a project programmatically?">
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.
</Admonition>
</TabPanel>
<TabPanel id="management-api" label="Management API">
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 <org-id> 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": "<org-id>",
"name": "My Project",
"region": "us-east-1",
"db_pass": "<your-secure-password>"
}'
```
</TabPanel>
</Tabs>
## 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).
<Admonition type="tip">
Save some steps by <a href={`/dashboard/project/_/sql/new?content=${encodeURIComponent(sqlSetup)}`}>clicking here to prefill the SQL</a> in the SQL Editor, and then clicking **Run**.
</Admonition>
Or do this manually in your project's [SQL Editor](/dashboard/project/_/sql/new), by pasting the SQL below, and clicking **Run**.
<Admonition type="tip" title="Want to setup the database programmatically?">
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.
</Admonition>
```sql SQL_EDITOR
-- Create the table
apps/docs/content/guides/getting-started/quickstarts/astrojs.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=astro">
@@ -56,6 +64,8 @@ PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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:
apps/docs/content/guides/getting-started/quickstarts/expo-react-native.mdx
+14 -4
View File
@@ -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).
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true">Open Connect panel</a>
@@ -41,6 +49,8 @@ EXPO_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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.
apps/docs/content/guides/getting-started/quickstarts/flask.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true">Open Connect panel</a>
@@ -41,6 +49,8 @@ SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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:
apps/docs/content/guides/getting-started/quickstarts/flutter.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=flutter">
@@ -50,6 +58,8 @@ Future<void> 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`.
apps/docs/content/guides/getting-started/quickstarts/hono.mdx
+15 -5
View File
@@ -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.
apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=swift">
@@ -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.
apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=mobiles&framework=androidkotlin">
@@ -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.
apps/docs/content/guides/getting-started/quickstarts/laravel.mdx
+11 -1
View File
@@ -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).
apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx
+13 -3
View File
@@ -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).
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=nextjs">
@@ -31,6 +39,8 @@ NEXT_PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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.
apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=nuxt">
@@ -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.
apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx
+14 -4
View File
@@ -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)
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=react">
@@ -41,6 +49,8 @@ VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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.
apps/docs/content/guides/getting-started/quickstarts/redwoodjs.mdx
+24 -10
View File
@@ -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.
<Admonition type="tip">
@@ -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.
![RedwoodJS Splash Page](/docs/img/redwoodjs-qs-splash.png)
## 11. View instruments UI
## 13. View instruments UI
Click on `/instruments` to visit http://localhost:8910/instruments where should see the list of instruments.
apps/docs/content/guides/getting-started/quickstarts/refine.mdx
+13 -3
View File
@@ -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
![Refine welcome page](/docs/img/refine-qs-welcome-page.png)
<$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.
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=refine">
@@ -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.
apps/docs/content/guides/getting-started/quickstarts/ruby-on-rails.mdx
+16 -4
View File
@@ -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.
apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=solidjs">
@@ -41,6 +49,8 @@ VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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.
apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=sveltekit">
@@ -41,6 +49,8 @@ PUBLIC_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
PUBLIC_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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:
apps/docs/content/guides/getting-started/quickstarts/tanstack.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true">Open Connect panel</a>
@@ -39,6 +47,8 @@ VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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.
apps/docs/content/guides/getting-started/quickstarts/vue.mdx
+14 -4
View File
@@ -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):
<Button variant="primary" asChild>
<a href="/dashboard/project/_?showConnect=true&connectTab=frameworks&framework=vue">
@@ -41,6 +49,8 @@ VITE_SUPABASE_URL=<SUBSTITUTE_SUPABASE_URL>
VITE_SUPABASE_PUBLISHABLE_KEY=<SUBSTITUTE_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:
supa-mdx-lint/Rule001HeadingCase.toml
+1
View File
@@ -6,6 +6,7 @@ may_uppercase = [
"[A-Z0-9]{2,5}s?",
"Option [A-Z]",
"Account component",
"Agent Skills",
"APIs",
"Add-ons?",
"Amazon RDS",