Platform Kit

<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

Folder structure

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}
      />
    </>
  )
}

Quick Start

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

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.

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