├── LICENSE ├── README.md ├── index.html ├── index.js └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Armand Benjamin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ChatGPT Bot AI 2 | 3 | ### ChatGPT Bot 4 | this project is how to use chatgpt api to code a chatgpt bot with javascript. we create a project that you can ask anything from chatgpt with javascript❗️ 5 | Also we use Rapidapi in this bot too! we use official chatgpt api. 6 | 7 | ## Warning 8 | You need to get your own api key and replace it in index.js file on line 46 : 9 | 10 | ```javascript 11 | 'X-RapidAPI-Key': 'Your Key', 12 | ``` 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ChatGPT Bot | BenDev 11 | 12 | 13 | 14 | 15 |
16 |
17 |

BenDev ChatGPT Bot

18 |
19 | 20 |
21 | 22 | Coded By Rukizangabo Armand Benjamin 23 | 24 |
25 | 26 |
27 |
28 |
29 | 30 |
31 | 32 | 35 |
36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const chatLog = document.getElementById('chat-log'); 2 | const userInput = document.getElementById('user-input'); 3 | const sendButton = document.getElementById('send-button'); 4 | const buttonIcon = document.getElementById('button-icon'); 5 | const info = document.querySelector('.info'); 6 | 7 | sendButton.addEventListener('click', sendMessage); 8 | userInput.addEventListener('keydown', (event) => { 9 | if (event.key === 'Enter') { 10 | sendMessage(); 11 | } 12 | }); 13 | 14 | function sendMessage() { 15 | const message = userInput.value.trim(); 16 | if (message === '') { 17 | return; 18 | } 19 | 20 | appendMessage('user', message); 21 | userInput.value = ''; 22 | 23 | if (message.toLowerCase() === 'developer') { 24 | setTimeout(() => { 25 | appendMessage('bot', 'This Source Coded By Armand Benjamin \nGithub : BenDev202'); 26 | }, 2000); 27 | return; 28 | } 29 | 30 | const options = { 31 | method: 'POST', 32 | headers: { 33 | 'x-rapidapi-key': '{YOUR RAPIDAPI-KEY}', 34 | 'x-rapidapi-host': 'chatgpt-chatgpt3-5.p.rapidapi.com', 35 | 'Content-Type': 'application/json' 36 | }, 37 | body: JSON.stringify({ 38 | model: 'gpt-3.5-turbo-0613', 39 | messages: [ 40 | { 41 | role: 'user', 42 | content: message 43 | } 44 | ] 45 | }) 46 | }; 47 | 48 | fetch('https://chatgpt-chatgpt3-5.p.rapidapi.com/', options) 49 | .then(response => { 50 | if (!response.ok) { 51 | throw new Error(`HTTP error! status: ${response.status}`); 52 | } 53 | return response.json(); 54 | }) 55 | .then(data => { 56 | console.log('API Response:', data); // Log the entire response for debugging 57 | if (data && data.choices && data.choices.length > 0 && data.choices[0].message && data.choices[0].message.content) { 58 | appendMessage('bot', data.choices[0].message.content); 59 | } else { 60 | throw new Error('Unexpected response structure: ' + JSON.stringify(data)); 61 | } 62 | }) 63 | .catch(err => { 64 | console.error('Error:', err); 65 | appendMessage('bot', `An error occurred: ${err.message}. Please try again later.`); 66 | }) 67 | .finally(() => { 68 | buttonIcon.classList.add('fa-solid', 'fa-paper-plane'); 69 | buttonIcon.classList.remove('fas', 'fa-spinner', 'fa-pulse'); 70 | }); 71 | } 72 | 73 | function appendMessage(sender, message) { 74 | info.style.display = "none"; 75 | buttonIcon.classList.remove('fa-solid', 'fa-paper-plane'); 76 | buttonIcon.classList.add('fas', 'fa-spinner', 'fa-pulse'); 77 | 78 | const messageElement = document.createElement('div'); 79 | const iconElement = document.createElement('div'); 80 | const chatElement = document.createElement('div'); 81 | const icon = document.createElement('i'); 82 | 83 | chatElement.classList.add("chat-box"); 84 | iconElement.classList.add("icon"); 85 | messageElement.classList.add(sender); 86 | messageElement.innerText = message; 87 | 88 | if (sender === 'user') { 89 | icon.classList.add('fa-regular', 'fa-user'); 90 | iconElement.setAttribute('id', 'user-icon'); 91 | } else { 92 | icon.classList.add('fa-solid', 'fa-robot'); 93 | iconElement.setAttribute('id', 'bot-icon'); 94 | } 95 | 96 | iconElement.appendChild(icon); 97 | chatElement.appendChild(iconElement); 98 | chatElement.appendChild(messageElement); 99 | chatLog.appendChild(chatElement); 100 | chatLog.scrollTop = chatLog.scrollHeight; 101 | } 102 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); 2 | 3 | *{ 4 | font-family: 'Poppins', sans-serif; 5 | } 6 | 7 | body{ 8 | margin: 0; 9 | padding: 0; 10 | background-color: #343541; 11 | } 12 | 13 | .header{ 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | color: #ccc; 18 | border-bottom: 1px solid #5c5c66; 19 | height: 45px; 20 | } 21 | 22 | .header h3{ 23 | font-size: 17px; 24 | font-weight: 500; 25 | } 26 | 27 | .container{ 28 | max-width: 920px; 29 | height: 100vh; 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: space-between; 33 | margin: 0 auto; 34 | } 35 | 36 | .info{ 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | flex: 20; 41 | } 42 | 43 | .info a{ 44 | color: #fff; 45 | text-decoration: none; 46 | font-size: 25px; 47 | font-weight: bold; 48 | transition: all 0.3s ease; 49 | } 50 | 51 | .info a:hover{ 52 | color: #4caf50; 53 | } 54 | 55 | .input-container{ 56 | background-color: #343541; 57 | padding: 10px; 58 | display: flex; 59 | justify-content: space-between; 60 | border-top: 1px solid #5c5c66; 61 | position: sticky; 62 | bottom: 0; 63 | } 64 | 65 | #user-input{ 66 | background-color: #40414f; 67 | color: #fff; 68 | border: none; 69 | outline: none; 70 | padding: 8px; 71 | flex: 9; 72 | font-size: 14px; 73 | font-weight: 400; 74 | border-radius: 5px; 75 | } 76 | 77 | #user-input::placeholder{ 78 | color: #8e8e8e; 79 | font-weight: 400; 80 | } 81 | 82 | #send-button{ 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | padding: 8px 20px; 87 | border: none; 88 | border-radius: 5px; 89 | background-color: #4caf50; 90 | color: #fff; 91 | cursor: pointer; 92 | margin-left: 15px; 93 | transition: all 0.3s ease; 94 | } 95 | 96 | #send-button:hover{ 97 | background-color: #388e3c; 98 | } 99 | 100 | .chat-container{ 101 | flex: 1; 102 | } 103 | 104 | .chat-box{ 105 | display: flex; 106 | align-items: center; 107 | padding: 10px 15px; 108 | } 109 | 110 | #chat-log{ 111 | margin-bottom: 10px; 112 | font-size: 14px; 113 | line-height: 1.6; 114 | } 115 | 116 | #chat-log i{ 117 | margin-right: 10px; 118 | color: #fff; 119 | border-radius: 5px; 120 | } 121 | 122 | .bot, .user{ 123 | display: flex; 124 | align-items: flex-start; 125 | color: #eee; 126 | width: 100%; 127 | padding: 15px 7px 15px 10px; 128 | border-radius: 6px; 129 | } 130 | 131 | .bot{ 132 | background-color: #444654; 133 | } 134 | 135 | #chat-log #user-icon i{ 136 | background-color: #19c37d; 137 | padding: 10px 11px; 138 | } 139 | 140 | #chat-log #bot-icon i{ 141 | background-color: #9859b7; 142 | padding: 10px 8px 11px; 143 | } --------------------------------------------------------------------------------