OpenAI's API is a powerful tool for building AI-powered applications. However, using the API directly in a client-side application, like a React

Using OpenAI's API in React without exposing your API key with Gateweaver

submited by

Style Pass

2024-05-11 14:00:03

OpenAI's API is a powerful tool for building AI-powered applications. However, using the API directly in a client-side application, like a React app, can expose your API key to potential attackers. To ensure the security of your API key, it is recommended to route requests through a backend server, as outlined in OpenAI's Best Practices for API Key Safety.

If you don't have a backend server or prefer not to set one up just to handle requests to the OpenAI API, you can use Gateweaver. This API Proxy allows you to route requests through a secure server without writing any backend code.

In this tutorial, we'll show you how to use OpenAI's API in a React app without exposing your API key by using Gateweaver to proxy requests to the API. We will build a simple React app where users can ask questions and receive answers, utilizing the OpenAI Node.js library client-side while securely routing API requests through Gateweaver to protect your API key.

We install the CLI tool as a dev dependency as we only need it during development. For production, you will most likely want to use the Gateweaver Docker image. You can find out more about deploying Gateweaver to production in the Deployment Documentation.