# Butterbase Dashboard — Full Reference > Web-based management console for Butterbase developers. > URL: https://dashboard.butterbase.ai > Generated: 2026-04-20 --- ## Overview The Butterbase Dashboard is a React single-page application (React 19 + Vite + TypeScript) that provides a visual interface for managing all aspects of a Butterbase backend. It is the primary GUI alternative to the MCP tools and REST API. Authentication uses AWS Cognito SSO. After login, the dashboard stores a session and routes the user to their apps list. --- ## Login **Route:** /login Sign in via AWS Cognito SSO. On successful auth, the user is redirected to the apps list. The OAuth callback is handled at /auth/callback, which processes the Cognito token exchange and stores the session. --- ## Platform Pages These pages are not scoped to a specific app. ### Apps List **Route:** / Lists all backend apps the user has created. Each app card shows the app name, app ID, API base URL, and creation date. A "Create App" button is available in developer mode. Selecting an app navigates to its App Overview. ### API Keys **Route:** /api-keys Generate and manage `bb_sk_` prefixed platform API keys for programmatic access. Keys are shown only once at creation time. Existing keys are listed with their creation date; keys can be deleted but not re-viewed. ### Billing **Route:** /billing View the current subscription plan (Free, Pro, or Enterprise), usage metrics across all meters (AI credits, storage, bandwidth, function invocations, monthly active users), and upgrade options. Upgrade initiates a Stripe Checkout session. A billing portal link is also available for managing payment methods and viewing invoices. ### Settings **Route:** /settings Account settings page with: - User profile display (email, display name) - Usage metrics summary - Developer mode toggle — enables the Apps page and full app management features when on; hides them when off for a simplified billing-focused view --- ## App Management All pages below are scoped to a specific app via the `/apps/:appId` URL prefix. ### App Overview **Route:** /apps/:appId Dashboard for a single app showing: - App ID and API base URL (copy-to-clipboard) - Key metrics: active users, total rows, storage used, function invocations - Recent authentication audit log entries This is the landing page when you select an app from the apps list. ### Schema Editor **Route:** /apps/:appId/schema Visual schema management interface: - Displays the current database schema as a JSON structure - Supports inline editing of tables, columns, types, and constraints - **Dry-run mode:** Preview the SQL statements that would be applied without executing them - **Apply:** Execute the schema diff against the live database - Migration history is accessible from this page Schema format uses the Butterbase declarative DSL (see docs.butterbase.ai/core-concepts/database). ### Data Browser **Route:** /apps/:appId/data Card grid showing all tables in the app's schema. Each card displays the table name and approximate row count. Clicking a table navigates to the Table View for that table. ### Table View **Route:** /apps/:appId/data/:table Paginated row browser for a specific table: - Displays rows in a table grid with all columns - Filtering by column value - Insert new rows via a modal form - Edit existing rows inline - Delete rows (with confirmation) - Pagination controls (configurable page size) --- ## Auth and Security ### User Management **Route:** /apps/:appId/auth/users Lists all end-user accounts for the app: - User ID, email, display name, email verified status, creation date - Search/filter by email - Paginated view ### OAuth Configuration **Route:** /apps/:appId/auth/config Configure social sign-in providers for the app: - Add providers: Google, GitHub, Discord, Facebook, LinkedIn, Microsoft, Apple, X (Twitter) - For each provider: client ID, client secret, redirect URIs - Enable/disable providers - Custom providers require authorization_url, token_url, userinfo_url ### Row-Level Security **Route:** /apps/:appId/rls Manage RLS policies on database tables: - List all active policies by table - Create user isolation policies (one-click: enables RLS + user isolation + auto-populate trigger) - Create custom policies (command, role, USING expression, WITH CHECK expression) - Delete policies ### Audit Logs **Route:** /apps/:appId/audit Search authentication event logs: - Filter by user ID, event type, date range - Event types: signup, login, logout, email_verified, password_reset, oauth_login - Paginated results with timestamps --- ## Storage ### File Browser **Route:** /apps/:appId/storage Browse uploaded files for the app: - List files with filename, content type, size, and creation date - Upload new files (drag and drop or file picker) - Preview images inline - Download files via presigned URL - Delete files --- ## Serverless Functions ### Functions List **Route:** /apps/:appId/functions Lists all deployed serverless functions: - Function name, trigger type (HTTP/cron/websocket), deployment status - Invocation count and error rate summary - Deploy a new function button (opens editor modal) - Delete functions ### Function Detail **Route:** /apps/:appId/functions/:name Detailed view for a single function: - Code editor with the current deployed source - Trigger configuration (HTTP endpoint URL, cron schedule, or websocket event) - Environment variables management (add/edit/delete key-value pairs) - Test invocation panel: send a test request and see the response - Invocation logs: method, status, duration, memory, errors - Metrics: total invocations, error count, error rate, average duration, last invocation --- ## Infrastructure ### Frontend Deployments **Route:** /apps/:appId/deployments Manage frontend deployments: - List all deployments with status (WAITING, UPLOADING, BUILDING, READY, ERROR, CANCELED) - Live URL for READY deployments (Cloudflare Pages `.pages.dev` domain) - Delete old deployments - Deploy new frontend button (framework selection, zip upload workflow) ### Realtime Configuration **Route:** /apps/:appId/realtime Configure WebSocket real-time notifications: - Enable/disable realtime on specific tables - View which tables have realtime triggers installed - WebSocket connection URL shown for use in client code ### AI Model Gateway **Route:** /apps/:appId/ai Configure the AI model gateway for the app: - Set default model (from OpenRouter model catalog) - Bring Your Own Key (BYOK): enter an OpenRouter API key to bypass platform AI credit quotas - Set max tokens per request - Restrict allowed models to a whitelist - View AI usage stats by date range and model ### Monetization **Route:** /apps/:appId/monetization Set up Stripe Connect for selling subscriptions and products to your app's end users: - Connect a Stripe account (onboarding flow) - Create and manage subscription plans (name, price, interval, features list) - Create and manage one-time products (name, price, description) - View subscription and order statistics --- ## App Settings **Route:** /apps/:appId/settings App-level configuration: - **CORS origins:** List of allowed origins for browser requests to the app API - **Storage config:** Max file size, allowed content types - **JWT config:** Access token lifetime, refresh token lifetime - **MCP connection info:** The MCP server URL and authorization header format for connecting AI assistants --- ## Technology Stack | Layer | Technology | |-------|-----------| | Framework | React 19 + TypeScript + Vite | | Routing | React Router v7 | | Server state | TanStack React Query v5 | | UI components | Radix UI (Dialog, Dropdown, Select, Tabs, Toast, Tooltip) | | Styling | Tailwind CSS | | Charts | Recharts | | Auth | AWS Amplify (Cognito) | | Payments | Stripe React |