+
OpenAI Integration
OpenAI + Webtwizz
Paste your OpenAI API key once. Webtwizz validates it against the OpenAI API and writes OPENAI_API_KEY (and an optional default model) into your project's environment variables.
01 / The integration
What the OpenAI integration does.
The OpenAI integration is a paste-your-key flow. Webtwizz validates the key by calling the OpenAI /v1/models endpoint, encrypts it, and writes OPENAI_API_KEY to your project. If you set a default model, OPENAI_MODEL is written too. From there, anything the AI generates that calls OpenAI will pick up the key automatically. Webtwizz never proxies your traffic and never marks up calls.
02 / What you can build
The patterns this unlocks.
The flows Webtwizz scaffolds correctly the first time, so you don't spend three days reading OpenAI docs.
GPT-powered features
Once the key is set, ask the AI for a chat UI, a summarizer, a classifier. It writes a Next.js route that calls OpenAI directly using OPENAI_API_KEY.
Image generation
DALL·E calls work the same way. The integration sets the credential; the AI writes the request and the UI.
Embeddings + semantic search
Pair with Supabase + pgvector. Ask the AI for an embeddings flow and it will use the OpenAI key already in env vars.
Streaming responses
Streaming isn't auto-scaffolded by the integration. Ask for it explicitly and the AI will write Server-Sent Events using OPENAI_API_KEY.
03 / Setup
Connect OpenAI.
3 ordered steps. Open Integrations, click Connect, paste the key. The plumbing scaffolds itself.
STEP 01
Get an OpenAI API key
Sign in at platform.openai.com/api-keys and create a new secret key. Copy it.
STEP 02
Paste it into the OpenAI integration
Inside Webtwizz, open Integrations and click Connect on the OpenAI card. Paste the key. Webtwizz hits OpenAI's /v1/models endpoint to confirm it's valid before saving.
STEP 03
Optional: pick a default model
In Advanced options, choose a default model (GPT-5.4, GPT-5.4 Mini, GPT-5.3 Codex, etc.). This becomes OPENAI_MODEL in env vars. The AI can still call other models per request.
04 / Environment
Set automatically.
These show up in your project's environment variables panel the moment you connect OpenAI. No copy-paste, no .env files.
OPENAI_API_KEY
Server-only. Used by any AI-generated code that calls OpenAI.
OPENAI_MODEL
Optional default model name, set if you pick one in Advanced options. Defaults to gpt-5.4 if omitted.
05 / Questions
The honest answers.
What founders actually ask before they wire up OpenAI.
Does Webtwizz proxy or mark up OpenAI calls?
No. You bring your own API key, and any code the AI writes calls OpenAI directly from your project. Webtwizz never sits in the middle.
Is streaming auto-scaffolded?
No. The integration sets the credential. Streaming, conversation memory, retry logic, rate limiting are things you ask the AI to add. They're easy prompts ("add streaming to this chat route") but they aren't automatic on connect.
How is the key validated?
When you paste the key, Webtwizz calls https://api.openai.com/v1/models with it. If the call succeeds, the key is saved. If it fails, the modal shows an error and nothing is stored.
Can I switch between OpenAI and Claude?
Yes, by connecting both integrations. Both write env vars. The AI can route different features to OPENAI_API_KEY or ANTHROPIC_API_KEY when you ask for it.
What happens if I disconnect?
Webtwizz removes OPENAI_API_KEY (and OPENAI_MODEL if set) from env vars and clears the stored value. Anything in your project that calls OpenAI will start failing until you reconnect.
Plug in OpenAI and ship
Webtwizz is the AI app builder that lets you edit AI-generated code visually, and ship full-stack apps with auth, databases, and payments.
120 free credits · No credit card required