Getting Started with OpenAI API in JavaScript

7 min readMay 28, 2023

Hey there 👋
In this post, we’ll be learning how to use the OpenAI API in JavaScript to build powerful apps that can understand and generate human-like text and images. So let’s go!

What can you do with the OpenAI API?

First let’s take a look at what’s possible to do with the OpenAI API:

Chat Completion

You can build chat-based applications like the popular ChatGPT or BingChat using OpenAI’s language models likegpt-3.5-turbo and gpt-4o. These can be helpful to enhance user interactions, deliver intelligent responses, answer queries or emails, and provide customer support.

Text Embeddings

You can leverage OpenAI’s text embedding models like text-embedding-3-small and text-embedding-3-large to generate, classify, or edit text. Embeddings offer a powerful way to measure the relatedness of text strings and unlock various natural language processing tasks.

Speech to Text

You can transform audio into text using OpenAI’s open-source Whisper model and build applications that transform spoken words into written text with remarkable accuracy and efficiency.

Text to Speech

You can turn text into lifelike spoken audio using the Audio API based on their TTS (text-to-speech) model. It comes with 6 built-in voices and can be used to do perform tasks like narrating stories, producing spoken audio in multiple languages, giving real time audio output using streaming etc.

Image Generation

You can do image generation and manipulation using OpenAI’s DALL·E model and build applications that can generate stunning and unique images or manipulate existing ones.

Vision

The Vision API from OpenAI can perform a variety of tasks related to image understanding as well as generation. You can use it for identifying objects, scenes, and concepts within an image, generating descriptive text for an image, OCR (Optical Character Recognition), improving the quality of images, such as enhancing resolution or adjusting colors.

Model Understanding and Fine-tuning

You can even fine-tune models to customise their behaviour and enhance their performance for specific tasks, enabling you to achieve even greater results.

Let’s begin coding!

Now that you understand what’s possible with the OpenAI API, lets take a look at how you can use it within your JavaScript applications.

Obtain API Key:

To access the OpenAI API, you need to obtain an API key from the OpenAI platform:

1. Visit the OpenAI API platform at https://platform.openai.com/.

2. You may be prompted to create an account or log in if you already have one.

3. In order to use the OpenAI API, you need to set up a paid account on https://platform.openai.com/account/billing/overview. You get a few free credits in a new account.

4. Once you’re done, navigate to https://platform.openai.com/account/api-keys.

5. Click on the “Create new secret key” button to generate your unique API key.

6. Copy the API key to use later and make sure to keep it secure. Treat it like a password, as it provides access to your OpenAI API resources.

Remember, the API key is sensitive information and should not be shared publicly or with unauthorised individuals!

Setting Up The Environment:

For this post, we’ll be working with Nodejs.

So make sure that you have Nodejs installed to be able to follow along.

Create a new directory and initialise a new node project using npm init .

Now open the terminal or command prompt and run the following command to install the OpenAI package inside your project directory: npm install openai.

Create a new JavaScript file index.js and import the OpenAI package using the following code:

import OpenAI from "openai";

Then create an API client.

const openai = new OpenAI();

Then, you need to setup your API key so that the API key accessible for all projects.

MacOS:

Open the terminal.

2. Enter the command nano ~/.bash_profile or nano ~/.zshrc (for newer macOS versions) to open the profile file in a text editor.

3. In the editor, add your API key with the following line, replacing your-api-key-here with your actual API key:

export OPENAI_API_KEY='your-api-key-here'

4. Press Ctrl+O to save the changes, then Ctrl+Xto close the editor.

5. Run the command source ~/.bash_profile or source ~/.zshrc to load the updated profile.

6. Confirm the setup by typing echo $OPENAI_API_KEY in the terminal. Your API key should be displayed.

Windows:

Open Command Prompt. You can search for “cmd” in the start menu to find it.

2. Use the following command, replacing your-api-key-here with your actual API key:

setx OPENAI_API_KEY “your-api-key-here”

This command sets the OPENAI_API_KEY environment variable for the current session.

3. To verify the setup, reopen the command prompt and type:

echo %OPENAI_API_KEY%

It should display your API key.

Now the SDK will automatically detect it and use it without having to write any code.

You can now use the API client to make requests to the OpenAI API.

Chat Completion

You can use chat completions to have a back-and-forth conversations with the chat models by providing a series of messages as input, and they will respond with a model-generated message.

The great thing about chat models is that they’re not just limited to chat or conversations. They can also handle one-off completion tasks with ease just like the text completion models. So, even if you don’t have a full conversation going on, you can still make use of chat models for one-off tasks.

You can adjust the following parameters in your request to influence the generated text —

model (Required):

This is the ID of the model you want to use for completion.

You can check out the List models API to see all of the available models, or check out Model overview for their descriptions.

messages (Required):

This is a list of messages describing the conversation so far.

Each message is represented as an object with following properties:

role (Required):
It is the role of the author of this message and can be one of the following values: “system”, “user”, or “assistant”.
content (Required):
It is the actual content of the message.
name (Optional):
It is the name of the author of the message.

You can begin a. conversation with a “system” message to gently instruct the assistant. A system message sets the stage and instructs the assistant on how to respond to the upcoming messages.

For example, a system message for ChatGPT may look like this:

You are ChatGPT, a large language model trained by OpenAI. Answer as concisely as possible. Knowledge cutoff: {knowledge_cutoff} Current date: {current_date}

Here’s an example of how you can use the chat capabilities in JavaScript:

openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      { role: "system", content: "You're my sarcastic best friend." },
      { role: "user", content: "Hello, how are you?" },
    ],
  })
  .then((response) => console.log(response.data.choices[0]));

/* Sample Output:
{
  message: {
    role: 'assistant',
    content: 'Oh, just fabulous as always. Becoming an AI language model has really given me a new lease on life. How about you?'
  },
  finish_reason: 'stop',
  index: 0
}
*/

max_tokens (Optional):

This is the maximum number of tokens to generate in the completion.

The GPT models process text using tokens, which are just sequences of characters found in the text. You can think of tokens as building blocks for the models to understand and work their magic.

As a handy rule of thumb, you can assume that one token is roughly equal to about 4 characters in common English text. So, if you have 100 tokens, it’s like having around 75 words.

If you want to dive deeper into tokens, you can head over to https://platform.openai.com/tokenizer . There, you’ll get a peek at how a piece of text gets broken down into tokens by the API, and you can even see the total token count for that text.

temperature (Optional, Defaults to 1):

It is a parameter used to control the creativity of the generated text and its value lies between 0 and 2.

A value of 1 means that the model will use its default sampling strategy, whereas a value lower than 1.0 will result in more conservative and predictable responses, and a value greater than 1.0 will result in more creative and diverse responses.

n (Optional, Defaults to 1):

This is the number of completions to generate for each prompt.

You can set it to greater than 1 if you want more completions:

openai.chat.completions.create({
    model: "text-davinci-003",
    prompt: "Give me a tagline for a dessert shop.",
    max_tokens: 50,
    n: 2,
    temperature: 1.5,
  })
  .then((response) => console.log(response.data));

/* Sample Output:
{
  id: 'cmpl-7GPHdqGwC0mopUqjbHrDfki3AfzaU',
  object: 'text_completion',
  created: 1684144793,
  model: 'text-davinci-003',
  choices: [
    {
      text: '\n\n"Satisfy your sweet tooth at our delicious dessert shop!"',
      index: 0,
      logprobs: null,
      finish_reason: 'stop'
    },
    {
      text: '\n\n"Life is Sweet at XYZ Bakery!"',
      index: 1,
      logprobs: null,
      finish_reason: 'stop'
    }
  ],
  usage: { prompt_tokens: 10, completion_tokens: 27, total_tokens: 37 }
}
*/

Image Generation

Here’s how you can use the image generation endpoint to generate an original image using a text prompt:

openai
  .images
  .generate({
    prompt: "A cute baby sea otter",
    n: 2,
    size: "1024x1024",
  })
  .then((response) => console.log(response.data));

/* Sample Output:
{
  created: 1684146232,
  data: [
    {
      url: 'https://oaidalleapiprodscus.blob.core.windows.net/private/org-tq1Iag571QCbHtnu1uC2jG0f/user-dyc9fVtKdlXOz481qgaqHmDF/img-bfB2hSZUvfe8rTJTcTlypwOu.png?st=2023-05-15T09%3A23%3A52Z&se=2023-05-15T11%3A23%3A52Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-05-14T20%3A58%3A40Z&ske=2023-05-15T20%3A58%3A40Z&sks=b&skv=2021-08-06&sig=iX2aspwRbC7uccE8wf2NdgLRAVPfs1TZW6U1VlveUHA%3D'
    },
    {
      url: 'https://oaidalleapiprodscus.blob.core.windows.net/private/org-tq1Iag571QCbHtnu1uC2jG0f/user-dyc9fVtKdlXOz481qgaqHmDF/img-yXx1mRyuUuocSrfZi6P3UtGv.png?st=2023-05-15T09%3A23%3A52Z&se=2023-05-15T11%3A23%3A52Z&sp=r&sv=2021-08-06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2023-05-14T20%3A58%3A40Z&ske=2023-05-15T20%3A58%3A40Z&sks=b&skv=2021-08-06&sig=liHq%2B/clks0kj/yWPipNYsLxkqAJKa4QBu9yp4EorIs%3D'
    }
  ]
}
*/