### Clone and Install Dependencies

Source: https://github.com/supabase/supabase-embedded-dashboard/blob/main/README.md

Initial setup commands to clone the repository and install required packages.

```bash
git clone <repository-url>
cd supabase-manager
```

```bash
npm install
# or
pnpm install
```

--------------------------------

### Start Development Server

Source: https://github.com/supabase/supabase-embedded-dashboard/blob/main/README.md

Commands to launch the local development environment.

```bash
npm run dev
# or
pnpm dev
```

--------------------------------

### Management API: Get Project Example

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

An example of using the configured OpenAPI client to fetch project details by its reference. Handles potential errors during the API call.

```typescript
// Direct API usage example
async function getProject(projectRef: string) {
  const { data, error } = await client.GET("/v1/projects/{ref}", {
    params: {
      path: { ref: projectRef },
    },
  });

  if (error) throw error;
  return data;
}
```

--------------------------------

### Integrate SupabaseManagerDialog

Source: https://github.com/supabase/supabase-embedded-dashboard/blob/main/README.md

Example of how to implement the main manager dialog component within a Next.js page.

```tsx
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import SupabaseManagerDialog from "@/components/supabase-manager";
import { useMobile } from "@/hooks/use-mobile";

export function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const isMobile = useMobile();
  const projectRef = "your-project-ref-here"; // Get this from your app state

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Manage Backend</Button>

      <SupabaseManagerDialog
        projectRef={projectRef}
        open={isOpen}
        onOpenChange={setIsOpen}
        isMobile={isMobile}
      />
    </>
  );
}
```

--------------------------------

### Management API: Run Database Query Example

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Demonstrates how to execute a read-only SQL query against a project's database using the Management API client. Includes error handling.

```typescript
// Database query example
async function runDatabaseQuery(projectRef: string, sql: string) {
  const { data, error } = await client.POST("/v1/projects/{ref}/database/query", {
    params: {
      path: { ref: projectRef },
    },
    body: {
      query: sql,
      read_only: true,
    },
  });

  if (error) throw error;
  return data;
}
```

--------------------------------

### SheetNavigationContext Provider Setup

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Initializes the SheetNavigationProvider with an initial stack and an optional callback for when the stack becomes empty. This context manages stack-based navigation.

```tsx
import { SheetNavigationProvider, useSheetNavigation } from "@/contexts/SheetNavigationContext";

// Wrap your component tree
function App() {
  return (
    <SheetNavigationProvider
      initialStack={[{ title: "Home", component: <HomeView /> } }}
      onStackEmpty={() => console.log("Navigation stack is empty")}
    >
      <NavigableContent />
    </SheetNavigationProvider>
  );
}
```

--------------------------------

### Configure Environment Variables

Source: https://github.com/supabase/supabase-embedded-dashboard/blob/main/README.md

Commands to initialize environment files and the required API tokens.

```bash
cp .env.example .env.local
```

```bash
SUPABASE_MANAGEMENT_API_TOKEN=your_management_api_token_here
OPENAI_API_KEY=your_openai_api_key_here
```

--------------------------------

### Browse Supabase Storage Buckets

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Utilize `useGetBuckets` to fetch a list of all storage buckets within a project. Each bucket's details, including name and visibility, are returned.

```tsx
import { useGetBuckets, useListObjects } from "@/hooks/use-supabase-manager";

function StorageBrowser({ projectRef }: { projectRef: string }) {
  const { data: buckets, isLoading } = useGetBuckets(projectRef);

  if (isLoading) return <div>Loading buckets...</div>;

  return (
    <div>
      {buckets?.map((bucket: any) => (
        <div key={bucket.id}>
          <h3>{bucket.name}</h3>
          <p>Visibility: {bucket.public ? "Public" : "Private"}</p>
          <p>Updated: {new Date(bucket.updated_at).toLocaleDateString()}</p>
        </div>
      ))}
    </div>
  );
}
```

--------------------------------

### Basic SQL Editor Usage

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Demonstrates the basic integration of the SqlEditor component for querying data. Requires projectRef and initial SQL query.

```tsx
import { SqlEditor } from "@/components/sql-editor";

function DatabaseExplorer({ projectRef }: { projectRef: string }) {
  return (
    <div>
      {/* Basic SQL Editor */}
      <SqlEditor
        projectRef={projectRef}
        initialSql="SELECT * FROM public.posts LIMIT 100;"
        label="Query Posts"
      />
    </div>
  );
}
```

--------------------------------

### OpenAPI Client Configuration

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Sets up the OpenAPI fetch client for interacting with the Supabase Management API via a secure proxy. Requires schema definition.

```typescript
// lib/management-api.ts
import createClient from "openapi-fetch";
import type { paths } from "./management-api-schema";

export const client = createClient<paths>({
  baseUrl: "/api/supabase-proxy",
});
```

--------------------------------

### Retrieve project suggestions with useGetSuggestions

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Fetches performance and security recommendations for a project. Filters results by type to categorize suggestions.

```tsx
import { useGetSuggestions } from "@/hooks/use-supabase-manager";

function SuggestionsPanel({ projectRef }: { projectRef: string }) {
  const { data: suggestions, isLoading, error } = useGetSuggestions(projectRef);

  if (isLoading) return <div>Loading suggestions...</div>;
  if (error) return <div>Error loading suggestions</div>;

  const performanceSuggestions = suggestions?.filter((s: any) => s.type === "performance") || [];
  const securitySuggestions = suggestions?.filter((s: any) => s.type === "security") || [];

  return (
    <div>
      <section>
        <h3>Performance Suggestions ({performanceSuggestions.length})</h3>
        {performanceSuggestions.map((suggestion: any, index: number) => (
          <div key={index}>
            <h4>{suggestion.name}</h4>
            <p>{suggestion.description}</p>
          </div>
        ))}
      </section>

      <section>
        <h3>Security Suggestions ({securitySuggestions.length})</h3>
        {securitySuggestions.map((suggestion: any, index: number) => (
          <div key={index}>
            <h4>{suggestion.name}</h4>
            <p>{suggestion.description}</p>
          </div>
        ))}
      </section>
    </div>
  );
}
```

--------------------------------

### Initialize SupabaseManagerDialog Component

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Renders the main Supabase management dialog. Use this component to open the embeddable interface for managing your Supabase project. Ensure to pass your project reference and manage the dialog's open state.

```tsx
"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import SupabaseManagerDialog from "@/components/supabase-manager";
import { useIsMobile } from "@/hooks/use-mobile";

export function MyApp() {
  const [isOpen, setIsOpen] = useState(false);
  const isMobile = useIsMobile();
  const projectRef = "your-project-ref-here"; // Your Supabase project reference

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>
        Manage Backend
      </Button>

      <SupabaseManagerDialog
        projectRef={projectRef}
        open={isOpen}
        onOpenChange={setIsOpen}
        isMobile={isMobile}
      />
    </>
  );
}

```

--------------------------------

### Retrieve project logs with useGetLogs

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Fetches analytics logs for various Supabase services. Requires a project reference and a query generated by the logs utility.

```tsx
import { useGetLogs } from "@/hooks/use-supabase-manager";
import { LogsTableName, genDefaultQuery } from "@/lib/logs";

function LogsViewer({ projectRef }: { projectRef: string }) {
  // Available log types: FN_EDGE, AUTH, POSTGRES, REALTIME, STORAGE, PG_CRON,
  // EDGE, FUNCTIONS, POSTGREST, SUPAVISOR, PGBOUNCER, WAREHOUSE, PG_UPGRADE
  const sql = genDefaultQuery(LogsTableName.AUTH, 50);

  const { data: logs, isLoading, error } = useGetLogs(projectRef, { sql });

  if (isLoading) return <div>Loading logs...</div>;
  if (error) return <div>Error loading logs: {error.message}</div>;

  return (
    <table>
      <thead>
        <tr>
          <th>Timestamp</th>
          <th>Message</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {logs?.result?.map((log: any, index: number) => (
          <tr key={log.id || index}>
            <td>{new Date(log.timestamp / 1000).toLocaleString()}</td>
            <td>{log.event_message}</td>
            <td>{log.status}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
```

--------------------------------

### Using useSheetNavigation Hook

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Demonstrates how to use the useSheetNavigation hook to access navigation state and functions like push, pop, popTo, and reset within components.

```tsx
// Use navigation within child components
function NavigableContent() {
  const { stack, push, pop, popTo, reset } = useSheetNavigation();

  const navigateToDetails = (itemId: string) => {
    push({
      title: `Item ${itemId}`,
      component: <ItemDetails id={itemId} />,
    });
  };

  const goBack = () => pop();
  const goToRoot = () => popTo(0);
  const clearNavigation = () => reset();

  return (
    <div>
      {/* Breadcrumb navigation */}
      <nav>
        {stack.map((item, index) => (
          <button key={index} onClick={() => popTo(index)}>
            {item.title}
          </button>
        ))}
      </nav>

      {/* Current view */}
      {stack[stack.length - 1]?.component}

      <button onClick={() => navigateToDetails("123")}>View Details</button>
      <button onClick={goBack}>Back</button>
    </div>
  );
}
```

--------------------------------

### Generate SQL from natural language via API

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Sends a natural language prompt to the /api/ai/sql endpoint to receive a generated SQL query. Requires a project reference for schema context.

```javascript
// Client-side usage
async function generateSqlFromNaturalLanguage(prompt: string, projectRef: string) {
  const response = await fetch("/api/ai/sql", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt, projectRef }),
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message || "Failed to generate SQL");
  }

  const { sql } = await response.json();
  return sql;
}

// Example usage
const sql = await generateSqlFromNaturalLanguage(
  "Show me all users who signed up in the last 7 days",
  "your-project-ref"
);
// Returns: "SELECT * FROM auth.users WHERE created_at > NOW() - INTERVAL '7 days' ORDER BY created_at DESC;"
```

--------------------------------

### Retrieve user signup counts with useGetUserCountsByDay

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Fetches daily user signup analytics over a specified range. Useful for visualizing growth trends.

```tsx
import { useGetUserCountsByDay } from "@/hooks/use-supabase-manager";

function UserGrowthChart({ projectRef }: { projectRef: string }) {
  // Get user signups for the last 30 days
  const { data: userCounts, isLoading } = useGetUserCountsByDay(projectRef, 30);

  if (isLoading) return <div>Loading user data...</div>;

  const totalUsers = userCounts?.reduce((sum: number, day: any) => sum + day.users, 0) || 0;

  return (
    <div>
      <h3>User Signups (Last 30 Days)</h3>
      <p>Total: {totalUsers} new users</p>
      <ul>
        {userCounts?.map((day: any) => (
          <li key={day.date}>
            {new Date(day.date).toLocaleDateString()}: {day.users} signups
          </li>
        ))}
      </ul>
    </div>
  );
}
```

--------------------------------

### Manage Supabase Auth Configuration

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Use `useGetAuthConfig` to retrieve current authentication settings and `useUpdateAuthConfig` to modify them. This is useful for enabling/disabling features like Google OAuth or signup.

```tsx
import { useGetAuthConfig, useUpdateAuthConfig } from "@/hooks/use-supabase-manager";

function AuthSettings({ projectRef }: { projectRef: string }) {
  const { data: authConfig, isLoading } = useGetAuthConfig(projectRef);
  const { mutate: updateAuthConfig, isPending } = useUpdateAuthConfig();

  const handleEnableGoogleAuth = () => {
    updateAuthConfig({
      projectRef,
      payload: {
        external_google_enabled: true,
        external_google_client_id: "your-client-id.apps.googleusercontent.com",
        external_google_secret: "your-client-secret",
      },
    });
  };

  const handleDisableSignup = () => {
    updateAuthConfig({
      projectRef,
      payload: {
        disable_signup: true,
        external_anonymous_users_enabled: false,
      },
    });
  };

  return (
    <div>
      {isLoading ? (
        <p>Loading auth config...</p>
      ) : (
        <div>
          <p>Signup Disabled: {authConfig?.disable_signup ? "Yes" : "No"}</p>
          <p>Email Enabled: {authConfig?.external_email_enabled ? "Yes" : "No"}</p>
          <button onClick={handleEnableGoogleAuth} disabled={isPending}>
            Enable Google Auth
          </button>
          <button onClick={handleDisableSignup} disabled={isPending}>
            Disable Signup
          </button>
        </div>
      )}
    </div>
  );
}
```

--------------------------------

### Execute SQL Queries with useRunQuery Hook

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Hook for executing SQL queries against your Supabase PostgreSQL database. Supports both read-only and write operations. Automatic error handling and toast notifications are included. Ensure the projectRef is correctly provided.

```tsx
import { useRunQuery } from "@/hooks/use-supabase-manager";

function QueryExample({ projectRef }: { projectRef: string }) {
  const { mutate: runQuery, data, isPending, error } = useRunQuery();

  const handleQuery = () => {
    // Read-only query
    runQuery({
      projectRef,
      query: "SELECT * FROM public.users WHERE active = true LIMIT 10;",
      readOnly: true,
    });
  };

  const handleInsert = () => {
    // Write operation
    runQuery({
      projectRef,
      query: `INSERT INTO public.posts (title, content) VALUES ('Hello', 'World');`,
      readOnly: false,
    });
  };

  return (
    <div>
      <button onClick={handleQuery} disabled={isPending}>
        {isPending ? "Running..." : "Run Query"}
      </button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

```

--------------------------------

### SQL Editor with Row Click and Results Handler

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Integrates event handlers for row clicks and query results in the SqlEditor. Allows custom logic execution based on user interaction and query output.

```tsx
      <SqlEditor
        projectRef={projectRef}
        initialSql="SELECT * FROM public.users;"
        onRowClick={(row) => console.log("Selected user:", row)}
        onResults={(data) => console.log("Query returned", data?.length, "rows")}
      />
```

--------------------------------

### Fetch Database Tables with useListTables Hook

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Hook to fetch all database tables, including their columns, row counts, and primary key information. You can filter tables by schema names. This is useful for browsing and understanding your database structure.

```tsx
import { useListTables } from "@/hooks/use-supabase-manager";

function TableBrowser({ projectRef }: { projectRef: string }) {
  // Fetch only public schema tables
  const { data: tables, isLoading, isError } = useListTables(projectRef, ["public"]);

  if (isLoading) return <div>Loading tables...</div>;
  if (isError) return <div>Error loading tables</div>;

  return (
    <div>
      {tables?.map((table: any) => (
        <div key={table.id}>
          <h3>{table.name}</h3>
          <p>Rows: {table.live_rows_estimate}</p>
          <p>Columns: {table.columns?.map((col: any) => col.name).join(", ")}</p>
        </div>
      ))}
    </div>
  );
}

```

--------------------------------

### SQL Editor in Read-only Mode with Charting

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Sets up the SqlEditor for read-only display with automatic query execution and charting enabled. Ideal for displaying data visualizations.

```tsx
      <SqlEditor
        projectRef={projectRef}
        initialSql="SELECT date, COUNT(*) as count FROM public.events GROUP BY date;"
        readOnly={true}
        runAutomatically={true}
        hideChartOption={false}
        label="Event Analytics"
      />
```

--------------------------------

### Manage Supabase Project Secrets

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

This snippet demonstrates CRUD operations for project secrets using `useGetSecrets`, `useCreateSecrets`, and `useDeleteSecrets`. Secrets are environment variables stored securely.

```tsx
import { useGetSecrets, useCreateSecrets, useDeleteSecrets } from "@/hooks/use-supabase-manager";

function SecretsManager({ projectRef }: { projectRef: string }) {
  const { data: secrets, isLoading } = useGetSecrets(projectRef);
  const { mutate: createSecrets, isPending: isCreating } = useCreateSecrets();
  const { mutate: deleteSecrets, isPending: isDeleting } = useDeleteSecrets();

  const handleCreate = () => {
    createSecrets({
      projectRef,
      secrets: [
        { name: "API_KEY", value: "sk-secret-api-key-123" },
        { name: "WEBHOOK_SECRET", value: "whsec-webhook-secret-456" },
      ],
    });
  };

  const handleDelete = (secretName: string) => {
    deleteSecrets({
      projectRef,
      secretNames: [secretName],
    });
  };

  return (
    <div>
      <button onClick={handleCreate} disabled={isCreating}>
        {isCreating ? "Creating..." : "Add Secrets"}
      </button>

      {isLoading ? (
        <p>Loading secrets...</p>
      ) : (
        <ul>
          {secrets?.map((secret: any) => (
            <li key={secret.name}>
              {secret.name}
              <button onClick={() => handleDelete(secret.name)} disabled={isDeleting}>
                Delete
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}
```

--------------------------------

### List Objects within a Supabase Bucket

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Use `useListObjects` to retrieve all objects within a specified storage bucket. This hook is essential for browsing the contents of a bucket.

```tsx
import { useGetBuckets, useListObjects } from "@/hooks/use-supabase-manager";

function BucketContents({ projectRef, bucketId }: { projectRef: string; bucketId: string }) {
  const { data: objects, isLoading } = useListObjects(projectRef, bucketId);

  if (isLoading) return <div>Loading objects...</div>;

  return (
    <ul>
      {objects?.map((obj: any) => (
        <li key={obj.id}>{obj.name}</li>
      ))}
    </ul>
  );
}
```

--------------------------------

### Register a custom manager panel

Source: https://github.com/supabase/supabase-embedded-dashboard/blob/main/README.md

Add a new entry to the navigationItems array in components/supabase-manager/index.tsx to include a custom component in the dashboard.

```tsx
// Add to the navigationItems array
{
  title: "My Custom Manager",
  icon: MyIcon,
  component: <MyCustomManager projectRef={projectRef} />,
}
```

--------------------------------

### SQL Editor with Natural Language Mode

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Configures the SqlEditor for natural language queries, hiding the SQL input and enabling auto-run. Useful for user-friendly data exploration.

```tsx
      <SqlEditor
        projectRef={projectRef}
        initialNaturalLanguageMode={true}
        hideSql={true}
        label="Ask a question about your data"
      />
```

--------------------------------

### Validate Authentication Configuration with Zod

Source: https://context7.com/supabase/supabase-embedded-dashboard/llms.txt

Uses predefined Zod schemas to parse and validate general settings, email provider configurations, Google OAuth settings, and secrets.

```typescript
import { z } from "zod";
import {
  authGeneralSettingsSchema,
  authEmailProviderSchema,
  authPhoneProviderSchema,
  authGoogleProviderSchema,
  secretsSchema
} from "@/lib/schemas";

// Validate general auth settings
const generalSettings = authGeneralSettingsSchema.parse({
  disable_signup: false,
  external_anonymous_users_enabled: true,
});

// Validate email provider settings
const emailSettings = authEmailProviderSchema.parse({
  external_email_enabled: true,
  mailer_autoconfirm: false,
  password_min_length: 8,
  password_hibp_enabled: true,
  mailer_otp_exp: 3600,
  mailer_otp_length: 6,
});

// Validate Google provider settings
const googleSettings = authGoogleProviderSchema.parse({
  external_google_enabled: true,
  external_google_client_id: "123456789.apps.googleusercontent.com",
  external_google_secret: "GOCSPX-secret-key",
  external_google_skip_nonce_check: false,
});

// Validate secrets creation
const secrets = secretsSchema.parse({
  secrets: [
    { name: "STRIPE_SECRET_KEY", value: "sk_live_..." },
    { name: "SENDGRID_API_KEY", value: "SG...." },
  ],
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.