Loading...
Loading...
> Generate, view, and revoke API keys for programmatic access with copy-to-clipboard and search functionality.
1import { ApiKeyManager } from "@/components/ui/api-key-manager"
Manage API keys for programmatic access
Production API Key
key_1sk_l••••••••••••••••••••DEMO[CREATED]: 12/1/2025 • [LAST USED]: 12/8/2025
Development Key
key_2sk_t••••••••••••••••••••DEMO[CREATED]: 12/5/2025
1<ApiKeyManager2 userId="user_123"3 initialKeys={keys}4 onGenerate={async (name) => {5 // Generate key logic6 return newKey;7 }}8 onRevoke={async (id) => {9 // Revoke key logic10 }}11/>
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional CSS classes for the container. |
| userId | string | required | The ID of the user managing API keys. |
| onGenerate | (name: string) => Promise<ApiKey> | undefined | Callback function to generate a new API key. If not provided, uses mock implementation. |
| onRevoke | (id: string) => Promise<void> | undefined | Callback function to revoke an API key. |
| initialKeys | ApiKey[] | [] | Initial array of API keys to display. |