Easily integrate with ChatGPT API in 4 minutes

today I'll be showing you how to set up a Chachi PT account a simple UI to hit their API and show a response by the end of this video you'll see how fast and easy it is to do the UI that we're going to make is using next js13 tailwind and open AI it allows you to paste your chachypt credentials and your prompt to hit the model and show a response the GitHub code is linked in the description along with the UI deployed via GitHub Pages if you want to try it out yourself let's Jump Right In I'm on the chat GPT API website the link is in the description down below first we're going to log in or sign up I'm already registered so I'm going to log in with my Google account go to the profile up at the top right and click manage account save the org ID as you may need it for some API calls first let's take a look at the rate limits and billing so that we understand the limitations the API sets on us these are the settings at the time of this video but they can and have changed over time first let's take a look at rate limits their rate limits are bound by requests per minute and tokens per minute when you provide a credit card the limits are 3 500 requests per minute and 90k tokens per minute but if you don't it's three requests per minute and 40K tokens per minute if you click on the billing tab you can easily add a payment method and configure a budget to not go over a certain amount of money spent jumping over to pricing pricing is split between input costs and output costs the pricing is also varied depending on how much context or information you want the model to be able to retain chatgpt4 ranges from 3 cents to 12 cents per 1000 tokens and chat GPT 3.5 ranges from .0015 cents up to .004 cents per 1000 tokens as a point of reference a thousand tokens is about 750 words which is actually a decent amount for this tutorial we'll be using chat EPT 3.5 but the usage pattern between 3 5 and 4 is roughly the same now let's create our API key back in the settings menu click on API key in the side menu create a new secret key and save off your key for later if you click the documentation tab up in the nav bar click libraries on the side menu and then today we'll be using node.js Library that's all the documentation you need to configure open API in node now we're ready to create our project let's create a new next.js app in a terminal with the create next app command I'll accept all the defaults once it's done installing the dependencies also install open API then we're going to run our app and make sure it's working in the browser pull up your app in vs code and navigate to the app page.tsx file where we're going to remove everything and start fresh add use client at the top because this is going to be a client-side component we need to store the user's org ID and API key that we created from the chat GPT API so we use use statehooks to do that we also need to keep track of the user's prompt and track if the API call is loading and store the response when it returns now we can create the function that calls chatgpt first set loading to True next configure open API using the org ID and API key that we stored above then create a new instance of open API passing in the configuration we're going to be using chat cpt's create chat completion call using the 3.5 turbo model we'll send the message as a user with the prompt that we'd like chat GPT to respond to finally we'll set loading to false and store the response now we can add our HTML we'll need to add an org ID input an API key input and a prompt input we also have to add a submit button to call chachapc then if loading is true show loading on the screen otherwise show the chat apt response that's it now let's try it out it looks like garbage but we'll fix that in a second paste in your org ID API key and a prompt what should I call the title of this YouTube video and hit submit thanks chatgpt but I think we can do better I'm gonna throw some Tailwind CSS in the code to clean it up a little bit don't worry all the codes in GitHub and there you have it your very own chatbot if you like this guide and want to see more let us know by Smashing that like button we'll be releasing a video series where we use chat ept's API to make some pretty cool apps if you want to check them out hit the Subscribe button and turn on notifications so you'll know when they come out I'm Jim Becker from rific and we'll see you next time

Channel: Rifik

Views: 46,344

Keywords: chatgpt, openai, chat gpt, next js, next js 13, tailwind css, tailwind, software engineering, javascript, typescript, tutorial, nextjs, react js, api, software engineer, software, coding, web dev simplified, web dev, coder

Id: xZqTEBYRY4U

Length: 4min 10sec (250 seconds)

Published: Wed Jun 14 2023