Open In App

Create Working Chatbot in HTML CSS & JavaScript

Last Updated : 17 Jun, 2025
Summarize
Comments
Improve
Suggest changes
Share
28 Likes
Like
Report

A working chatbot is an application that can be developed to answer every sort of question. Chatbot is a web interface that can answer every question in the most human possible way. It is based on the technology of artificial intelligence. In this article, we will be learning how to create a working chatbot using HTML, CSS & Javascript by using OpenAI's API Key.

Screenshot-(370)
Chatbot Preview

Prerequisites:

Step-by-Step Guide of Working Chatbot

  • Create a directory with 3 files & one cross icon : index.html, style.css & script.js. Add basic boiler plate code and create a container of a chatbot with a cross icon to remove the chatbot after use, two paragraphs, one for incoming messages, and the other one for outgoing messages. Also create a send button to send a message.
  • Create styling for the containers & also add a class of error where the incoming message's container turns light red in color to show there is an error in API Key.
  • Create a free OpenAI Key using the official website. Create an account, or login onto your existing account and go to API Documentation. Select the option to view secret API Keys, and create a new API Key. Store it for future usage.
  • Copy the API Key in the script file and generate a response using fetch method. Add the required headers and add the answer or response to the message if the API key works successfully. If not generate an error message stating that an error occurred. Finally, whatsoever message is created, scroll the chatbot container downwards.
  • The send button handles the sending of messages.
  • On clicking the cross button, the chatbot container disappears and a final thanks message is received.

Project Structure:

project structure
Project Structure

Example: This example demonstrate the working of Chatbot by giving response of the user queries and it shows an error when there is an error in the API key.

index.html
style.css index.js

Output: When API Key is working absolutely fine

Output
Chatbot Output

Note: When any error occurs any issue in the API Key

Output
Error in API

Similar Reads