Build a GPT-4 Map App: Next.js & Leaflet in 15 Minutes

--- type: transcript date: 2023-09-28 youtube_id: xVkbdegieBg --- # Transcript: Build a GPT-4 Map App: Next.js & Leaflet in 15 Minutes in this video I'm going to be showing you how to build out a natural language map application that leverages gpd4 a leaflet and an xjs so how this application will work is we'll be able to submit a query something like where is that iconic bridge in SF and what it will do is we'll get a coordinate from gpd4 as well as a title from the query that we submit so if I say what is a fancy area in Vancouver you'll see that relatively quickly we get a response back from gpd4 and then based on the coordinates we're going to get the pin here with our title rendered in the top right hand corner here so you can say things like what is that famous building in Toronto or something like what is that famous bridge in NYC so you can see it's relatively quick and it does have a neat fly to effect that is built into the leaflet library that makes this sort of fun to play around with so the way that we're going to set this up is I'm going to run through what you need to do to set up your initial boilerplate then I'm going to run through the front end and the back end which is actually not that much code I'm going to run through it within hopefully 15 minutes here and then by the end of it you'll have a working example of this so you can also pull down the GitHub repository if you'd like to do that otherwise if you'd like to follow along and see what everything is doing step by step feel free to stay tuned so the first thing that I'm going to have you do is you're just going to have to create a new Next app so if you haven't done that before you can simply run within your terminal MPX create next app at latest and then you'll get a number of questions so that you'll just have to answer so we're going to be using typescript so make sure to answer yes for this we're going to be using tailwind and we are going to be using App router so once you have that all set up I'll just pull over the vs code here now what we're going to have to do is we're going to have to set up a DOT EnV here and once you have your dot EnV head over to platform.openai.com account slash let me get this right slash API keys and simply make a new API key then once you have that API key you can go within your dot EnV and then type this just as you see so open AI underscore API underscore key then paste in your key there then you can go ahead and close out your dot EnV so we're going to make a simple tweak to our page.tsx so this should be here from when you made the create next app and what we're going to do is we're going to have a dynamic map component here so we're just going to import Dynamic from next Dynamic and then we're going to import the component here and we're just going to have that one component within the page so once we have all that set up I'm going to run through our back end first then our front end so our back end is going to be pretty short pretty straightforward and we just have a couple dependencies for this now as I go through you will see that there are a few dependencies that you will have to install so like openai and Dot EnV so just make sure that you npm install those or bun install or whatever you're using as your package manager so in this uh just go ahead and install those and then import them like you see here so we're going to have openai to interact with the gpd4 model and then dot EnV simply to reach into our secret key there now the nice thing with the new version 4 of the openai node SDK is you don't actually need to pass in your API keys so you don't need to put an object that's like API keyprocess.env Etc you can just instantiate it just like you see here and it will assume the open AI underscore API underscore key if nothing is passed in so from there we're simply going to set up our endpoint so we're going to wrap it in a try catch then we're going to have a chat completion here so I just named this gpt4 completion we're going to specify that we are using gpd4 and then this roll here this is the important part to make our payload that we get back more reliable so the system message this is how you specify it here so roll system and this is essentially what's telling the gpd4 model every time it's a roll so I'm saying you only return Json a coordinates key with a value in this format then a title of the location with a title key so this could probably be even more improved but I found this alone does work pretty well in my testing of the app so next we're going to specify the role of user for the next message in our array and we're going to Simply pass in the message that we have on the front end of our application so like the what is that famous bridge that's what we're going to be passing in here and just um just pause here for a moment so the one thing with this application which is nice is even though we are using gpt4 because their models are based on tokens you can see here that a query like this or an application like this in general is you're not going to be putting in like a large body of text into this generally speaking right so you'll have simple queries a few words like this like you saw in my demonstration and then the nice thing with this is both what we're sending and what we're receiving are a very short succinct responses and queries so in terms of the cost even though we are you using the latest and greatest gpd4 model we aren't actually sending a lot back and forth so just something to sort of keep in mind so then we're going to extract the contents of the chat completion and we're just going to do a very simple check to see if it's indicating that it does have a Json payload so we're just going to check the first character of the payload that comes back and if it has come back with that curly brace as a first character we're going to go ahead and parse that response and then send that response and log it here so we're going to send the response to the front end and then when we go through the front end you'll see how we use those two pieces to render out what we had here so and then we're going to send back a try again so if you put in gibberish here I have it set up so it's going to just send you somewhere in the ocean and it's going to say please try again that's essentially the flag to do that and then we're also just going to be handling out the errors and that's it for our endpoint so less than 40 lines of code with comments to set up all that we need to be able to get everything from the gpt4 model to make this application work so next we're going to be setting up a map component and what I don't think I mentioned is just make sure that you set up these directories So within the app you can set up a components directory where you have your map components.tsx and then for your coordinates when you save it out you can put it within Pages slash API and then put the coordinates name and this is the structure that we have set up so next similar to the back end there are going to be some imports here so you can go ahead and import the things that you see here now I am using leaflet like I mentioned we have some of the regular suspects that we're going to be used to destructuring from react but the one thing I wanted to note with leaflet is when I first set this up and I was trying this out with a next JS is I did have an issue with this particular icon here so I found a fix to actually put in that marker because the way that nextjs wants to load images didn't play nice with the implementation of the leaflet Library so that's what a few of these extra things that you'll see for leaflet arm so once you have that set up we'll set up a quick interface for the marker data which I'll go into in just a moment then here I have a simple SVG for our loader so you could use a loader Library if you want I just wanted to quickly get something up and running so I just got a simple SVG loader for when it queries back and forth so I can say what is that famous building in Toronto it's this loader here so that's what this is doing here so it's going to load once we submit the query and then as soon as it has done its zoom and pan over it's going to remove that loading state so here is going to be where we have our large map component which renders to the screen here and this is going to be where we wrap everything that we're going to put basically with what you see on the left hand side here so the first thing that we're going to do is we're going to initialize a number of different variables for our state so we're going to have our input value we're going to have our Market our marker data we're going to have our loading state so whether it's loading or whether to set it to loading we're going to have the submitted question which will store and show on screen here then next what we're going to do is we're going to use a ref to declare the reference for our map which we'll see why we need in just a moment so our Zoom Handler this is a large part of our logic now what we're going to be doing here is this is going to be where we fly across to our marker but we have a lot of checks just to make sure that it's in a proper state to go ahead and perform that action so here we specify that there is that animation as well as the duration of the animation all right so next we're going to be setting up a use effect that is looking for whenever the marker data changes so whenever we got new coordinates it's going to perform that fly to Mark Arc function then next we're going to be handling our cement so we're going to set our loading state to True wrap everything in a try catch we're going to set our submitted question to be available here for when we want to render it we're going to clear the input and then we're going to make the fetch request with what is within our input and finally once we have the data back we're going to set the marker data there and then we're just going to log out any errors if they exist and then in the home stretch here we're just going to render out our jsx so we're going to set our loader we're going to have conditional rendering for our title so for when we get that title we're just going to display it within the top right hand corner here then from there we're going to set an initial state for our map container so I have it set for the Toronto coordinates here and then from there we're going to have the tile for our open street map here with leaflet and then we're going to be conditionally rendering our markers here so all as our marker data comes in that's going to be how we render them out there and then we also have the zoom Handler so this is how it gets bound within our jsx to perform that Zoom logic to hop in in between the different markers so then finally our input here so we have our submitted question and you will see I do have a number of Z index items that are being pulled to the front here that is largely because there is z index within the leaflet Library so I'm just being a little bit more opinionated to pull those things right to the front to have them on top of leaflet so we have our input we have our submitted question like you see here so it's simply listening for the enter key as well as the submit button and then from there that's pretty much it so we're going to export our map component to be able to use it within our page and then from there you'll have a working gpd4 app so we did this all within less than 200 lines of code with comments so it's pretty simple to set this type of thing up so hopefully this gets the gears spinning on how you can use something like gpt4 or any llms for applications that aren't just chat based you can use it for a lot of different things so in future videos I'm going to be covering a whole host of other different ways that you can leverage llms to interact with uis like this so if you found this video useful please like comment share and subscribe consider becoming a patreon subscriber as well I'd greatly appreciate it otherwise until the next one