API keys page template for SaaS apps

What does this API keys page template include?

A table of API keys with key name, live and test environment labels, a masked key value with reveal and copy icons, creation date, last used date, and rotate and revoke actions, plus a webhook secret section with a reveal and rotate action.

How does the API key masking work on this developer settings page?

Keys show as masked strings with just the last four characters visible. Two icons sit to the right: one to reveal the full API key value and one to copy it to the clipboard. This keeps keys out of view by default while still making them accessible when needed.

What is the webhook secret section on this API keys page?

The webhook secret is a separate signing secret for verifying that incoming webhook events are from the expected source. It has its own reveal icon and a rotate action to generate a new secret without affecting any API keys.

Which settings templates make up the full settings surface?

Six templates cover the settings surfaces of a SaaS product: the account settings page for profile photo, personal details, and display preferences, the workspace settings page for workspace name, URL, and ownership transfer, the team members page for inviting members, assigning user roles, and managing seats, the API keys page for live and test API keys and a webhook secret, the integrations page for connected apps and available services, and the security settings page for password, two factor authentication, active sessions, and SSO.

Which vibe coding tools work with this API keys page template?

Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor. Paste it in and describe the API key fields, environment labels, and the webhook secret section you want.