Dashboard Setup

The Scrawn Dashboard is a Next.js application that gives you a visual interface to manage API keys, track events, and monitor your billing infrastructure.

Prerequisites

Before setting up the dashboard, make sure you have:

• Scrawn backend deployed and running
• Database URL (same PostgreSQL database as your backend)
• Initial API key generated from Quick Start

1. Clone the Dashboard Repository

git clone https://github.com/ScrawnDotDev/Dashboard.git
cd Dashboard

gh repo clone ScrawnDotDev/Dashboard
cd Dashboard

2. Install Dependencies

bun install

npm install

yarn install

3. Configure Environment Variables

Copy the example environment file:

cp .env.local.example .env.local

copy .env.local.example .env.local

Copy-Item .env.local.example .env.local

Edit .env.local with your configuration:

DATABASE_URL=postgresql://user:password@localhost:5432/scrawn
SCRAWN_BASE_URL=http://localhost:8069
SCRAWN_KEY=scrn_YOUR_SCRAWN_KEY_HERE

4. Run the Dashboard

bun run dev

npm run dev

yarn dev

bun run build
bun run start

npm run build
npm run start

yarn build
yarn start

Creating a New API Key

Once your dashboard is running, you can easily generate new API keys:

1. Navigate to API Keys Page

Open your dashboard and click on API Keys in the sidebar, or navigate to /dashboard/api-keys.

2. Click Create API Key

Click the Create API Key button in the top-right corner.

3. Fill in Details

A dialog will appear asking for:

• API Key Name: Give it a descriptive name (e.g., "Production API", "Development Key")
• Expires In (days): How many days until the key expires (default: 365)

4. Copy Your Key

Click the copy button next to the key to copy it to your clipboard.

5. Use Your New Key

You can now use this API key in your application:

import { Scrawn } from '@scrawn/core';

const scrawn = new Scrawn({
  apiKey: 'scrn_YOUR_NEW_KEY_HERE',
  baseURL: process.env.SCRAWN_BASE_URL,
});

Dashboard Features

The dashboard provides several views to monitor your billing infrastructure:

• Overview: Real-time revenue, API usage, and trends
• API Keys: Create, view, and manage all API keys
• Users: Track user balances and activity
• Events: Monitor SDK call events and costs

Next Steps

Now that your dashboard is set up, start using Scrawn in your application: