I followed all the steps mentioned above but it is still not working can u pls help

@@vedantvaity6789 Can you share more details or any error messages from the console? I'll help you troubleshoot!

is the API is free ? and if it is free then for how long ?

Bcz he don't make it with voice

Communities* Spanish (from spain) devs communities. They choose whose to 'grow'

200k subscribers is not underrated bro

oyda azerbaycanli gormek sevindirdi 😄

@@MujHaci :D

Can you share source code

an error occurred even though I entered the API_keys correctly is there any solution for that?

how would you modify this to work as a livechat instead of a chat bot

@@longathelstan source code. class Assistant { constructor(apiKey, assistantId) { this.apiKey = apiKey; this.assistantId = assistantId; this.init(); } async init() { this.chatbotToggler = document.querySelector(".chatbot-toggler"); this.closeBtn = document.querySelector(".close-btn"); this.chatbox = document.querySelector(".chatbox"); this.chatInput = document.querySelector(".chat-input textarea"); this.sendChatBtn = document.querySelector(".chat-input span"); this.inputInitHeight = this.chatInput.scrollHeight; this.bindEvents(); } bindEvents() { this.chatInput.addEventListener("input", this.adjustInputHeight.bind(this)); this.chatInput.addEventListener("keydown", this.handleEnterKey.bind(this)); this.sendChatBtn.addEventListener("click", this.handleChat.bind(this)); this.closeBtn.addEventListener("click", this.closeChatbot.bind(this)); this.chatbotToggler.addEventListener("click", this.toggleChatbot.bind(this)); } adjustInputHeight() { this.chatInput.style.height = `${this.inputInitHeight}px`; this.chatInput.style.height = `${this.chatInput.scrollHeight}px`; } handleEnterKey(e) { if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { e.preventDefault(); this.handleChat(); } } closeChatbot() { document.body.classList.remove("show-chatbot"); } toggleChatbot() { document.body.classList.toggle("show-chatbot"); } createChatLi(message, className, id) { const chatLi = document.createElement("li"); chatLi.classList.add("chat", `${className}`); if (id) { chatLi.id = id; } chatLi.innerHTML = `${message}`; return chatLi; } async createThread() { try { const response = await fetch("api.openai.com/v1/threads", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, }); if (!response.ok) { const errorData = await response.json(); console.error("Error creating thread:", errorData); throw new Error(`Failed to create thread: ${JSON.stringify(errorData)}`); } this.thread = await response.json(); console.log("Thread Created:", this.thread); } catch (error) { console.error("Error in createThread method:", error); throw error; } } async generateResponse(chatElement, messageId) { const messageElement = chatElement.querySelector("p"); try { await this.createThread(); const messageResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/messages`, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, body: JSON.stringify({ role: "user", content: this.userMessage, }), }); if (!messageResponse.ok) { const errorData = await messageResponse.json(); console.error("Error creating message:", errorData); throw new Error(`Failed to create message: ${JSON.stringify(errorData)}`); } const runResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/runs`, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, body: JSON.stringify({ assistant_id: this.assistantId, model: "gpt-4-turbo" }), }); if (!runResponse.ok) { const errorData = await runResponse.json(); console.error("Error creating run:", errorData); throw new Error(`Failed to create run: ${JSON.stringify(errorData)}`); } const run = await runResponse.json(); console.log("Run Created:", run); await this.checkStatusAndPrintMessages(this.thread.id, run.id, messageElement, messageId); } catch (error) { console.error("Error fetching response:", error); messageElement.classList.add("error"); messageElement.textContent = "Oops! Something went wrong. Please try again."; } finally { this.chatbox.scrollTo(0, this.chatbox.scrollHeight); this.userMessage = null; // Reset the user message } } async checkStatusAndPrintMessages(threadId, runId, messageElement, messageId) { const delay = ms => new Promise(res => setTimeout(res, ms)); while (true) { const runStatusResponse = await fetch(`api.openai.com/v1/threads/${threadId}/runs/${runId}`, { method: "GET", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, }); if (!runStatusResponse.ok) { const errorData = await runStatusResponse.json(); console.error("Error retrieving run status:", errorData); throw new Error(`Failed to retrieve run status: ${JSON.stringify(errorData)}`); } const runStatus = await runStatusResponse.json(); console.log("Run Status:", runStatus); if (runStatus.status === "completed") { const messagesResponse = await fetch(`api.openai.com/v1/threads/${threadId}/messages`, { method: "GET", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, }); if (!messagesResponse.ok) { const errorData = await messagesResponse.json(); console.error("Error retrieving messages:", errorData); throw new Error(`Failed to retrieve messages: ${JSON.stringify(errorData)}`); } const messages = await messagesResponse.json(); console.log("Messages Retrieved:", messages); const assistantMessages = messages.data.filter(msg => msg.role === "assistant"); if (assistantMessages.length > 0) { const lastMessage = assistantMessages[assistantMessages.length - 1]; const content = lastMessage.content[0].text.value; messageElement.textContent = content; // Update the "Checking..." message } break; } else { console.log("Run is not completed yet, retrying..."); await delay(3000); // Wait for 3 seconds before checking again } } } async handleChat() { this.userMessage = this.chatInput.value.trim(); if (!this.userMessage) return; this.chatInput.value = ""; this.chatInput.style.height = `${this.inputInitHeight}px`; const messageId = `msg-${Date.now()}`; this.chatbox.appendChild(this.createChatLi(this.userMessage, "outgoing", messageId)); this.chatbox.scrollTo(0, this.chatbox.scrollHeight); setTimeout(() => { const incomingChatLi = this.createChatLi("", "incoming", messageId); this.chatbox.appendChild(incomingChatLi); this.chatbox.scrollTo(0, this.chatbox.scrollHeight); this.generateResponse(incomingChatLi, messageId); }, 600); } } // Initialize the assistant const assistant = new Assistant( "YOUR API-KEY HERE", "YOUR ASSISTANT-ID HERE" );

@@muhammadvitoni1802 Check your restrictions.

same, Have you got any solution?

maybe try generating API key with a new account which is not logged in to GPT

Whats is Your Country?

Bard in an option

@@realdrumfan Egypt

@@realdrumfan South Africa

same here I also added the api and it says script line 39

so fir hua ki nai

mera bhi same aa raha haii

Okay so I found out something apparently we need to add out payment details for it to work I abandoned this method and instead created the chatbot with rule based chatbot

@@XylomICP okay

Yes, sure

@@CodingNepal Thanks bro💙😊✋

i implement this, but cant run show me error...

@@mrravipandee+1

so what do we do instead?

is the API is free ? and if it is free then for how long ?

Hey Mike, this chatbot is free for any use. Thanks!

Same here bro. Pls reply if your issue is solved now.

Watch this video: kzfaq.info/get/bejne/l9p7p6pjns_Wn40.html Here I've shown how to save chat history to the browser's local storage and retrieve it from there.

​@@CodingNepal as ur from nepal so pls speak if u speak ur viewership will increase

Glad to hear that! What do you mean by OpenAI assistant? OpenAI API or something else?

@@CodingNepal hi legend, you know the openai assistants where you create threads and runs and it will connect to a vector database. but its all good, i used your code and converted it into an assistant. if you want the code then let me know. thanks

@@zainslamdien8138 can you show ur project?

@@husnainshahid1932 Here is the code bro, class Assistant { constructor(apiKey, assistantId) { this.apiKey = apiKey; this.assistantId = assistantId; this.init(); } async init() { this.chatbotToggler = document.querySelector(".chatbot-toggler"); this.closeBtn = document.querySelector(".close-btn"); this.chatbox = document.querySelector(".chatbox"); this.chatInput = document.querySelector(".chat-input textarea"); this.sendChatBtn = document.querySelector(".chat-input span"); this.inputInitHeight = this.chatInput.scrollHeight; this.bindEvents(); } bindEvents() { this.chatInput.addEventListener("input", this.adjustInputHeight.bind(this)); this.chatInput.addEventListener("keydown", this.handleEnterKey.bind(this)); this.sendChatBtn.addEventListener("click", this.handleChat.bind(this)); this.closeBtn.addEventListener("click", this.closeChatbot.bind(this)); this.chatbotToggler.addEventListener("click", this.toggleChatbot.bind(this)); } adjustInputHeight() { this.chatInput.style.height = `${this.inputInitHeight}px`; this.chatInput.style.height = `${this.chatInput.scrollHeight}px`; } handleEnterKey(e) { if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { e.preventDefault(); this.handleChat(); } } closeChatbot() { document.body.classList.remove("show-chatbot"); } toggleChatbot() { document.body.classList.toggle("show-chatbot"); } createChatLi(message, className, id) { const chatLi = document.createElement("li"); chatLi.classList.add("chat", `${className}`); if (id) { chatLi.id = id; } chatLi.innerHTML = `${message}`; return chatLi; } async createThread() { try { const response = await fetch("api.openai.com/v1/threads", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, }); if (!response.ok) { const errorData = await response.json(); console.error("Error creating thread:", errorData); throw new Error(`Failed to create thread: ${JSON.stringify(errorData)}`); } this.thread = await response.json(); console.log("Thread Created:", this.thread); } catch (error) { console.error("Error in createThread method:", error); throw error; } } async generateResponse(chatElement, messageId) { const messageElement = chatElement.querySelector("p"); try { await this.createThread(); const messageResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/messages`, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, body: JSON.stringify({ role: "user", content: this.userMessage, }), }); if (!messageResponse.ok) { const errorData = await messageResponse.json(); console.error("Error creating message:", errorData); throw new Error(`Failed to create message: ${JSON.stringify(errorData)}`); } const runResponse = await fetch(`api.openai.com/v1/threads/${this.thread.id}/runs`, { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, body: JSON.stringify({ assistant_id: this.assistantId, model: "gpt-4-turbo" }), }); if (!runResponse.ok) { const errorData = await runResponse.json(); console.error("Error creating run:", errorData); throw new Error(`Failed to create run: ${JSON.stringify(errorData)}`); } const run = await runResponse.json(); console.log("Run Created:", run); await this.checkStatusAndPrintMessages(this.thread.id, run.id, messageElement, messageId); } catch (error) { console.error("Error fetching response:", error); messageElement.classList.add("error"); messageElement.textContent = "Oops! Something went wrong. Please try again."; } finally { this.chatbox.scrollTo(0, this.chatbox.scrollHeight); this.userMessage = null; // Reset the user message } } async checkStatusAndPrintMessages(threadId, runId, messageElement, messageId) { const delay = ms => new Promise(res => setTimeout(res, ms)); while (true) { const runStatusResponse = await fetch(`api.openai.com/v1/threads/${threadId}/runs/${runId}`, { method: "GET", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, }); if (!runStatusResponse.ok) { const errorData = await runStatusResponse.json(); console.error("Error retrieving run status:", errorData); throw new Error(`Failed to retrieve run status: ${JSON.stringify(errorData)}`); } const runStatus = await runStatusResponse.json(); console.log("Run Status:", runStatus); if (runStatus.status === "completed") { const messagesResponse = await fetch(`api.openai.com/v1/threads/${threadId}/messages`, { method: "GET", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${this.apiKey}`, "OpenAI-Beta": "assistants=v2", }, }); if (!messagesResponse.ok) { const errorData = await messagesResponse.json(); console.error("Error retrieving messages:", errorData); throw new Error(`Failed to retrieve messages: ${JSON.stringify(errorData)}`); } const messages = await messagesResponse.json(); console.log("Messages Retrieved:", messages); const assistantMessages = messages.data.filter(msg => msg.role === "assistant"); if (assistantMessages.length > 0) { const lastMessage = assistantMessages[assistantMessages.length - 1]; const content = lastMessage.content[0].text.value; messageElement.textContent = content; // Update the "Checking..." message } break; } else { console.log("Run is not completed yet, retrying..."); await delay(3000); // Wait for 3 seconds before checking again } } } async handleChat() { this.userMessage = this.chatInput.value.trim(); if (!this.userMessage) return; this.chatInput.value = ""; this.chatInput.style.height = `${this.inputInitHeight}px`; const messageId = `msg-${Date.now()}`; this.chatbox.appendChild(this.createChatLi(this.userMessage, "outgoing", messageId)); this.chatbox.scrollTo(0, this.chatbox.scrollHeight); setTimeout(() => { const incomingChatLi = this.createChatLi("", "incoming", messageId); this.chatbox.appendChild(incomingChatLi); this.chatbox.scrollTo(0, this.chatbox.scrollHeight); this.generateResponse(incomingChatLi, messageId); }, 600); } } // Initialize the assistant const assistant = new Assistant( "YOUR API-KEY HERE", "YOUR ASSISTANT-ID HERE" );

same , im getting that error, what did you do to resolve it?

@@ANUJAGUPTA-jx5ri the only solution was to make a new id and generate API key, we can't use free API if we are already using openapi for a long time.... They offer free APIs to new users only (for some time )you should make new id and then generate your API key that will work .... May be there's another solution but I haven't found any yet

Same error is coming to me also! Did you get the solution of it ?

Same, anyone have a solution?

I believe u have to spend 5 dollars for the API to work

Thank you very much!

metoo

Did you solve it?

Please read the pinned comment for this.

Bro, Are you solved this problem? Because i am facing same problem.

@@KaptanSingh-oy1bp As far as I know, putting the API key into the evn variable (.evn), then putting the .evn file into the .gitignore file solves the API leak problem. But I get an error when I import the .evn variable into the .js file

Source code link: www.codingnepalweb.com/create-chatbot-html-css-javascript/

It's working

Yes, for sure. To hide the API key.

yes, you need to add some credits to your openai account

Glad you like it!

Yes! You can configure the chatbot to request responses from your own database instead of OpenAI. You have the flexibility to customize it as needed.

@@CodingNepal y si quiero poner una imagen en el boton, y otra imagen en el icono en vez del robot se puede?

Did u get solution to this

@@NehaSharma-rl4qy No, I have stopped working on this & now I'm working on my own concept ChatBot

Okay, I'll try my best.

Please 👋👋👋👋

same message as me

It seems OpenAI no longer provides free credits for API usage. The minimum cost to get started is now $5. Once the payment is made, the chatbot should work as expected.

Source code has bee uploaded. Link is in the video description.

That's a hello emoji 👋

The free OpenAI API is available for three months after creating an account. After that, it becomes a paid service. To continue using the API for free, create a new account and API key for limited usage.

@@CodingNepal Thank You So Much ❤😊. otherwise I was stopped my project...

please reply fast sir

You need to provide API key not password in the API_KEY variable.

@@CodingNepal no I mean like key,not password I know it, I maked API key and then copy paste but its still not working

@@CodingNepal every code true but no response from bot

You probably changed up the role from "user" to something else right that may be the caused of the error you must keep it as user if you want the chatbot to identify itself as some other bot names you gotta add another line for example in line 32 body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [{role: "user", content: userMessage}, {"role": "system", "content": "Jarvis is a chatbot thats created to help viewers to learn Algorithm and Data Structure in programming in a website called Easy Learn that specializes in that area."}], })

same could you resolve it?

Yes, it uses OpenAI API to generate response so it give answer like ChatGPT.

Please read the pinned comment for the solution.

Source code has bee uploaded. Link is in the video description.