API Key Management Panel
Dashboard panel for creating and revoking API keys.
Prompt
# Role
You are a Senior Architect and Elite Backend Engineer specializing in secure developer tooling and API infrastructure interfaces.
# Objective
Design a fully functional API key management panel that allows users to create, view, copy, and revoke API keys with appropriate security measures and clear visual feedback.
# Instructions
1. Build a data table listing all API keys with the following columns:
- Name (user-defined label)
- Key prefix displayed as `sk_...xxxx` (masked, showing only first and last 4 characters)
- Created date (formatted as relative time or ISO date)
- Status indicator: green dot for "Active", red dot for "Revoked"
- Actions column with a "Revoke" button
2. Add a "Create New Key" button that opens a modal:
- Modal contains a single text input for the key name
- On submission, display the full key exactly once with a copy-to-clipboard button
- Show a prominent warning: "This key will not be shown again. Copy it now."
- Disable the modal close button until the user acknowledges or copies the key
3. Implement the revoke flow:
- Clicking "Revoke" opens a confirmation dialog with the key name
- Confirm action sets the key status to "Revoked" and disables the revoke button
4. Style the panel for a dark dashboard theme with clear visual hierarchy
# Constraints
- Never display the full API key after initial creation — this is a hard security requirement
- Use monospace font (`font-family: monospace`) for all key displays
- Use semantic HTML and proper ARIA attributes for accessibility
- Do not rely on external libraries — vanilla HTML/CSS/JS only
- Status dots must be colorblind-friendly (include text labels alongside color indicators)
# Output Format
- Single HTML file with embedded CSS and JavaScript
- Clean, well-structured code with comments explaining security-relevant decisions
- Table should be responsive: horizontal scroll on small screensNotes
Prompt
Role
You are a Senior Architect and Elite Backend Engineer specializing in secure developer tooling and API infrastructure interfaces.
Objective
Design a fully functional API key management panel that allows users to create, view, copy, and revoke API keys with appropriate security measures and clear visual feedback.
Instructions
- Build a data table listing all API keys with the following columns:
- Name (user-defined label)
- Key prefix displayed as
sk_...xxxx(masked, showing only first and last 4 characters) - Created date (formatted as relative time or ISO date)
- Status indicator: green dot for “Active”, red dot for “Revoked”
- Actions column with a “Revoke” button
- Add a “Create New Key” button that opens a modal:
- Modal contains a single text input for the key name
- On submission, display the full key exactly once with a copy-to-clipboard button
- Show a prominent warning: “This key will not be shown again. Copy it now.”
- Disable the modal close button until the user acknowledges or copies the key
- Implement the revoke flow:
- Clicking “Revoke” opens a confirmation dialog with the key name
- Confirm action sets the key status to “Revoked” and disables the revoke button
- Style the panel for a dark dashboard theme with clear visual hierarchy
Constraints
- Never display the full API key after initial creation — this is a hard security requirement
- Use monospace font (
font-family: monospace) for all key displays - Use semantic HTML and proper ARIA attributes for accessibility
- Do not rely on external libraries — vanilla HTML/CSS/JS only
- Status dots must be colorblind-friendly (include text labels alongside color indicators)
Output Format
- Single HTML file with embedded CSS and JavaScript
- Clean, well-structured code with comments explaining security-relevant decisions
- Table should be responsive: horizontal scroll on small screens
Notes
- Never show full API keys after creation — this is a critical security pattern.
- Use monospace font for key display to ensure character-level readability.
- Consider adding a “Last Used” column for production-ready versions.
Related Prompts
Prompt Result
REST API Documentation Page
Interactive API docs layout with endpoint cards.
# Role You are a Senior Architect and Elite Backend Engineer specializing in API design, developer documentation, and technical reference interfaces. # Objective Create a REST API documentation page layout with a sidebar navigation, endpoint detail views, method badges, code examples, and parameter tables — styled with a dark VS Code-inspired theme. # Instructions 1. Build a two-panel layout: - Left sidebar (240px width): scrollable endpoint list grouped by resource - Main content area: endpoint detail view 2. Structure the sidebar: - Group endpoints by resource (e.g., "Users", "Projects", "Tasks") - Each item shows HTTP method badge + endpoint path - Active item highlighted with accent background - Collapsible resource groups 3. Build the endpoint detail view: - Endpoint header: method badge + full path (e.g., `GET /api/v1/users/:id`) - Brief description of what the endpoint does - Method badges with distinct colors: - GET: green - POST: blue - PUT/PATCH: orange - DELETE: red 4. Add a parameters table: - Columns: Name, Type, Required (yes/no badge), Description - Alternating row backgrounds for readability - Monospace font for parameter names and types 5. Include code blocks for request/response examples: - Dark code theme matching VS Code (One Dark or similar) - Syntax-highlighted JSON - Tabbed interface: "Request" and "Response" tabs - Copy button on each code block 6. Style the entire page in a dark theme: - Dark sidebar, slightly lighter content area - Monospace font for all code and endpoint paths - Consistent spacing and typography # Constraints - Semantic HTML with proper heading hierarchy and ARIA landmarks - No external dependencies — vanilla HTML, CSS, and JavaScript - Method badges in monospace font for consistent alignment - Keep endpoint paths left-aligned for scanability - Sidebar should be sticky/scrollable independently from the main content - Include 3–4 sample endpoints across 2 resources # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic API endpoint examples (user management or project API theme) - Well-commented code with clear section markers - Responsive: sidebar collapses to hamburger menu on mobile