How to run OpenAI on local "server" - converting "Learning AI Engineering" to a local project

[proven temple]

Hi,
I'm pretty new to web dev so please forgive my begineer question. I have been trying for a few hours now to get the OpenAI project from scrimba working locally and I'm having such a hard time. There are so many errors out of the gate. import statements don't work, process.env doesn't work because apparently that doesn't work in the browser. I tried watching a few tutorials on npm and node.js because it seems like it's a server related issue, but then how do you plug OpenAI which can be a front end and still use server? I'm just very lost. Any help in a high-level overview of how browsers and servers work together would be incredible.

Also another thing I tried was using http-server as a dependency and I have tried running that but that also breaks things as well.
For context I'm using VSCode to attempt to run code locally. I have live-server extension and trying to run things that way. I'm also trying in my "start" script in package.json I'm trying to say "start" : "http-server index" but that doesn't work either.

[flat viper]

Did you download the OpenAi dependency locally ? https://www.npmjs.com/package/openai

[proven temple]

Yes I did

npm install openai

It shows up in the node_modules which is fine, but I can't figure out how to import it into index.js. I'm trying to just get it to work client side. Seems like it can only work server side. That's my issue. Cuz it needs env var openai api key

I'm doing this to get api key.
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
});

But it's the import that bumps it.
import {OpenAI} from './node_modules/openai/src/index.ts';

[nocturne obsidian]

@proven temple

1. Server vs. Frontend: Web development has server-side (handles requests, data processing) and client-side (runs in the browser) components. OpenAI API can be used on both but with different setups.

2. Environment Variables: process.env is for server-side Node.js, not for browsers. For browser use, consider storing variables in config files or using build tools like webpack.

3. Import Statements and Dependencies: Ensure correct file paths and dependencies. Use npm or yarn to install dependencies.

4. Local Development Setup: For simple static files, http-server works. For complex scenarios, use Node.js with Express.js for server-side logic, and a frontend framework like React.js or a templating engine like EJS. Use webpack to manage dependencies and environment variables.

With this structure, you can manage both server-side and client-side code effectively, enabling you to integrate OpenAI API and handle other functionalities seamlessly.

[frank kayak]

you’ll also need to import ‘dotenv’ from ‘dotenv’ however I do not recommend doing things this way. Scrimba does this in lessons because it is a quick and easy configuration to get things working and teach OpenAI/API call fundamentals; however, in production your api key will be exposed in the client side (browser) logs.

I’d recommend learning netlify serverless functions or Cloudflare worker functions (better choice of the two imo). These will get your code working locally for testing and properly hide your api keys from the client. They are more work now vs. the env method but learning one or both of these will pay dividends in the future when you need/want to hide your keys as a best practice

https://scrimba.com/learn/aiengineer/learn-secure-robust-deployment-strategies-cvqQzDU8

https://scrimba.com/learn/buildaiapps/netlify-sign-up-cof1140668eb8f54c80ca3cc0

[proven temple]

Thank you Ed, yeah that is something I still don't understand yet. So even if you don't host your .env file on github for everyone to see somehow using browser tools you can still see the key? Even though in code you are saying process.env.OPENAI_API_KEY? What happens exactly? Does process.env.OPENAI_API_KEY get replaced by the actual key when you go to inspect?
Supposedly github pages allows you to put env vars in the settings of your repo but I don't think it works the same way as process.env.
Btw I'm not seeing scrimba using dotenv in the lessons, I'm doing that only on my end because that's how I seem to have to get it to work when I try locally.

And btw yes I was using import dotenv.. sorry I didn't explain my whole code base.

Didn't want to bore everyone with all the details

[proven temple]

Thank you, this helps give me an overview. Perhaps I can try using webpack.

[frank kayak]

Scrimba uses .env (I think) it’s just taken care of for you on the back end when you add your environment variables to your own account. The reason the key is exposed when using just .env and not a server or something like netlify or cloudflare is because you are calling the api directly from the client (browser). When using a server or one of those providers, you send a POST request (w/ words or data created by user) from the client to the server which then sends the response data back to the client for further processing. So the OpenAI instance is initiated in the server and hidden from the client. Does that make sense?

[nocturne obsidian]

No problem!

[proven temple]

Yes, it makes sense, but I'm trying to be extremely careful with my api keys and so I'm still confused as to when / if api keys can be leaked. Is it any time any sort of process.env code gets pushed to github? Is it only when you have a website up and running that api keys can be stolen? I've read that even vercel env vars don't hide api keys. Idk how to securely hide them. If vercel doesn't hide them then what in the world can we trust to hide them when deploying apps online?

[frank kayak]

I’m not sure about vercel but netlify and cloudflare will hide them client side. For your own curiosity (this helped me) when using .env client-side you can check the dev tools network tab and look at headers. The key will be exposed when your site calls the api. A private server or third party “hides” it because those logs are not exposed to the client. The client will only get the response code (ie 200), response data (ie api message response), etc. if you do stick with .env and using your own server, make sure to add the .env to a .gitignore file so it is not pushed to GitHub. GitHub desktop is good for this where it creates that file for you when creating a repo there. I’m sure there are more sophisticated ways of illicitly getting keys but that is beyond my skill

[proven temple]

Thanks Ed, when you say "Use env client side" what exactly would that entail? Because client code can't read env vars I thought since it's browser and browser can't read what's on disk. Only server files can do that I thought.

[frank kayak]

I meant that, based on my understanding and what I know at this point, using process.env without a back end server of some sort despite environment variables being on disk, will expose the api key in client side dev tools. This became much clearer and less theoretical to me when I checked logs of improper set ups, vs logs of proper set ups and saw the difference in available api response information

[proven temple]

Very cool thanks. Did you test on your own projects or someone else's? If there's examples would be good to see.. if you have them. If not, no biggy. Thanks for all your walk through! 🙂