How to Add API Keys (OpenAI, Claude, and More)

Building an AI feature, a maps screen, or anything that talks to an outside service? Those services need an API key — a secret token that authorizes your app to use them. Snapp gives you a simple, secure place to store keys like OPENAI_API_KEY or CLAUDE_API_KEY, and then uses them in your app automatically.

Here's how.

---

Step by step

1. Get your key from the provider, for example:

- OpenAI → platform.openai.com/api-keys (sk-proj-...)

- Anthropic / Claude → console.anthropic.com (sk-ant-...)

2. Open your app in the builder.

3. Click the Settings (gear) icon, then open the Environment panel.

4. Click Add Environment Key.

5. Fill in the form:

- Key Name — use uppercase with underscores, e.g. OPENAI_API_KEY

- Key Value — paste your key

- Service Name (optional) — e.g. OpenAI

- Description (optional) — a note to your future self

6. Save.

Your key is encrypted and stored against your app. Now ask the AI to use it, for example: "Use my OpenAI key to summarize the user's notes."

---

Naming your keys

Key names must use uppercase letters, numbers, and underscores only. Snapp auto-formats them for you, so openai api key becomes OPENAI_API_KEY.

Common keys:

• OPENAI_API_KEY — OpenAI / GPT models
• CLAUDE_API_KEY — Anthropic / Claude models
• GOOGLE_MAPS_KEY — Google Maps
• …or any custom key your chosen service needs

---

Will my API keys be exposed?

For web apps: no. When your web app calls an external API (OpenAI, Claude, Stripe, and so on), the request goes through Snapp's secure proxy. You use a {{KEY_NAME}} placeholder in your code, and Snapp swaps in the real key on its own servers before forwarding the request — so your secret key is never shipped to the browser. You don't have to wire any of this up by hand: just tell the AI what you want, e.g. "Use my OpenAI key to summarize the user's notes," and it uses the secure path automatically.

For mobile apps: take a little more care. Mobile apps read their keys from the app bundle, so a determined user could extract a secret key from a publicly distributed mobile app. Keep this in mind before shipping a high-value secret key (like a paid OpenAI key) in a mobile app that anyone can download.

Best practices

• Prefer public or restricted keys where the provider offers them — a Supabase anon key or a domain-restricted Google Maps key are safe to ship.
• Set spending limits in your provider's dashboard. This is the most reliable safety net against a surprise bill, on any platform.
• For a high-value secret key in a mobile app, route the call through a backend you control rather than calling the provider directly from the app.

---

Common questions

Where do I find my key again later? Settings → Environment → Your Keys. You can update or delete any key there.

Can I add more than one provider? Yes — add as many keys as you need.

My API calls fail with an auth error. Re-check the key value (no extra spaces) and confirm the key is active and funded in the provider's dashboard.

---

What's next

• Connect Supabase if you want a secure backend to hold secret keys.
• Share your app once your AI feature works.