This tutorial will have three parts to it, not all of which might be applicable to you:

• The first part shows how to obtain an API key from OpenAI (in the course, you’ll be able to use a provided key - but you want to do this if you’re doing project outside of the course)
• The second part is about setting up a proxy server, which will intercept the requests originating from p5.js, adding the secret API key to it before sending it on to OpenAI’s servers. Why? Because it isn’t possible to keep this key a secret inside the p5 sketch - and with the API keys other people could use the API on your dime. (in the course, there’s a proxy server available for you to use)
• The third part is about actually interfacing with OpenAI’s API from p5.js.

1. Getting an API key from OpenAI

• Connect to the New York NYU VPN (vpn.nyu.edu), as adding (US) payment cards seems to fail when the location is detected outside the US.

• Go to https://platform.openai.com/account/billing/overview. You will need to log in with your OpenAI account (same as used with ChatGPT for this).

• Click “Start Payment Plan”

  

• Enter your Credit Card details.

  

• Set a limit for how much you want to spend on exploring the OpenAI API. Make sure to leave “automatic recharge” off. Otherwise you might have to face horrendous credit card bills (even when following all steps of this tutorial, and your key doesn’t leak). You can always add additional funds to your OpenAI account at a later date, if needed.

  

• Once adding funds has succeeded, navigate to “API keys” (on the left).

  

• Click “Create new secret key”. Copy your very own API key that this generates, as this is only available once. (You can always delete the key and create a new one, though.)

  

• And that’s all! The string you copied is the so-called API key, which you will need to authenticate your request with OpenAI. Make sure to not share it with others, or include it in p5.js sketches (directly), or code you upload to GitHub.

• You can always delete (revoke) the key on the same website if you want to invalidate an existing key.

2. Setting up an authentication proxy server

The proxy server will sit between your p5 sketch and OpenAI’s servers and add your API key to all requests. You can either run this proxy locally using node.js (outside the scope of this tutorial), or you can set it up on Glitch - which is what this tutorial is showing how to do: