Let’s Build With AI - Claude 3 Opus - Full Workflow | Website with LLM Integration

today I wanted to share a workflow you can use when building something using llms so today we are going to build a website template you can see here that has an integrated llm shat [Music] textbox we will be using the claw threee Opus model today which I really enjoy so let's just get started the website you can see here is going to be our inspiration today I just think it looks awesome to be honest and the owner has left this me message here so quick site layout FAQ I made it from scratch you're more than welcome to borrow any parts of it no need to ask and it just explains a bit about the website so with that I kind of feel that we can borrow some cool things for this website and to use it in our uh project so the first thing I'm going to do is just head over to visual studio code here in an empty folder I want to create a new file I just want to call it index.html right and I think we're going to leave it like this for now right okay and the next thing I want to do is head over to anthropics so we are going to be using the playground here today but uh of course you can just use gp4 shut GPT uh whatever fits your style so we're going to select the Opus model here right that's the most powerful one I'm just going to set the temperature to yeah 6 doesn't really matter but I want to increase the tokens because we might do some long Snippets here so set it to like this and next we want to set our system prompt right so I'm just going to set this to pretty simple you are an expert software de with expertise in HTML JS node.js and CSS your task is to assist the user I'm not going to do any fancy system prompt for this uh okay so that means that we are ready to start with this project okay so the first step is going to be a bit cheesy of course so we're just going to save this site and save it into our empty folder here right okay so if we go to visual studio now you can see we have the HTML code of the website here uh the first thing we're going to do is go back here and go to an Tropic and I'm just going to show you the prompt I'm going to use for this hello I want to build a template for a website this is the HTML code I have to build this on and here we're going to paste in the code uh I want to use the same styling colors fonts and layout as the HTML and CSS above ignore images logos and icons for now can you help me write the full code for this okay so let's go back here let's copy uh the HTML code here okay okay and let's remove that let's paste it in okay let's create a space here yeah and yes just run this so what I really like about uh Opus is that it doesn't really do a lot of what I call it just goes ahead certainly here's the full code for the website and it just goes ahead and writes the code we are interested in it doesn't go around like gp4 did at least for a while and put in a lot of text use a lot of tokens for basically nothing and it didn't complete all the things we needed in our code it just left this placeholders which were very annoying so I'm just going to let this run now and see what we end up with okay so we have the HTML here we have the CSS so since I'm lazy I'm just going to add this to conversation I'm going to go I'm going to prompt it merge this into one HTML file okay okay good so I'm just going to copy the code let's go back here select our index.html let's just uh paste in the code and let's save that and let's see where we are at now so if we open the site now you can see okay this is something right it's a bit off it's not centered and yeah it's a bit strange but uh that's a good start I think so now let's uh Center this I think so let's add this to conversation and let's just great Center everything okay that was done let's copy that let's go back here replace this code save it and let's refresh this y perfect so now we are kind of centered and we can move on to the next step and that is going to be to start working on the styling so I'm just going to use the prompt great here is the style I want for the menu and I'm I'm going to copy in some styling here and implement this please okay so for that we have to go back to the web page and we're just going to start with the menu right wasn't it uh the menu right yeah so I'm going to click here on this menu I'm going to inspect that right okay so let me just drag this out a bit and here we're going to pull over the styling so what I'm going to do is I'm just going to copy this styling here right okay so let's copy that let's go back to entropic and let's take out this and paste in this okay so implement this please and let's run it and see if it works okay so that was the code so let's copy that let's go back back to the studio let's update this let's save it and let's refresh our site yeah good so you can see the menu is now in the style we want that means let's move on to the title or the H1 header just going to do the same so here is the style I want for my H1 we're going to copy the style uh okay so let's go here and inspect the heading and let's just grab uh this I think okay let's copy that let's go back here remove this paste it in and yeah let's see if it works okay so we have a code here let's copy that let's go back here and paste it in let's save it and refresh this okay yeah looks good I'm happy with that I kind of want to remove this part here I don't like these titles so try let's try to replace this I deleted the messages we had so far because we don't want to spend extra tokens right so now I'm just going to go my code I want to remove the ID post list and replace it with some information about how llms Works explain this so a 10-year-old can understand it only in one paragraph Okay so the next thing we need our code here so I'm just going to grab that paste it in and yeah let's see if this is going to give us some new information so you can see the mark didn't work here but let's try to add it to conversation here and I think we can just copy it from the text box here I think that should be fine so all the way down here okay let's see what we got here now okay so let's save that we are at 100 lines now okay so let's refresh and yeah uh we got uh some better things here we got like a paragraph about large language models uh I'm not going to read this now but yeah I think it looks okay so yeah let's just move on then the next thing I want to do is also copy the style for the body okay so we're just going to do the same as before I'm going to go back here I'm just going to inspect the background here okay so we have something from the body here I'm just going to copy this and yeah let's go back here and replace this styling and just to fix that okay so we added this to our conversation let's just copy the code again let's go back here I don't know if this is going to make a big difference to be honest uh yeah it changed a bit I don't know if I even like that no I kind of changed my mind I think I want the previous version I think that looked better so let's keep it like this I think I like that more okay good so let's move on then so we can just skip that step I guess since we are having with some issues with the markdown I'm just going to copy the system prompt I'm going to refresh this and I'm going to start like a new prompt here uh so let's just uh refresh this paste in our system prompt let's set it to the same here and yeah let's pick Opus let's go so my code I'm going to paste in that now I want to create a text box below our paragraph about the llm where the user can enter messages the text box should have a terminal style the text box is going to be connected to an llm later okay so let's paste in our code can you fix this okay so let's go okay so we're still having issues with the markdown so we're just going to use the text here so uh let's copy this right and down here and let's see how this looks now so let's update our code we added 20 new lines okay so let's go and refresh okay so here is kind of our initial text box looks pretty good so yeah I'm happy with that now let's move on and integrate our large language model model and here is the prompt I want to use for this so of course we're going to paste in our code we're going to paste in some API documentation from Gro and uh I'm going to have to add my API key too but I'm going to try to hide that now let's start implementing the llm shat into our website we are using the text box uh as the interface where the user communicates with the llm can you help me fix include all existing lines of code in the updated version okay so uh I'm just going to go grab our code first here okay so let's paste that in and then I'm going to go get some API docks from grock here so uh I think we're just going to copy this basic chat completion okay so let's grab that let's go back here and paste in that okay uh I'm just going to grab an API key I decided just to revoke this anyway so yeah yeah doesn't matter if you see it so let me just go grab that okay so here's the key and now let's try to see what we can get back here so I'm just going to run this okay good so you can see it didn't add the existing style so I'm just going to ask for that so let me just add this to conversation include the existing Styles too okay yeah here we got it so you can see down here we have uh something called Script and that is what we are going to use to run the llm rights okay so let me just grab this and let's back head back here and let's paste it in so we're at 161 lines now so let me just refresh that uh okay so I didn't like the send button let's fix that later right okay so let's add this to the conversation the next thing we're going to do now is great now I guess we need a nodejs server to run this because I want to use that so let's see if we can get something similar to that okay so we get the steps we're going to do this uh npm in it y so why don't we just go ahead and do that right away so let's just go this right okay and let's install this grock part npm okay that's done and now we're going to create this Ser server.js so let's just create a new file here server.js right okay and let's copy the code paste it in here and save that and then we have to update our scripts right so let's add this and just go great write a full new update hm code don't skip any lines okay great so let's copy the updated code let's go to index.html Let's paste it in let's save it and I think we need to create some folders here so let's create the static let's create public let's move index to public and yeah let's test it okay so node server.js okay so have have some kind of error here so let me copy that and head back to an Tropics so I get this error so let's paste in our error and see if we can do some debugging okay so it seems there was some error in our server.js file so it added our API key so I'm going to copy that head over to our server file here and let's swap that out let's clear this let's try to run it again yes server is running on Port twe perfect and let's go to the browser wow okay so let's say Hello send okay it's working uh but uh it's not too good I don't like the interface so let's say tell me about AI send yeah so we get the response look how quick rock is so this is working for now but I don't like the text box let's do some styling on that right so let's add the to conversation and let's go with the prompt can you give the text box a 90s hacker retro style and make it Dynamic don't have a button to send just let the user press enter okay so let's see what we can get back here okay so this kind of changed it all the way B back to this so it was cool but it's not exactly what I was looking for so I changed it up a bit uh text as a 9s hacker retro terminal style uh don't change anything else about the website okay okay so let's try that instead okay so let's copy this and let's replace this right okay so let's save that and yeah let's check out how it looks now okay so let's refresh this all right this looks cool right hello okay so we got a different color now yeah I like this I like the UI to be enter your command down here instead yeah okay so I think I'm happy with this this was kind of what I was looking for and let's just appreciate how fast Gro is what can you tell me about AI why so fast uh and we can scroll up um give me five tips on how to Learn Python Programming okay so I like that it kind of stays in the same size here and we can just scroll up to check previous messages and it looks really good so yeah I'm very happy how this turned out I wish I could host this now but I think that's going to be a bit expensive uh but yeah I really like this and I thought I saw one thing so if you go right 10 paragraphs about the singularity while it is typing now you can see assistant is typing that was pretty cool before we kind of get the response right and there we got it that was pretty quick okay so yeah uh this turned out pretty good so we kind of got our template here uh of course we can change this uh we have some links here we can expand on this if we wanted to we can can change the footer but if you kind of look at our um Source here so this was kind of what we were aiming for we ended up with this so it's not an exact copy but uh like we don't have the cool fonts and stuff we don't have this pick font and I think we have monos space but uh I'm happy this didn't take too long I think I spent like yeah I spent maybe like an hour and think it cost me like $1 Maybe or something like that uh but I really enjoyed it so yeah thank you for tuning in hope you enjoyed it hope you learned something uh leave a comment if you have better ideas how we can do these types of videos they drag on a bit but yeah I enjoyed it I got a lot of other workflows too we can take a look at but yeah thank you for tuning in have a great day and I'll see you on Wednesday

Channel: All About AI

Views: 7,705

Keywords: llm, claude 3 opus, ai workflow, code with ai, build with ai, website with ai, llm project, llm project ideas, javascript, ai engineer, ai engineering

Id: a65Lm8MOooc

Length: 15min 49sec (949 seconds)

Published: Sun Mar 17 2024