You can’t really hide your API key in a React app because anything in the frontend is visible to the user (including the key in the network tab). So, calling OpenAI directly from the frontend will always expose it.

To keep your key safe, the best option is to use a backend (like Node.js/Express or Python) to make the request for you. That way, the API key stays hidden from the user.

If you don’t want to deal with a full backend, you could try using serverless functions (like Vercel or Netlify), which essentially act as tiny backends to handle the API call securely.

In short, you need some kind of backend to protect the key — no way around that for security reasons.