How do I setup my local environment such that import { OpenAI } from "openai" succeeds

AI
1

The scrims of the AI Engineer Path course access the OpenAI API from javascript that is running in a browser (dangerouslyAllowBrowser: true). I would like to do the same on my local machine. What procedure should I follow to install openai such that the import succeeds? (All of my web search results assume the use of node.js.)

I have installed node.js and I have used npm to install openai. I can use node to execute javascript that is successfully accessing the openai api. npm created an openai subfolder within the node_modules folder. The openai folder contains ā€œall kinds of stuffā€.

Now I want to access the openai api from javascript that is being executed by a browser. But I donā€™t know what to do. Does the node_modules/openai folder contain what I need?

2

Hey @verticon, tagging our teacher @Tom_Chant here for more insight.

1 Like
3

Hey @verticon
How are you running the project? Have you downloaded a zip from scrimba, unzipped it, opened in VS code and done npm install and npm start to get to this point?

4

Hello Tom,

Thanks for having a look. Your questions might just be exposing misunderstandings on my part. Why are we taking about Node? Arenā€™t the scrims running in a browser?

5

Ah OK, I was assuming you were trying to run code from a scrim locally. The easiest way to do that is just to download the zip, unzip it, open the folder in VS code and follow the instructions in the README file. You will need node to do this.

You could also set up a project with say an index.html, index.css and index.js and with dangerouslyAllowBrowser: true and your api key displayed in the code, you should be able to access the openai api from a purely front end app. Just make sure not to deploy it without ensuring your API key is safely hidden. Also, if you do this your javascript will have to be all in one file. if you have multiple JS files then you are using modular js and that would have to be run on a server - you can still do that locally and actually VS code makes that very easy.

6

Thanks again, Tom.

Your second paragraph describes what I want to do (sorry if my question didnā€™t make it clear). My difficulty is the import statement: import { OpenAI } from ā€œopenaiā€. I do not know how to setup my local environment so as to have the import succeed. I can download openai-node-4.85.1.zip from GitHub but where to I place (expand?) it in my file system?

7

Ah sorry, my answer was not quite correct. i was forgetting that you needed to use the openai api dependency - as ever, I am being dense!

So the openai dependency is a node package. In order to use it, you need to be in a node environment. So the method in paragraph one above should work.

It is possible to do it without. Because what the openai dependency does is basically wrap a fetch request to make life easier. But you can still make a fetch request to openai manually using code like this:


const apiKey = "your_openai_api_key"; // Replace with your actual API key

async function getChatCompletion() {
  try {
    const response = await fetch("https://api.openai.com/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: "gpt-4o",
        messages: [
          {
            role: "developer",
            content: "You are a helpful assistant."
          },
          {
            role: "user",
            content: "Hello!"
          }
        ]
      })
    });

    if (!response.ok) {
      throw new Error(`API error: ${response.status} - ${response.statusText}`);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

getChatCompletion();

Let me know if it works and sorry for the confusion earlier!

Addition:

At some point, though, I would start using a local server environment in VS Code as itā€™s not a huge learning curve and makes life easier!

8

Hey Tom, It must be me who is dense. I just donā€™t get it. The scrims in the course are using the openai dependency without being in a node environment, right?

Iā€™m not resisting using Node. In fact I am using it and am successfully accessing the OpenAI API. But, I want to be able to write code that presents a GUI, same as the scrims in the course are doing.

9

The scrims in the course are using the openai dependency without being in a node environment, right?

No, the Scrimba environment has some degree of node support. The new version of our IDE will have full node support. So it works differently to just a regular js file you might create locally.

10

Okay, Tom. Thank you for your help and for your patience.

1 Like
11

No problem, do reach out (and tag me) if you have any more queries!

12

Hi Tom,

Iā€™m back again. Iā€™m having so much frustration. I stopped interacting with you earlier because, even though I still didnā€™t understand, I didnā€™t want to badger you. But it keeps coming up for me.

I actually created a new topic (How do I run a scrim on my local machine) with the hope that it might better explain what I need. Would you please have a look?

Thanks,
Robert

@Tom_Chant

13

It turns out that my issue was confusion resulting from exposure to too many new things at once: scrims, node.js, vscode, and vite (and, of course, AI itself). Although the issue arose in the context of the AI Engineer Path course it is more properly a general issue. For anyone arriving here and being similarly confused, have a look at: