Why Use JavaScript for AI Chatbots

JavaScript is a core language for web development and works well with server-side tools like Node.js. Using JavaScript, you can build an AI chatbot that runs on your computer or on a server without needing to learn complex frameworks. The official OpenAI JavaScript SDK lets you quickly send text prompts to AI models like GPT‑3.5 or GPT‑4 and receive smart replies, making it a great choice for beginners.

Prerequisites You Need

If you need help with any of these steps, first complete our guide on installing Python and environment basics. (Although the guide uses Python, the concepts of command line and API key handling apply to JavaScript too.)

Install the OpenAI JavaScript SDK and dotenv

Open your terminal in your project folder and run:

npm install openai dotenv

This installs:

Securely Store Your API Key

Create a file called .env in your project folder and add:

OPENAI_API_KEY=your-secret-key-here

In your JavaScript file (e.g., `index.js`), load it like this:

require('dotenv').config();
const OpenAI = require('openai');

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

This ensures your API key never appears directly in your source code.

How Tokens Work and Affect Cost

Each prompt you send and the AI’s reply uses tokens, small units of text. Generally, one token is about four English characters. For example, “Hello world!” ≈ 3 tokens. Both prompt and response tokens are billed at model-specific rates. Models like GPT‑3.5 are more cost-efficient for beginners, while GPT‑4 offers higher quality but costs more.

Send Your First Prompt and Get a Response

In `index.js`, use this function:

async function chatOnce(userMessage) {
  try {
    const response = await client.chat.completions.create({
      model: 'gpt-3.5-turbo',
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: userMessage },
      ],
    });
    return response.choices[0].message.content;
  } catch (error) {
    return `Error: ${error.message}`;
  }
}

This sends a prompt and returns the assistant’s text. Errors are caught and returned as readable messages instead of crashing the script.

Interactive Chatbot Loop for Terminal

Extend the above into a loop so you can chat continuously:

const readline = require('readline');

async function runChat() {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
  });

  console.log("Type 'exit' to quit.");
  rl.prompt();

  for await (const line of rl) {
    const userInput = line.trim();
    if (userInput.toLowerCase() === 'exit') {
      console.log('Goodbye!');
      break;
    }
    const reply = await chatOnce(userInput);
    console.log('Bot:', reply);
    rl.prompt();
  }

  rl.close();
}

runChat();

Now you can chat with your AI assistant directly in the terminal until you type “exit”.

Expecting What the Response Structure Looks Like

The SDK returns a structured JSON object similar to:

{
  choices: [
    {
      message: {
        role: 'assistant',
        content: 'Hello! How can I help you today?'
      }
    }
  ]
}

You access the text via `response.choices[0].message.content`. This is the message the assistant generated.

Troubleshoot Common Errors

Next Steps After Your First Chatbot

After verifying the chatbot works, consider adding new features:

Key Takeaways

FAQs

Can I use this chatbot in a browser instead of the terminal?

Yes. You can connect this code to a web server (e.g. Express) and expose an API endpoint. Then use HTML and JavaScript on the frontend to send prompts and display responses.

Are GPT‑4 models available via JavaScript too?

Yes. You can change the model field to a version like `gpt-4` if your API account has access. Expect higher model performance but also higher cost.

How do I inspect the full API response?

Use `console.log(response)` or `console.dir(response, { depth: null })` to see all fields returned by the API—useful for debugging and learning.

Keep Reading

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.