How I Built an AI Chatbot Using OpenAI API in 30 Minutes | Beginner Project

#opensource #devops #webdev #ai

In this post I will show you how to build a simple AI chatbot using the OpenAI API in just 30 minutes. This is a beginner friendly project and requires only basic knowledge of JavaScript.....[Read More]

What We Are Building

We are creating a simple chatbot that takes user input, sends it to OpenAI API, gets AI response, and displays it in the browser.

Requirements
Basic HTML CSS JavaScript, OpenAI API key, modern browser, code editor like VS Code

Step 1: Create Project Files
Create three files index.html, style.css, script.js

Step 2: HTML Setup
HTML
<!DOCTYPE html>

AI Chatbot

Send

Step 3: CSS Styling
CSS
body {
font-family: Arial;
background: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
width: 400px;
background: white;
padding: 20px;
border-radius: 10px;
}

chatbox {

height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
margin-bottom: 10px;
padding: 10px;
}

input {
width: 70%;
padding: 10px;
}

button {
padding: 10px;
}

Step 4: JavaScript Code
JavaScript
async function sendMessage() {
let input = document.getElementById("userInput").value;
let chatbox = document.getElementById("chatbox");

chatbox.innerHTML += "

You: " + input + "

let response = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_API_KEY"
},
body: JSON.stringify({
model: "gpt-4o-mini",
messages: [{ role: "user", content: input }]
})
});

let data = await response.json();

let reply = data.choices[0].message.content;

chatbox.innerHTML += "

AI: " + reply + "

";
}

Step 5: Add API Key
Replace YOUR_API_KEY with your OpenAI API key
Output
You will get a working chatbot where you type message and AI responds instantly
What You Learned
How to use OpenAI API, how to send fetch requests, how to build chat UI, basic frontend integration

Conclusion
This is a simple beginner project that helps you understand how AI apps are built and how APIs work in real projects.