# Platform Kit
The easiest way to build platforms on top of Supabase
Your browser does not support the video tag.
## Installation
Install this block:
```bash
npx shadcn@latest add @supabase/platform-kit-nextjs
```
## Folder structure
- `app/`
- `api/`
- `ai/`
- `sql/`
- `route.ts`
- `supabase-proxy/`
- `[...path]/`
- `route.ts`
- `registry/`
- `default/`
- `platform/`
- `platform-kit-nextjs/`
- `components/`
- `dynamic-form.tsx`
- `logo-supabase.tsx`
- `results-table.tsx`
- `sql-editor.tsx`
- `supabase-manager/`
- `auth.tsx`
- `database.tsx`
- `index.tsx`
- `logs.tsx`
- `secrets.tsx`
- `storage.tsx`
- `suggestions.tsx`
- `users.tsx`
- `users-growth-chart.tsx`
- `hooks/`
- `use-auth.ts`
- `use-logs.ts`
- `use-run-query.ts`
- `use-secrets.ts`
- `use-storage.ts`
- `use-suggestions.ts`
- `use-tables.ts`
- `use-user-counts.ts`
- `lib/`
- `logs.ts`
- `management-api-schema.d.ts`
- `management-api.ts`
- `pg-meta/`
- `index.ts`
- `sql.ts`
- `types.ts`
- `schemas/`
- `auth.ts`
- `secrets.ts`
- `contexts/`
- `SheetNavigationContext.tsx`
Full source: https://supabase.com/library/r/platform-kit-nextjs.json
## 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 SupabaseManagerDialog from '@/components/supabase-manager'
import { Button } from '@/components/ui/button'
import { useMobile } from '@/hooks/use-mobile'
export default function Example() {
const [open, setOpen] = useState(false)
const projectRef = 'your-project-ref' // Replace with your actual project ref
const isMobile = useMobile()
return (
<>
)
}
```
## 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 (