Platform Kit

Installation

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:

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:

   SUPABASE_MANAGEMENT_API_TOKEN=your-personal-access-token
   NEXT_PUBLIC_ENABLE_AI_QUERIES=true
   OPENAI_API_KEY=your-openai-api-key

   Copy

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:

   import { Toaster } from '@/components/ui/sonner'
    
   export default function RootLayout({ children }) {
     return (
       <html lang="en">
         <head />
         <body>
           <main>{children}</main>
           <Toaster />
         </body>
       </html>
     )
   }

   Copy

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