DEV Community

Cover image for Creating a ChatBot using Open-AI in JS

Posted on • Updated on


Creating a ChatBot using Open-AI in JS

So I have been using GitHub copilot for a while now. GitHub Copilot is a Plugin for VSCode/JB IDEs/NVIM that provides you with intelligent code completion, suggestions and in my opinion the next big thing in Software Coding in general.

I was always really interested in how the whole AI Suggestion works and how it could be used in my own projects.


While looking into it, I came across the Open-AI Playground, a playground for Open-AI's text-davinci-002 model.

What is Open-AI's text-davinci-002 API?

text-davinci-002 is a model that can be trained to generate text from a given input.

It also provides an API to interact with the model which is actually quite easy to use.

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
const openai = new OpenAIApi(configuration);

const response = await openai.createCompletion("text-davinci-002", {
  prompt: "Hey how are you?\n", // question for the ai goes here
  temperature: 0, // 0 means no randomness and usually the best result
  max_tokens: 100, 
  top_p: 1.0,
  frequency_penalty: 0.2,
  presence_penalty: 0.0,
  stop: ["\n"],
Enter fullscreen mode Exit fullscreen mode

Creating the ChatBot

So I decided to create a ChatBot that can be used to interact with the AI. Developing with GitHubs Copilot I already noticed, that Context is always very important and helps the AI to understand what kind of response he should give.

So first thing I do is configure the AI! How do you ask? WITH CLEAR TEXT!

function conversationContext(aiName, attributes) {
  return `\n
    The following is a conversation with an AI. The AI is ${attributes}.
    ${aiName}:Hi, I am an AI. Whats your question?
Enter fullscreen mode Exit fullscreen mode

Now we will feed this context to the AI, which, with more context, will give us a better response.

const promt = () => {
return `${conversationContext(aiName, attributes)}Human:${question}
Enter fullscreen mode Exit fullscreen mode

Here we just want want the AI has to say, like:

Human:Hello, who are you?
Enter fullscreen mode Exit fullscreen mode

The Final Bot

Wrapping that all up into a nice React Application and the Bot is ready to go! Below I have some examples.


The Chatbot is hosted on Netlify and the source code is available on Github

Chatbot on Netlify

Have fun, and I hope will find it useful in maybe finding your next Project Idea!

Top comments (0)

The AI Brief

AI generated git commit messages

Minimize the struggle of remembering what you just coded. AI-generated commits make it easier to manage projects and keep track of changes. The Nutlope/aicommits project demonstrates how AI can improve commit messages.

I open sourced an AI that creates any UI in seconds

Make AI-generated user interfaces a breeze. This open-source project harnesses the power of generative AI technologies like chatGPT to create versatile, quick, and intuitive UI components.

Use AI to commit like a PRO in 1 second

Upgrade your commit message game with AI. Boost your productivity by using ChatGPT to generate commit messages and avoid context switching. OpenCommit is an open-source library that helps you achieve this easily.

Build your own ChatGPT starter kit

Train AI models on custom data for improved domain-specific knowledge. Combine the power of WebView technologies and this starter kit to train your ChatGPT model on specific websites, allowing for better-optimized outcomes.