mirror of
https://github.com/supabase/supabase.git
synced 2026-06-05 12:22:26 +08:00
ef5c15a652
* add platform kit to library * controls * fix lockfile * add missing deps * dynamic form * update dialog * prettier * drawer * update ai route --------- Co-authored-by: Alaister Young <a@alaisteryoung.com>
111 lines
3.2 KiB
Plaintext
111 lines
3.2 KiB
Plaintext
---
|
|
title: Platform Kit
|
|
description: The easiest way to build platforms on top of Supabase
|
|
---
|
|
|
|
<video width="100%" muted autoPlay controls>
|
|
<source
|
|
src="https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/videos/marketing/blog/platform-kit/platform-kit.mp4"
|
|
type="video/mp4"
|
|
/>
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
|
|
## Installation
|
|
|
|
<BlockItem
|
|
name="platform-kit-nextjs"
|
|
description="Embeddable dialog for managing Supabase projects via the Management API."
|
|
/>
|
|
|
|
## Folder structure
|
|
|
|
<RegistryBlock itemName="platform-kit-nextjs" />
|
|
|
|
## Introduction
|
|
|
|
The Platform Kit is a collection of customizable API's, hooks and components you can use to provide an embedded Supabase experience within your own platform. It comes in the form of a single dialog that enables the management of database, authentication, storage, users, secrets, logs, and performance monitoring.
|
|
|
|
**Features**
|
|
|
|
- Database, Auth, Storage, User, Secrets, Logs, and Performance management
|
|
- Responsive dialog/drawer interface (desktop & mobile)
|
|
- API proxy for Management API
|
|
- AI-powered SQL generation (optional)
|
|
- Customize to your liking
|
|
|
|
## Who is it for
|
|
|
|
Anyone who is providing Postgres databases to their users.
|
|
|
|
## Usage
|
|
|
|
Embed the manager dialog in your app and manage its state:
|
|
|
|
```tsx
|
|
import { useState } from 'react'
|
|
import { useMobile } from '@/hooks/use-mobile'
|
|
import { Button } from '@/components/ui/button'
|
|
import SupabaseManagerDialog from '@/components/supabase-manager'
|
|
|
|
export default function Example() {
|
|
const [open, setOpen] = useState(false)
|
|
const projectRef = 'your-project-ref' // Replace with your actual project ref
|
|
const isMobile = useMobile()
|
|
|
|
return (
|
|
<>
|
|
<Button onClick={() => setOpen(true)}>Open Supabase Manager</Button>
|
|
<SupabaseManagerDialog
|
|
projectRef={projectRef}
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
isMobile={isMobile}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Quick Start
|
|
|
|
1. **Set up environment variables:** in your `.env.local` file:
|
|
|
|
```bash
|
|
SUPABASE_MANAGEMENT_API_TOKEN=your-personal-access-token
|
|
NEXT_PUBLIC_ENABLE_AI_QUERIES=true
|
|
OPENAI_API_KEY=your-openai-api-key
|
|
```
|
|
|
|
2. **Add project-level authentication checks** in your API proxy at `app/api/supabase-proxy/[...path]/route.ts` as well as your ai/sql route at `app/api/ai/sql/route.ts` to ensure only authorized users can access their own project resources.
|
|
|
|
3. **Add a Toaster for notifications:**
|
|
Place the following component at the root of your app (e.g., in your `layout.tsx` or `App.tsx`) to enable toast notifications:
|
|
|
|
```tsx
|
|
import { Toaster } from '@/components/ui/sonner'
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en">
|
|
<head />
|
|
<body>
|
|
<main>{children}</main>
|
|
<Toaster />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
That's it! The default setup uses your Supabase personal access token for the Management API.
|
|
|
|
## Security
|
|
|
|
- Never expose your Management API token to the client
|
|
- Always implement authentication and permission checks in your proxy
|
|
|
|
## Further reading
|
|
|
|
- [Supabase Management API](https://supabase.com/docs/reference/api/introduction)
|