Question

Where do I put my OpenAI key in a Windsurf frontend app?

Solved · 5 views · asked 4 weeks ago by dana_ships · edited

My lesson planner calls OpenAI. Windsurf put the key in a .env file with VITE_ prefix and it works.

What I’ve tried

Read that VITE_ variables are public but I don't understand where else to put it.

Comment

2 answers

Marked as helpful by the asker

lena_ops4 weeks ago · edited

VITE_ (and NEXT_PUBLIC_) means "ship this to the browser". Your key is in the JavaScript bundle right now; anyone can copy it and spend your credits. Rotate it today.

The key must live on a server you control: a tiny API route (Vercel function, Supabase Edge Function) that holds the key and forwards the request. The browser talks to your route, never to OpenAI. Add rate limiting to that route or the same people will spend your credits through it.

Keyboard shortcuts

Where do I put my OpenAI key in a Windsurf frontend app?

What I’ve tried

2 answers

Your answer