Commit 8b6c3bd

committed

Tutorial Completed

0 parents commit 8b6c3bdCopy full SHA for 8b6c3bd

File tree

+7357

-0

lines changed

+7357

-0

lines changed

Lines changed: 31 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,31 @@`
	`1`	`+This is a fullstack chatbot created with React, Nodejs, OpenAi, and ChatGPT while developing the following tutorial:`
	`2`	`+`
	`3`	`+[How To Build A Chat Bot Application With OpenAI, ChatGPT, Nodejs, And React]()`
	`4`	`+`
	`5`	`+## Dependencies`
	`6`	`+### Backend`
	`7`	`+* [OpenAI](https://openai.com/)`
	`8`	`+* [ChatGPT](https://platform.openai.com/)`
	`9`	`+* [Readline](https://nodejs.org/api/readline.html)`
	`10`	`+* [Nodejs](https://nodejs.org/en)`
	`11`	`+`
	`12`	`+### Frontend`
	`13`	`+* [React](https://react.dev/)`
	`14`	`+* [Vite](https://vitejs.dev/)`
	`15`	`+`
	`16`	`+## Installation`
	`17`	+* Clone this repo `https://github.com/EBEREGIT/react-nodejs-chatgpt-tutorial`
	`18`	+* Navigate into the repo `cd nodejs-chatgpt-tutorial`
	`19`	`+`
	`20`	+* Navigate into the `backend` folder `cd backend`
	`21`	+* Install the dependencies ``npm install``
	`22`	+* Replace the configuration data with your own data in the `index.js` file
	`23`	+* Run the `index.js` file `node index`
	`24`	`+`
	`25`	+That will start the backend server on port `8000`: http://localhost:8000/
	`26`	`+`
	`27`	+* Navigate into the `frontend` folder `cd frontend`
	`28`	+* Install the dependencies ``npm install``
	`29`	+* Start the local server ``npm run dev``
	`30`	`+`
	`31`	`+That will open the project on your default browser: http://127.0.0.1:5173/. You can now chat with the AI from your browser`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+node_modules`

Lines changed: 38 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,38 @@`
	`1`	`+import { Configuration, OpenAIApi } from "openai";`
	`2`	`+import express from "express";`
	`3`	`+import bodyParser from "body-parser";`
	`4`	`+import cors from "cors";`
	`5`	`+`
	`6`	`+const app = express();`
	`7`	`+const port = 8000;`
	`8`	`+app.use(bodyParser.json());`
	`9`	`+app.use(cors());`
	`10`	`+`
	`11`	`+const configuration = new Configuration({`
	`12`	`+ organization: "org-0nmrFWw6wSm6xIJXSbx4FpTw",`
	`13`	`+ apiKey: "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",`
	`14`	`+});`
	`15`	`+const openai = new OpenAIApi(configuration);`
	`16`	`+`
	`17`	`+app.post("/", async (request, response) => {`
	`18`	`+ const { chats } = request.body;`
	`19`	`+`
	`20`	`+ const result = await openai.createChatCompletion({`
	`21`	`+ model: "gpt-3.5-turbo",`
	`22`	`+ messages: [`
	`23`	`+ {`
	`24`	`+ role: "system",`
	`25`	`+ content: "You are a EbereGPT. You can help with graphic design tasks",`
	`26`	`+ },`
	`27`	`+ ...chats,`
	`28`	`+ ],`
	`29`	`+ });`
	`30`	`+`
	`31`	`+ response.json({`
	`32`	`+ output: result.data.choices[0].message,`
	`33`	`+ });`
	`34`	`+});`
	`35`	`+`
	`36`	`+app.listen(port, () => {`
	`37`	+ console.log(`listening on port ${port}`);
	`38`	`+});`

Comments

(0)