"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { Badge } from "./badge"; import { Button } from "./button"; import { CopyButton } from "./copy-button"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog"; import { Input } from "./input"; import { toast } from "./toast"; import { AlertTriangleIcon, EyeIcon, EyeOffIcon, KeyIcon, PlusIcon, TrashIcon } from "@kineticui/icons"; type Key = { id: string; name: string; prefix: string; scopes: string[]; created: string; used: string; env: "live" | "test" }; const seedKeys: Key[] = [ { id: "1", name: "Production server", prefix: "kn_live_7Hq2", scopes: ["read", "write"], created: "Sep 2, 2026", used: "2 min ago", env: "live" }, { id: "2", name: "CI pipeline", prefix: "kn_test_aP9x", scopes: ["read"], created: "Oct 11, 2026", used: "1 hour ago", env: "test" }, { id: "3", name: "Analytics export", prefix: "kn_live_Zm4c", scopes: ["read"], created: "Nov 1, 2026", used: "Never", env: "live" }, ]; const allScopes = ["read", "write", "admin"]; const randomKey = (env: string) => `kn_${env}_${Array.from(crypto.getRandomValues(new Uint8Array(24)), (b) => "abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789"[b % 56]).join("")}`; /** API keys manager: list with masked keys, create dialog with scopes and environment, one-time reveal, and revoke. */ export function ApiKeys() { const [keys, setKeys] = React.useState(seedKeys); const [open, setOpen] = React.useState(false); const [name, setName] = React.useState(""); const [env, setEnv] = React.useState<"live" | "test">("test"); const [scopes, setScopes] = React.useState(["read"]); const [created, setCreated] = React.useState(null); const [shown, setShown] = React.useState(false); const [confirm, setConfirm] = React.useState(null); const create = () => { const k = randomKey(env); setKeys((ks) => [{ id: String(Date.now()), name: name || "Untitled key", prefix: k.slice(0, 12), scopes, created: "Today", used: "Never", env }, ...ks]); setCreated(k); setShown(false); }; const close = () => { setOpen(false); setTimeout(() => { setCreated(null); setName(""); setScopes(["read"]); }, 200); }; return (

API keys

Keys grant access to your workspace. Keep them secret.

{keys.map((k) => (

{k.name}{k.env}

{k.prefix}••••••••••••

{k.scopes.map((s) => {s})}

Created {k.created}Used {k.used}

{confirm === k.id ? ( ) : ( )} ))}

); }

API Keys

Installation