API Keys
Layout uses your own API keys to connect to AI providers and Figma. Keys are stored locally in your browser and never sent to our servers. This page explains how storage works, why keys can disappear, and how to fix it.
How keys are stored
When you add an API key in Settings → API Keys, it is saved to your browser's localStorage. This is a deliberate security choice:
- Keys never leave your browser. They are sent directly to the AI provider (Anthropic, Google AI) via your browser, not via our servers.
- We cannot read, log, or access your keys. If you lose a key, we cannot recover it for you.
- There is no server-side database of personal API keys. Your keys exist only in the browser that saved them.
This is the same approach used by tools like the Anthropic Console Workbench and Google AI Studio. Your keys stay with you.
Why keys can disappear
Because keys are stored in localStorage, they are scoped to your specific browser profile and origin. Several common actions will cause them to disappear:
| Action | What happens |
|---|---|
| Switch Chrome profile or window | Each Chrome profile has its own localStorage. Keys from one profile are not available in another. |
| Clear browsing data / cookies | Most "clear data" options also clear localStorage, which removes your keys. |
| Use incognito / private mode | Incognito localStorage is wiped when you close the window. Keys do not persist. |
| Switch to a different browser | Chrome, Firefox, Safari, and Arc each have separate storage. Keys from one browser are not available in another. |
| Log in on a different device | Keys are stored per-device, not per-account. Logging into Layout on a new laptop requires re-adding your keys. |
Layout will show an amber warning banner in the Explorer if it detects that keys you previously added are no longer available. Look for the key icon next to the model selector.
How to re-add keys
- Go to Settings → API Keys(or click the amber "Add keys" link in the Explorer toolbar).
- Paste your API key and click Save.
- Keys take effect immediately. No page reload or restart is needed.
If you no longer have your API key, you can generate a new one from the provider's console:
- Anthropic: console.anthropic.com/settings/keys
- Google AI: aistudio.google.com/apikey
- Figma: figma.com/developers/api (Personal Access Token)
Which keys you need
Not every feature requires a key. Here is what each key unlocks:
| Feature | Key required | Notes |
|---|---|---|
| Explorer (Claude Sonnet 4.6) | None (uses hosted credits) | Add your own Anthropic key for unlimited usage |
| Explorer (Claude Opus 4.5) | Anthropic API key | BYOK only. Billed directly by Anthropic. |
| Explorer (Gemini 3.1 Pro) | Google AI API key | BYOK only. Billed directly by Google. |
| Figma extraction | Figma Personal Access Token | Required to read your Figma files via the REST API. |
| Website extraction | None | Uses a headless browser. No API key needed. |
| AI image generation | Google AI API key | Used to generate placeholder images in components. |
Tips
- Use the same Chrome profile consistently. If you always open Layout in the same profile, your keys will persist between sessions.
- Bookmark the API Keys settings page. If you need to re-add keys frequently (e.g. you use multiple machines), bookmark the settings page for quick access.
- Keys are per-browser, not per-account. If you log in from a different device or browser, you will need to re-add your keys. Your Layout account does not sync keys across devices.
- BYOK means unlimited free usage. When you provide your own API key, Layout does not charge credits. You are billed directly by the provider at their standard rates.