Episode 3: Code a Vue Powered ChatGPT by Daniel Roe: Vue.js Forge

[Music] [Applause] thank you Jen I don't think I've ever had such a warm introduction thank you so much that's really really lovely and actually I think we might have somebody to to come and say hello just as I just as I said bye lady whether or not

reaction to start this we will find out it's a pleasure to be with you today um and we are going to be coding uh the server part of this uh chatbot I've been loving following on um thank you everybody for um all the the great work prepping things and so I'm I'm here ready to go so I'll start the next uh Dev server um I've checked out um a local branch which is um

see two dash start if you want to follow along we've got our uh um remote code Dev server running let's open it in the browser and hopefully what we are going to have is a social media post generation now our main focus here is going to be not on the UI but on the back end um and in particular we're interested in turning this customer support chat from just a beautiful box to one that actually works and does some very very cool things

um so the first thing is that we are going to create this API route now when you start dealing with the next server you're going to want to have a folder called server in your project and this API route is located in there and it's an API route and it's called Ai and that's what we want that's how we want to access it forward slash API forward slash Ai and in particular in the notes

I noticed that we we want to restrict this to just post requests and out of the box Max offers a really easy way to do that and which is to add a DOT post you could put any method in there dot get dot options Dot patch whatever you want um so we'll just create that file now this file is going to to return a response to any request to that API and

AI endpoint and so if we create just a basic um micro endpoint here and if we were to return some content then what we should see is if we hit that uh endpoint we should get I need to save the response I should say this is going to be absolutely very much live coding here uh let's see I should be able to hit that

response why am I getting a response so and hit yeah oh that won't hit anything with it because we need a post request just about possible that in setting us up yeah okay there we go right

um and so question for you can you zoom in a smidge because we're having a hard time seeing it absolutely okay this good enough yeah I would oh that one's even better if you can manage that one if you manage it that one's probably the best thank you okay um we are going to quickly open up the uh the open API docs and it's always always the best way to to check