Check out a free preview of the full First Look: ChatGPT API for Web Developers course

The "Project Setup" Lesson is part of the full, First Look: ChatGPT API for Web Developers course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano introduces the course repository and briefly overviews the file contents and dependencies. Additionally, setup instructions are presented to guide students in getting started with the course materials.

Preview
Close

Transcript from the "Project Setup" Lesson

[00:00:00]
>> Okay, so it's time to start touching things. So on gitHub.com/firtman/chatgpt-webdev. We have the repo that we will be using today. That repo has already some HTML and some very basic JavaScript and a very basic web server. It's not yet connected to open AI so we're going to connect that first.

[00:00:23]
In the repo you will find the slides, a samples folder and the cookie masters folder. Cookie masters is an app that we will use at the end of today's course, to actually end haste with AI. It's actually pretty cool, so stay there. So you will see how we can actually use artificial intelligence to provide directly something cool such as for example a recipe and images from that recipe from ingredients that you have in your at home.

[00:00:57]
But that's for later, we're going to start working with a sample folder. So I will just open that folder directly, so it's my root. So I open the folder and we have on package.json, the list of dependencies. We are just going to use Express.JS, course for making the API available cross-domain, and OpenAI.

[00:01:20]
That's a specific library that will make our life easier when we are talking with OpenAI. Then we have a server that you can see that is pretty empty, it's a very basic express js server. If you don't have experience with this you can just go to the frontend massive library and get one of the node.js basic courses.

[00:01:43]
Anyway, it's pretty simple, but we're going to to create, we have a public folder that we are serving. And then we have some endpoints already set up that are empty /api/chat, /api/general, /api/image, and /api/recipe, they are completely empty. Within the public folder, we have two sections, the chat and the playground.

[00:02:11]
So they both have HTML, CSS, and pretty basic JavaScript, so nothing really, really fancy. Just start the server, I'm going to open a terminal and run npm start And it's not working because I need to run npm install first, to install my dependencies. After the dependencies are ready, we can start the server and now, local host 3000 will open my server.

[00:02:45]
So I'm going to look at Hal 3000, it says 404 because we can get into [INAUDIBLE]. And this is a very basic interface to create a chat, clone, so we're going to create our own version of ChatGPT. Just to understand how the API works.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now