supabase/apps/ui-library/content/docs/platform/platform-kit.mdx

---
title: Platform Kit
description: The easiest way to build platforms on top of Supabase
preview: |-
  <BlockOverview name="platform-kit-nextjs" showFiles>
    <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>
  </BlockOverview>
---

## Installation

<BlockItem name="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 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 (
    <>
      <Button onClick={() => setOpen(true)}>Open Supabase Manager</Button>
      <SupabaseManagerDialog
        projectRef={projectRef}
        open={open}
        onOpenChange={setOpen}
        isMobile={isMobile}
      />
    </>
  )
}
```

## Quickstart

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)