How to Build API backend with V0

1// Paste this prompt into V0's AI chat:
2// Build a REST API management system. Create a Supabase schema with these tables:
3// 1. api_keys: id (uuid PK), user_id (uuid FK to auth.users), key (text unique), name (text), created_at (timestamptz), last_used_at (timestamptz), is_active (boolean default true)
4// 2. request_logs: id (uuid PK), api_key_id (uuid FK), method (text), path (text), status_code (int), response_time_ms (int), created_at (timestamptz)
5// 3. rate_limits: id (uuid PK), api_key_id (uuid FK), window_start (timestamptz), request_count (int default 1)
6// Add RLS policies so users can only see their own API keys.
7// Generate the SQL migration and TypeScript types.

1import { createClient } from '@supabase/supabase-js'
2import { NextRequest, NextResponse } from 'next/server'
3
4const supabase = createClient(
5  process.env.SUPABASE_URL!,
6  process.env.SUPABASE_SERVICE_ROLE_KEY!
7)
8
9export async function validateApiKey(req: NextRequest) {
10  const authHeader = req.headers.get('Authorization')
11  if (!authHeader?.startsWith('Bearer ')) {
12    return { error: 'Missing API key', status: 401 }
13  }
14
15  const key = authHeader.slice(7)
16  const { data: apiKey } = await supabase
17    .from('api_keys')
18    .select('id, user_id, is_active')
19    .eq('key', key)
20    .eq('is_active', true)
21    .single()
22
23  if (!apiKey) {
24    return { error: 'Invalid API key', status: 401 }
25  }
26
27  const windowStart = new Date(Date.now() - 60000).toISOString()
28  const { count } = await supabase
29    .from('request_logs')
30    .select('*', { count: 'exact', head: true })
31    .eq('api_key_id', apiKey.id)
32    .gte('created_at', windowStart)
33
34  if ((count ?? 0) >= 60) {
35    return { error: 'Rate limit exceeded', status: 429 }
36  }
37
38  return { apiKey }
39}

1import { NextRequest, NextResponse } from 'next/server'
2import { createClient } from '@supabase/supabase-js'
3import { validateApiKey } from '@/lib/api-middleware'
4
5const supabase = createClient(
6  process.env.SUPABASE_URL!,
7  process.env.SUPABASE_SERVICE_ROLE_KEY!
8)
9
10export async function GET(req: NextRequest) {
11  const start = Date.now()
12  const auth = await validateApiKey(req)
13  if ('error' in auth) {
14    return NextResponse.json({ error: auth.error }, { status: auth.status })
15  }
16
17  const { searchParams } = new URL(req.url)
18  const page = parseInt(searchParams.get('page') ?? '1')
19  const limit = Math.min(parseInt(searchParams.get('limit') ?? '20'), 100)
20
21  const { data, count, error } = await supabase
22    .from('items')
23    .select('*', { count: 'exact' })
24    .range((page - 1) * limit, page * limit - 1)
25
26  await supabase.from('request_logs').insert({
27    api_key_id: auth.apiKey.id,
28    method: 'GET',
29    path: '/api/v1/items',
30    status_code: error ? 500 : 200,
31    response_time_ms: Date.now() - start,
32  })
33
34  if (error) return NextResponse.json({ error: error.message }, { status: 500 })
35  return NextResponse.json({ data, meta: { page, limit, total: count } })
36}
37
38export async function POST(req: NextRequest) {
39  const start = Date.now()
40  const auth = await validateApiKey(req)
41  if ('error' in auth) {
42    return NextResponse.json({ error: auth.error }, { status: auth.status })
43  }
44
45  const body = await req.json()
46  const { data, error } = await supabase.from('items').insert(body).select().single()
47
48  await supabase.from('request_logs').insert({
49    api_key_id: auth.apiKey.id,
50    method: 'POST',
51    path: '/api/v1/items',
52    status_code: error ? 500 : 201,
53    response_time_ms: Date.now() - start,
54  })
55
56  if (error) return NextResponse.json({ error: error.message }, { status: 500 })
57  return NextResponse.json({ data }, { status: 201 })
58}

1// Paste this prompt into V0's AI chat:
2// Build an API key management dashboard at app/dashboard/page.tsx.
3// Requirements:
4// - Fetch all api_keys for the current user and display in a shadcn/ui Table
5// - Each row shows: key name, key (masked with first 8 chars visible), created_at, last_used_at, status Badge (active/inactive)
6// - Add a "Create New Key" Button that opens a Dialog with a form (key name input)
7// - On submit, insert into api_keys with a generated UUID key, show the full key once in an Alert
8// - Add a "Revoke" Button on each row with an AlertDialog confirmation
9// - Show request count per key from request_logs as a stat in each row
10// - Use Card components for summary stats at the top: total keys, total requests today, average response time
11// - Use Tabs to switch between Keys and Request Logs views
12// - Request Logs tab shows a Table of recent logs with method Badge, path, status_code, response_time_ms, and timestamp