MACRO NEPAL
FREE SOURCE CODE FOR A GPT 5 MINI CHATBOT
awiskar acharya
October 17, 2025
6:36 am
HOW TO ADD FREE CHABOT TO YOUR WEBSITE WITH OUT SERVER AND MONEY

Introduction

This code creates a fully functional AI Chatbot interface using HTML, CSS, and JavaScript, connected to an AI model called GPT-5 Nano through the Puter AI API. The chatbot is designed to simulate intelligent conversations with users, providing a smooth, modern, and responsive chat experience.

The interface is clean, interactive, and mobile-friendly, featuring a gradient background, animated typing indicators, and visually distinct user and bot messages.
It’s ideal for integrating into websites, customer support systems, or educational tools that require automated, intelligent responses.

Main Features of the Code

1. Modern and Responsive UI Design

  • The chatbot window is styled with gradient colors, rounded corners, and shadow effects, giving it a modern and professional look.
  • It adapts to all screen sizes through responsive CSS, ensuring smooth performance on desktops, tablets, and smartphones.

2. Interactive Chat Functionality

  • The system allows users to type and send messages via a text box or by pressing the Enter key.
  • Each message appears dynamically inside the chat window with smooth fade-in animations, making the interaction more natural.

3. AI Integration via Puter API

  • The code connects to Puter AI using the puter.ai.chat() method.
  • It sends the user's message to the GPT-5 Nano model and displays the AI’s response in real time.
  • If there’s a connection issue, the bot shows an appropriate error message instead of crashing.

4. Animated Typing Indicator

  • The bot includes a typing animation (three bouncing dots) that appears while waiting for the AI’s response.
  • This adds realism to the conversation by simulating the bot “thinking” before replying.

5. Message Display System

  • Messages are visually separated into:
    • User messages (aligned to the right, blue background)
    • Bot messages (aligned to the left, gray background)
  • The interface automatically scrolls down with each new message, keeping the latest conversation visible.

6. Smooth Animations and Transitions

  • Subtle CSS animations (fade-ins, hover effects, and button scaling) enhance the user experience.
  • The send button slightly enlarges when hovered and shrinks when clicked, giving responsive feedback.

7. Accessibility and Usability

  • The chatbot automatically focuses on the input box when the page loads, improving usability.
  • The chat layout and color contrast make text easy to read for all users.

Technical Overview

  • HTML structures the chat layout (header, message area, input field, and send button).
  • CSS handles all visual styling — background gradients, fonts, animations, and responsive design.
  • JavaScript manages user interactions, message handling, API communication, and dynamic UI updates.
  • The Puter AI library (https://js.puter.com/v2/) enables seamless connection to the AI model.

Conclusion

This AI Chatbot project showcases a perfect blend of design, interactivity, and intelligence.
It provides an engaging chat experience using modern web technologies and AI integration.

The code stands out for its:

  • Real-time conversational flow,
  • Beautiful interface, and
  • Seamless user-AI interaction.

With small modifications, this chatbot can be integrated into customer service platforms, educational assistants, business websites, or even personal AI projects.
It represents a modern, scalable approach to embedding AI-powered communication directly within a web environment.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chatbot</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6e8efb, #a777e3);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.chat-container {
width: 100%;
max-width: 800px;
height: 80vh;
background-color: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-header {
background: linear-gradient(to right, #6e8efb, #a777e3);
color: white;
padding: 20px;
text-align: center;
position: relative;
}
.chat-header h1 {
font-size: 1.5rem;
font-weight: 600;
}
.chat-header p {
font-size: 0.9rem;
opacity: 0.9;
margin-top: 5px;
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
}
.message {
max-width: 80%;
padding: 12px 18px;
border-radius: 18px;
line-height: 1.4;
position: relative;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.user-message {
align-self: flex-end;
background-color: #6e8efb;
color: white;
border-bottom-right-radius: 5px;
}
.bot-message {
align-self: flex-start;
background-color: #f0f2f5;
color: #333;
border-bottom-left-radius: 5px;
}
.typing-indicator {
align-self: flex-start;
background-color: #f0f2f5;
padding: 12px 18px;
border-radius: 18px;
border-bottom-left-radius: 5px;
display: none;
}
.typing-dots {
display: flex;
gap: 4px;
}
.typing-dots span {
height: 8px;
width: 8px;
background-color: #999;
border-radius: 50%;
display: inline-block;
animation: typing 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
}
.chat-input-container {
display: flex;
padding: 15px;
border-top: 1px solid #eee;
background-color: white;
}
.chat-input {
flex: 1;
padding: 12px 18px;
border: 1px solid #ddd;
border-radius: 25px;
outline: none;
font-size: 1rem;
transition: all 0.3s;
}
.chat-input:focus {
border-color: #6e8efb;
box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2);
}
.send-button {
background-color: #6e8efb;
color: white;
border: none;
border-radius: 50%;
width: 45px;
height: 45px;
margin-left: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.send-button:hover {
background-color: #5a7dfa;
transform: scale(1.05);
}
.send-button:active {
transform: scale(0.95);
}
.send-button svg {
width: 20px;
height: 20px;
}
/* Responsive styles */
@media (max-width: 768px) {
.chat-container {
height: 90vh;
border-radius: 15px;
}
.message {
max-width: 90%;
}
.chat-header h1 {
font-size: 1.3rem;
}
}
@media (max-width: 480px) {
body {
padding: 10px;
}
.chat-container {
height: 95vh;
border-radius: 10px;
}
.chat-header {
padding: 15px;
}
.chat-messages {
padding: 15px;
}
.message {
max-width: 95%;
padding: 10px 15px;
}
.chat-input-container {
padding: 10px;
}
}
</style>
</head>
<body>
<div class="chat-container">
<div class="chat-header">
<h1>AI Assistant</h1>
<p>Powered by GPT-5 Nano</p>
</div>
<div class="chat-messages" id="chatMessages">
<div class="message bot-message">
Hello! I'm your AI assistant. How can I help you today?
</div>
</div>
<div class="typing-indicator" id="typingIndicator">
<div class="typing-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="chat-input-container">
<input type="text" class="chat-input" id="chatInput" placeholder="Type your message here...">
<button class="send-button" id="sendButton">
<svg viewBox="0 0 24 24" fill="white">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path>
</svg>
</button>
</div>
</div>
<script src="https://js.puter.com/v2/"></script>
<script>
// DOM elements
const chatMessages = document.getElementById('chatMessages');
const chatInput = document.getElementById('chatInput');
const sendButton = document.getElementById('sendButton');
const typingIndicator = document.getElementById('typingIndicator');
// Function to add a message to the chat
function addMessage(text, isUser) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add(isUser ? 'user-message' : 'bot-message');
messageDiv.textContent = text;
chatMessages.appendChild(messageDiv);
// Scroll to the bottom
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Function to show typing indicator
function showTypingIndicator() {
typingIndicator.style.display = 'block';
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Function to hide typing indicator
function hideTypingIndicator() {
typingIndicator.style.display = 'none';
}
// Function to send message to AI
async function sendMessageToAI(message) {
try {
showTypingIndicator();
// Using puter.ai.chat to get response
const response = await puter.ai.chat(message, {
model: 'gpt-5-nano',
});
hideTypingIndicator();
addMessage(response, false);
} catch (error) {
hideTypingIndicator();
addMessage("Sorry, I'm having trouble connecting right now. Please try again later.", false);
console.error("AI Error:", error);
}
}
// Function to handle sending a message
function handleSendMessage() {
const message = chatInput.value.trim();
if (message) {
// Add user message to chat
addMessage(message, true);
// Clear input
chatInput.value = '';
// Send to AI
sendMessageToAI(message);
}
}
// Event listeners
sendButton.addEventListener('click', handleSendMessage);
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
handleSendMessage();
}
});
// Focus on input when page loads
chatInput.focus();
</script>
</body>
</html>
Category : SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper