How to Add a Free AI Assistant to Your Website: 3 Easy Methods
Posted On November 20th, 2025
Array
Want to add a free AI assistant to your website without spending a single penny? You’re in the right place! Adding an AI assistant can transform how visitors interact with your website, answer their questions instantly, and boost engagement. Furthermore, these free AI assistant tools are surprisingly easy to implement. In this guide, we’ll walk you through three proven methods to integrate a powerful AI assistant into your website today.
Why Your Website Needs an AI Assistant
Before diving into the methods, let’s understand why adding an AI chatbot or AI assistant to your website makes sense. First of all, visitors expect instant answers. Moreover, an AI assistant works 24/7 without breaks. Additionally, it handles multiple conversations simultaneously, which means better customer service and happier visitors.
Consequently, businesses using AI assistants on their websites see improved engagement rates. In fact, studies show that websites with chat features keep visitors browsing longer. Therefore, whether you run an ecommerce store, blog, or service website, an AI assistant becomes your tireless helper.
What You’ll Learn in This Guide
This comprehensive tutorial covers three distinct approaches to add a free AI assistant to your website:
- Method 1: Using Ollama to run local AI models on your computer
- Method 2: Building a chatbot with Botpress visual builder
- Method 3: Connecting Hugging Face AI models to your site
Each method offers unique advantages. As a result, you can choose the one that fits your technical skills and requirements. Let’s explore these free AI assistant solutions step by step.
Method 1: Add Free AI Assistant Using Ollama (Local AI Models)
Ollama allows you to run powerful AI models directly on your computer. Consequently, you maintain complete privacy and control. Moreover, there are no API costs or usage limits. However, you’ll need a decent computer to run the models smoothly.
its is one of the fine and simplest way to make free ai assistant for your website
Step 1: Install Ollama on Your Computer
First, visit the official Ollama website at ollama.com. Then, download the installer for your operating system (Windows, Mac, or Linux). After that, run the installer and follow the on-screen instructions.
Once installation completes, open your terminal or command prompt. Next, verify the installation by typing:
bash
ollama --versionIf you see the version number, congratulations! Ollama is ready to use.
Step 2: Download a Free AI Model
Now, let’s download a free AI model. Ollama offers several options. For most websites, the Llama 2 model works excellently. Therefore, run this command:
bash
ollama pull llama2Alternatively, if you want a smaller, faster model, try:
bash
ollama pull phiThe download takes a few minutes depending on your internet speed. Meanwhile, the model files are stored locally on your machine.
Step 3: Start the Ollama Server
After downloading your chosen model, start the Ollama server:
bash
ollama serveThis command runs the server on your computer. By default, it listens on port 11434. Keep this terminal window open while your AI assistant is active.
Step 4: Create the Website Integration Code
Now comes the exciting part – connecting your website to the local AI assistant. Here’s the complete HTML and JavaScript code:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free AI Assistant for Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
#chat-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 380px;
height: 550px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
overflow: hidden;
transition: all 0.3s ease;
}
#chat-container.minimized {
height: 60px;
}
#chat-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
#chat-header h3 {
font-size: 16px;
font-weight: 600;
}
#minimize-btn {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
}
#chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
background: #f7f7f7;
}
.message {
margin-bottom: 12px;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.message.user {
text-align: right;
}
.message-content {
display: inline-block;
padding: 10px 14px;
border-radius: 18px;
max-width: 75%;
word-wrap: break-word;
}
.message.user .message-content {
background: #667eea;
color: white;
}
.message.assistant .message-content {
background: white;
color: #333;
border: 1px solid #e0e0e0;
}
#chat-input-container {
padding: 12px;
background: white;
border-top: 1px solid #e0e0e0;
display: flex;
gap: 8px;
}
#chat-input {
flex: 1;
padding: 10px 14px;
border: 1px solid #e0e0e0;
border-radius: 20px;
font-size: 14px;
outline: none;
}
#chat-input:focus {
border-color: #667eea;
}
#send-btn {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
#send-btn:hover {
background: #5568d3;
}
#send-btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.typing-indicator {
display: inline-block;
padding: 10px 14px;
background: white;
border-radius: 18px;
border: 1px solid #e0e0e0;
}
.typing-indicator span {
height: 8px;
width: 8px;
background: #667eea;
border-radius: 50%;
display: inline-block;
margin: 0 2px;
animation: typing 1.4s infinite;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typing {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-10px);
}
}
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-header" onclick="toggleChat()">
<h3>AI Assistant</h3>
<button id="minimize-btn">−</button>
</div>
<div id="chat-messages"></div>
<div id="chat-input-container">
<input type="text" id="chat-input" placeholder="Ask me anything..." />
<button id="send-btn" onclick="sendMessage()">Send</button>
</div>
</div>
<script>
const chatMessages = document.getElementById('chat-messages');
const chatInput = document.getElementById('chat-input');
const sendBtn = document.getElementById('send-btn');
const chatContainer = document.getElementById('chat-container');
// Add welcome message
addMessage('assistant', 'Hello! I\'m your free AI assistant. How can I help you today?');
// Handle Enter key
chatInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
function toggleChat() {
chatContainer.classList.toggle('minimized');
}
function addMessage(role, content) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${role}`;
const contentDiv = document.createElement('div');
contentDiv.className = 'message-content';
contentDiv.textContent = content;
messageDiv.appendChild(contentDiv);
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function showTypingIndicator() {
const typingDiv = document.createElement('div');
typingDiv.className = 'message assistant';
typingDiv.id = 'typing-indicator';
const indicator = document.createElement('div');
indicator.className = 'typing-indicator';
indicator.innerHTML = '<span></span><span></span><span></span>';
typingDiv.appendChild(indicator);
chatMessages.appendChild(typingDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
function removeTypingIndicator() {
const indicator = document.getElementById('typing-indicator');
if (indicator) {
indicator.remove();
}
}
async function sendMessage() {
const message = chatInput.value.trim();
if (!message) return;
// Add user message
addMessage('user', message);
chatInput.value = '';
// Disable input
sendBtn.disabled = true;
chatInput.disabled = true;
// Show typing indicator
showTypingIndicator();
try {
const response = await fetch('http://localhost:11434/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
model: 'llama2',
prompt: message,
stream: false
})
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
// Remove typing indicator
removeTypingIndicator();
// Add assistant response
addMessage('assistant', data.response);
} catch (error) {
removeTypingIndicator();
addMessage('assistant', 'Sorry, I encountered an error. Please make sure Ollama is running on your computer.');
console.error('Error:', error);
} finally {
// Re-enable input
sendBtn.disabled = false;
chatInput.disabled = false;
chatInput.focus();
}
}
</script>
</body>
</html>Step 5: Test Your Free AI Assistant
Save the code above as index.html in any folder. Then, open it in your web browser. Make sure Ollama is running in the background. Now, type a question in the chat box and press Send.
Consequently, your free AI assistant processes the question and responds. The entire conversation happens locally on your machine. Therefore, it’s completely private and secure.
Step 6: Add to Your Existing Website
To integrate this AI assistant into your existing website, simply copy the CSS and JavaScript code into your site’s files. Place the HTML chat container where you want the chat widget to appear. As a result, your website now has a functional AI assistant.
Method 2: Create Free AI Assistant with Botpress
Botpress offers a visual chatbot builder that requires zero coding knowledge. Furthermore, it provides a generous free tier perfect for small to medium websites. Consequently, this method suits beginners perfectly.
Step 1: Create Your Free Botpress Account
First, navigate to botpress.com in your browser. Next, click the “Sign Up” button in the top right corner. Then, enter your email address and create a password. Alternatively, sign up using your Google account for faster access.
After registration, verify your email address. Once verified, you’ll access the Botpress dashboard.
Step 2: Create a New AI Chatbot
Inside the dashboard, click “Create Bot” or “New Bot.” Then, give your AI assistant a descriptive name like “Website Helper” or “Customer Support Bot.”
Next, select a template. Botpress offers several starter templates. However, for maximum customization, choose “Start from Scratch.” This gives you complete control over your AI assistant’s behavior.
Step 3: Design Your Conversation Flow
Botpress uses a visual flow builder. Consequently, you create conversations by connecting nodes. Here’s how to build a basic AI assistant:
Add a Welcome Node: This greets visitors when they first open the chat. Click “Add Node” and select “Say Something.” Type your welcome message like “Hi! I’m your AI assistant. How can I help you today?”
Create Intent Recognition: Click “Add Node” and select “Capture Information.” This node captures what users want. Add common questions your visitors might ask.
Add Response Nodes: For each intent, add corresponding responses. Connect the intent node to response nodes using the visual connector.
Enable AI Understanding: In the settings panel, enable “Natural Language Understanding.” This allows your AI assistant to understand variations of questions. For example, “What are your hours?” and “When are you open?” trigger the same response.
Step 4: Train Your Free AI Model
After building the conversation flow, train your AI assistant. Click the “Train” button in the top menu. Botpress processes your conversation design and creates an AI model. This usually takes 30-60 seconds.
Meanwhile, add more training phrases to improve accuracy. The more examples you provide, the better your AI assistant understands visitor questions.
Step 5: Get Your Website Embed Code
Once training completes, click “Publish” in the top menu. Then, navigate to the “Web Chat” section. Here, Botpress provides your website integration code.
Copy the embed code that looks similar to this:
html
<script src="https://cdn.botpress.cloud/webchat/v1/inject.js"></script>
<script>
window.botpressWebChat.init({
botId: "your-bot-id-here",
hostUrl: "https://cdn.botpress.cloud/webchat/v1",
messagingUrl: "https://messaging.botpress.cloud",
clientId: "your-client-id-here",
botName: "AI Assistant",
avatarUrl: "https://your-avatar-url.com/avatar.png",
showPoweredBy: false,
stylesheet: "https://webchat-styler-css.botpress.app/prod/code/your-style-id.css",
composerPlaceholder: "Ask me anything...",
enablePersistHistory: true,
closeOnEscape: true,
showBotInfoPage: false
});
</script>Step 6: Add to Your Website
Paste this code just before the closing </body> tag in your website’s HTML. Save the file and refresh your browser. Consequently, a chat widget appears on your website.
Visitors can now interact with your free AI assistant immediately. Moreover, the bot handles multiple conversations simultaneously without any additional setup.
Customization Tips for Botpress
Change Colors: In the Botpress dashboard, go to “Appearance” and customize colors to match your brand.
Add Rich Media: Include images, videos, or buttons in responses for better engagement.
Connect to External APIs: Link your AI assistant to databases or external services for dynamic responses.
Method 3: Integrate Hugging Face Free AI Models
Hugging Face hosts thousands of free AI models that you can use directly from their cloud servers. Therefore, you don’t need powerful hardware. Furthermore, small-scale usage is completely free.
it is widely known way for making AI assistant by developers and you can use this for free for your own website as well
Step 1: Create Your Hugging Face Account
Visit huggingface.co and click “Sign Up.” Enter your email and create a password. After verification, you’ll access thousands of free AI model for handling all coding stuff.
Step 2: Get Your API Access Token
Click your profile picture in the top right corner. Then, select “Settings” from the dropdown menu. Next, navigate to “Access Tokens” in the left sidebar.
Click “New token” and give it a descriptive name like “Website AI Assistant.” Select “Read” permissions since we’re only querying models. Finally, click “Generate token” and copy it immediately. Store this token securely as it won’t be shown again.
Step 3: Choose a Free AI Model
Browse the Hugging Face model hub. For website chat assistants, these models work excellently:
- microsoft/DialoGPT-medium: Great for conversational AI
- facebook/blenderbot-400M-distill: Excellent for customer service
- google/flan-t5-base: Good for question answering
For this tutorial, we’ll use DialoGPT-medium because it balances performance and response quality perfectly.
Step 4: Create the Complete Website Code
Here’s the full implementation code for integrating Hugging Face models:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free AI Assistant - Hugging Face Integration</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f2f5;
}
#ai-chat-widget {
position: fixed;
bottom: 24px;
right: 24px;
width: 400px;
height: 600px;
display: flex;
flex-direction: column;
background: white;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
}
#ai-chat-widget.hidden {
transform: translateY(calc(100% + 24px));
}
#chat-toggle-btn {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
border: none;
color: white;
font-size: 28px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
transition: all 0.3s ease;
z-index: 999;
}
#chat-toggle-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
}
.widget-header {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: white;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.widget-header h2 {
font-size: 18px;
font-weight: 600;
}
.widget-header .status {
font-size: 12px;
opacity: 0.9;
}
.close-btn {
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
transition: background 0.2s;
}
.close-btn:hover {
background: rgba(255,255,255,0.3);
}
#messages-container {
flex: 1;
overflow-y: auto;
padding: 20px;
background: #f9fafb;
}
.chat-message {
margin-bottom: 16px;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-message.user-msg {
text-align: right;
}
.message-bubble {
display: inline-block;
padding: 12px 16px;
border-radius: 16px;
max-width: 80%;
word-wrap: break-word;
line-height: 1.4;
}
.user-msg .message-bubble {
background: #6366f1;
color: white;
border-bottom-right-radius: 4px;
}
.bot-msg .message-bubble {
background: white;
color: #1f2937;
border: 1px solid #e5e7eb;
border-bottom-left-radius: 4px;
}
.input-container {
padding: 16px;
background: white;
border-top: 1px solid #e5e7eb;
display: flex;
gap: 12px;
}
#user-input {
flex: 1;
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 24px;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
#user-input:focus {
border-color: #6366f1;
}
#send-button {
background: #6366f1;
color: white;
border: none;
padding: 12px 24px;
border-radius: 24px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: all 0.2s;
}
#send-button:hover:not(:disabled) {
background: #4f46e5;
transform: translateY(-1px);
}
#send-button:disabled {
background: #9ca3af;
cursor: not-allowed;
}
.loading-dots {
display: inline-block;
padding: 12px 16px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 16px;
border-bottom-left-radius: 4px;
}
.loading-dots span {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 2px;
background: #6366f1;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.loading-dots span:nth-child(1) {
animation-delay: -0.32s;
}
.loading-dots span:nth-child(2) {
animation-delay: -0.16s;
}
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.error-message {
background: #fef2f2;
border: 1px solid #fecaca;
color: #dc2626;
padding: 12px 16px;
border-radius: 8px;
margin: 8px 0;
font-size: 13px;
}
</style>
</head>
<body>
<button id="chat-toggle-btn" onclick="toggleWidget()">💬</button>
<div id="ai-chat-widget" class="hidden">
<div class="widget-header">
<div>
<h2>AI Assistant</h2>
<div class="status">● Online</div>
</div>
<button class="close-btn" onclick="toggleWidget()">×</button>
</div>
<div id="messages-container">
<div class="chat-message bot-msg">
<div class="message-bubble">
Hello! I'm your free AI assistant powered by Hugging Face. How can I help you today?
</div>
</div>
</div>
<div class="input-container">
<input
type="text"
id="user-input"
placeholder="Type your message here..."
onkeypress="handleKeyPress(event)"
/>
<button id="send-button" onclick="sendMessage()">Send</button>
</div>
</div>
<script>
// Replace with your actual Hugging Face API token
const HF_API_TOKEN = 'YOUR_HUGGING_FACE_TOKEN_HERE';
const MODEL_URL = 'https://api-inference.huggingface.co/models/microsoft/DialoGPT-medium';
const messagesContainer = document.getElementById('messages-container');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
let conversationHistory = [];
function toggleWidget() {
const widget = document.getElementById('ai-chat-widget');
const toggleBtn = document.getElementById('chat-toggle-btn');
widget.classList.toggle('hidden');
toggleBtn.style.display = widget.classList.contains('hidden') ? 'block' : 'none';
if (!widget.classList.contains('hidden')) {
userInput.focus();
}
}
function addMessage(role, content, isLoading = false) {
const messageDiv = document.createElement('div');
messageDiv.className = `chat-message ${role}-msg`;
if (isLoading) {
const loadingDiv = document.createElement('div');
loadingDiv.className = 'loading-dots';
loadingDiv.id = 'loading-indicator';
loadingDiv.innerHTML = '<span></span><span></span><span></span>';
messageDiv.appendChild(loadingDiv);
} else {
const bubbleDiv = document.createElement('div');
bubbleDiv.className = 'message-bubble';
bubbleDiv.textContent = content;
messageDiv.appendChild(bubbleDiv);
}
messagesContainer.appendChild(messageDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
return messageDiv;
}
function removeLoadingIndicator() {
const loading = document.getElementById('loading-indicator');
if (loading) {
loading.parentElement.remove();
}
}
function showError(message) {
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = message;
messagesContainer.appendChild(errorDiv);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
async function queryHuggingFace(userMessage) {
try {
const response = await fetch(MODEL_URL, {
method: 'POST',
headers: {
'Authorization': `Bearer ${HF_API_TOKEN}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
inputs: {
past_user_inputs: conversationHistory.filter((_, i) => i % 2 === 0),
generated_responses: conversationHistory.filter((_, i) => i % 2 === 1),
text: userMessage
},
parameters: {
max_length: 100,
temperature: 0.7,
top_p: 0.9
}
})
});
if (!response.ok) {
if (response.status === 503) {
throw new Error('Model is loading. Please wait a moment and try again.');
}
throw new Error(`API error: ${response.status}`);
}
const data = await response.json();
if (data.error) {
throw new Error(data.error);
}
return data.generated_text || data.response || 'I apologize, but I could not generate a response. Please try again.';
} catch (error) {
console.error('Hugging Face API Error:', error);
throw error;
}
}
async function sendMessage() {
const message = userInput.value.trim();
if (!message) {
return;
}
// Check if API token is set
if (HF_API_TOKEN === 'YOUR_HUGGING_FACE_TOKEN_HERE') {
showError('Please add your Hugging Face API token to the code.');
return;
}
// Add user message
addMessage('user', message);
conversationHistory.push(message);
// Clear input and disable controls
userInput.value = '';
userInput.disabled = true;
sendButton.disabled = true;
// Show loading indicator
addMessage('bot', '', true);
try {
const response = await queryHuggingFace(message);
// Remove loading indicator
removeLoadingIndicator();
// Add bot response
addMessage('bot', response);
conversationHistory.push(response);
} catch (error) {
removeLoadingIndicator();
showError(error.message || 'Failed to get response. Please try again.');
} finally {
// Re-enable controls
userInput.disabled = false;
sendButton.disabled = false;
userInput.focus();
}Opal a no-Code tool by Google for Building Smart AI Mini-Apps! Click here to see.
Related Posts
Opal a no-Code tool by Google for Building Smart AI Mini-Apps
Posted on November 19th, 2025
In today’s rapidly evolving digital world, Opal is emerging as the ultimate no-code tool that is revolutionizing how coding, Google, and apps combine to build powerful AI mini-apps. Designed explicitly to eliminate traditional coding complexities, Opal allows creators and developers of...
Read More →
What Is Content Marketing? Best Content Marketing Strategies & Why It Still Works in Today’s Digital World
Posted on November 17th, 2025
Content, marketing, strategies, and digital growth shape the way modern brands succeed today. Because online behavior keeps evolving rapidly, businesses rely heavily on strong digital content marketing strategies to...
Read More →
Pomelli – AI Marketing Tool by Google and DeepMinds
Posted on November 1st, 2025
If you’re looking for a platform that combines artificial intelligence, automation, and marketing, then this blog is for you. In this post, we’ll explore Pomelli, the revolutionary AI marketing...
Read More →
Google Ads vs Meta Ads: Which Platform Delivers Better ROI in Digital Marketing?
Posted on October 31st, 2025
In today’s competitive digital marketing world, choosing the right advertising platform is crucial. When it comes to Google Ads, Meta Ads, digital marketing, and online ads, every marketer wants...
Read More →© All Copyright Reserved japjitravel.com
Leave a Comment :