├── .eslintrc.cjs ├── .gitignore ├── ReadMe.MD ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.css ├── App.jsx ├── index.css └── main.jsx └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { browser: true, es2020: true }, 3 | extends: [ 4 | 'eslint:recommended', 5 | 'plugin:react/recommended', 6 | 'plugin:react/jsx-runtime', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 10 | settings: { react: { version: '18.2' } }, 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': 'warn', 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /ReadMe.MD: -------------------------------------------------------------------------------- 1 | # React ChatGPT Tutorial 2 | 3 | This repository houses a frontend chatbot project based on the ChatGPT `gpt-3.5-turbo` model. 4 | 5 | Click [here](https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-openai-chatgpt-nodejs-and-react/) to view the tutorial that gives birth to this project 6 | 7 | See the Video Tutorial:
8 | [![How to Build an AI-Powered ChatBot with OpenAI, ChatGPT, Node.js, and React](https://i.ytimg.com/vi/T-9-_1w82Jg/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBvEKpZDH0nbnyAErAxl0Tt3ZodLA)](https://www.youtube.com/playlist?list=PLOvIwkWvHysNRNjLPcHHAWXrLzRkl__kR) 9 | 10 | ## Dependencies 11 | * [React](https://react.dev/) 12 | * [OpenAI](https://openai.com/) 13 | * [ChatGPT](https://platform.openai.com/) 14 | * [Vite](https://vitejs.dev/) 15 | 16 | ## Installation 17 | * Clone this repo `git clone https://github.com/EBEREGIT/react-chatgpt-tutorial` 18 | * Navigate into the repo `cd react-chatgpt-tutorial` 19 | * Install the dependencies ``npm install`` 20 | * Start the local server ``npm run dev`` 21 | 22 | *That will open the project on your default browser : http://127.0.0.1:5173/* 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-chatgpt-tutorial", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "openai": "^3.2.1", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.0.28", 19 | "@types/react-dom": "^18.0.11", 20 | "@vitejs/plugin-react": "^4.0.0", 21 | "eslint": "^8.38.0", 22 | "eslint-plugin-react": "^7.32.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.3.4", 25 | "vite": "^4.3.2" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EBEREGIT/react-chatgpt-tutorial/db0f16d1cde0f88b9e2f8277810d1e2a9edbaaa7/src/App.css -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import "./App.css"; 3 | import { Configuration, OpenAIApi } from "openai"; 4 | 5 | const configuration = new Configuration({ 6 | organization: "org-0nmrFWw6wSm6xIJXSbx4FpTw", 7 | apiKey: "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", 8 | }); 9 | const openai = new OpenAIApi(configuration); 10 | 11 | function App() { 12 | const [message, setMessage] = useState(""); 13 | const [chats, setChats] = useState([]); 14 | const [isTyping, setIsTyping] = useState(false); 15 | 16 | const chat = async (e, message) => { 17 | e.preventDefault(); 18 | 19 | if (!message) return; 20 | setIsTyping(true); 21 | scrollTo(0,1e10) 22 | 23 | let msgs = chats; 24 | msgs.push({ role: "user", content: message }); 25 | setChats(msgs); 26 | 27 | setMessage(""); 28 | 29 | await openai 30 | .createChatCompletion({ 31 | model: "gpt-3.5-turbo", 32 | messages: [ 33 | { 34 | role: "system", 35 | content: 36 | "You are a EbereGPT. You can help with graphic design tasks", 37 | }, 38 | ...chats, 39 | ], 40 | }) 41 | .then((res) => { 42 | msgs.push(res.data.choices[0].message); 43 | setChats(msgs); 44 | setIsTyping(false); 45 | scrollTo(0,1e10) 46 | }) 47 | .catch((error) => { 48 | console.log(error); 49 | }); 50 | }; 51 | 52 | return ( 53 |
54 |

Chat AI Tutorial

55 | 56 |
57 | {chats && chats.length 58 | ? chats.map((chat, index) => ( 59 |

60 | 61 | {chat.role.toUpperCase()} 62 | 63 | : 64 | {chat.content} 65 |

66 | )) 67 | : ""} 68 |
69 | 70 |
71 |

72 | {isTyping ? "Typing" : ""} 73 |

74 |
75 | 76 |
chat(e, message)}> 77 | setMessage(e.target.value)} 83 | /> 84 |
85 |
86 | ); 87 | } 88 | 89 | export default App; 90 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | html, body{ 18 | scroll-behavior: smooth; 19 | } 20 | 21 | h1 { 22 | font-size: 3.2em; 23 | line-height: 1.1; 24 | text-align: center; 25 | position: sticky; 26 | top: 0; 27 | background-color: #242424; 28 | } 29 | 30 | main{ 31 | max-width: 500px; 32 | margin: auto; 33 | } 34 | 35 | p{ 36 | background-color: darkslategray; 37 | max-width: 70%; 38 | padding: 15px; 39 | border-radius: 50px; 40 | } 41 | 42 | p span{ 43 | margin: 5px; 44 | } 45 | 46 | p span:first-child{ 47 | margin-right: 0; 48 | } 49 | 50 | .user_msg{ 51 | text-align: right; 52 | margin-left: 30%; 53 | display: flex; 54 | flex-direction: row-reverse; 55 | } 56 | 57 | .hide { 58 | visibility: hidden; 59 | display: none; 60 | } 61 | 62 | form{ 63 | text-align: center; 64 | position: sticky; 65 | bottom: 0; 66 | } 67 | 68 | input{ 69 | width: 100%; 70 | height: 40px; 71 | border: none; 72 | padding: 10px; 73 | font-size: 1.2rem; 74 | background-color: rgb(28, 23, 23); 75 | } 76 | 77 | input:focus{ 78 | outline: none; 79 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | --------------------------------------------------------------------------------