"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Key, Copy, RefreshCw, Eye, EyeOff, ExternalLink, BarChart3, Check } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem } from "@/lib/animations" export default function APIAccess() { const [showKey, setShowKey] = useState(false) const [copied, setCopied] = useState(false) const apiKey = "sk_live_AN7xK2mQ9rX5vB3wL8pN4jR1tY6cF0eS" const copyKey = async () => { setCopied(true) setTimeout(() => setCopied(false), 2000) } return (

API Access

Manage your API keys and usage.

API Key Your secret key for authenticating API requests.


                  {showKey ? apiKey : `${apiKey.slice(0, 8)}${"•".repeat(32)}`}

Requests Today

2,847

of 10,000 limit

Avg Response Time

124ms

p99: 340ms

Error Rate

0.12%

last 24 hours

Usage History API usage over the last 7 days.

{[3200, 4100, 2800, 5100, 4700, 3800, 2847].map((val, i) => { const max = 5100 const height = (val / max) * 100 return (

{(val / 1000).toFixed(1)}k {"MTWTFSS"[i]}

) })}

) }