How To Build Your Own AI With ChatGPT API

ChatGPT is amazing in what it can do, but what if you could leverage that power for your own sites. Well with the ChatGPT API you can do exactly that. In this video I show you just how easy it is to implement AI chat features in your very own application.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/c...
OpenAi Website: platform.openai.com/overview
Async/Await Video: • JavaScript Async Await
Async/Await Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:35 - API Sign Up
01:44 - Project Setup
03:25 - Implementing ChatGPT
06:50 - Adding User Input
#ChatGPT #WDS #AI

[@pgill18]

Current version of openai has a changed since this video. Here's the code that works now (Oct 2023): import { config } from 'dotenv' config() import { OpenAI } from 'openai' const openai = new OpenAI( { apiKey: process.env.API_KEY } ); openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: [ { role: "user", content: "Hello ChatGPT" } ] }).then(res => { console.log(res) res.choices.forEach( out => console.log(out.message) ); });

[@Icode2395]

Man you are life saver.

[@5uperyol]

Thank you for the updated!

[@buhayraashah6305]

thanks man

[@RuntheplayUniversity]

still not sure how to use

[@NubeBuster]

Thanks for this simple guide on how to access the chatgpt api. You can ignore other commenters complaining. It's a good video and the title is fine.

[@kenirwin5538]

Thanks Kyle -- This was just what I needed to take the first few steps to doing something useful with ChatGPT

[@datpspguy]

Very helpful, I modified this a bit to allow for adding multiple lines of text for the input and submitted the request only when pressing enter 2x. Thanks for sharing!!

[@bigbandzjosh3497]

Thanks for this video! I was able to get a quick bot up and running, with a continuous conversation! This was the perfect starting point I needed.

[@StefanoV827]

To make it remember previous messages, just save every input and output and place it inside the message array, being sure to separate your messages with "user" role, and the ChatGpt answers with "assistant" role. That's it guys

[@ontheruntonowhere]

Great tip, thank you!

[@marshallcraft2819]

So what your saying is.. If I do this and place the entire program into a digital monster.... ...I can finally make a Digimon?

[@StefanoV827]

@@marshallcraft2819 😂😂😂

[@ukn4]

@@StefanoV827 If you give it the fact that it have to imporsonate agumon I think you can get pretty close

[@EasinTanvir]

I need to make it remember previous messages. I can't understand how do I save every input and output and place it inside the message array. Can you please tell me or give me the source code for me

[@yuting386]

Thank you Kyle, you always make stuff so much easier to understand❤

[@dean4763]

Short, sharp and to the point as always. Great video.

[@jsricochet]

Awesome: thanks Kyle! So instead of fearing being replaced, we'll have an edge and we'll be able to use our programming skills to use this AI in a way that regulars users who can't program can't do. Happy coding AIs :D

[@isaiahkain4874]

dude, this is amazing. thank you. i was looking for something like this for hours

[@samuraitechnologies]

Short and Precise thanks as always Kyle.

[@brodendangio4810]

This is the essential tutorial on setting up your first basic ChatGPT bot.

[@c4v3studio54]

I dunno how i finded you, you deserve more visits.. ill be tuning !! subscribed

[@nilpatil5387]

thanks kyle, i was looking for something on open ai you explained so well loved it

[@TheDorac1]

This is amazing. Thank you Kyle!

[@asivak]

Very important question that I was waiting for the whole video: How can I train my own chatbot on my own data, so that the chatbot will answer with knowledge of a lot of context? And how much data can I put in this message array? Because with ChatGPT-3, if you give it even a small amount of information, it may not remember what we started with and give inaccurate responses.

[@vikram2105]

+1

[@neilmerchant5228]

@@vikram2105 Short answer: There are limited ways to do it, it's not straightforward. Long answer: I have been trying to figure this out myself for the last couple weeks. The simplest and most intuitive way to feed it information is: tell it the information in a prompt. Obviously, this isn't a real solution, because the size of individual messages is limited, overall memory of a conversation is limited, and keeping the bot up to date with the latest changes in a database would be a nightmare. ChatGPT has an API called Embeddings which can be used to feed training data. It also requires what's called a 'vector database', you can't simply use a SQL database or something similar. This involves breaking down a dataset into chunks creating an embedding vector for each chunk. The official ChatGPT docs have a tutuorial of sorts, which involves scraping data from a site and feeding the data into the ChatGPT Embeddings API platform.openai.com/docs/tutorials/web-qa-embeddings github.com/openai/openai-cookbook/blob/main/examples/Question_answering_using_embeddings.ipynb The closest thing I've found to a real solution for using a constantly changing data source like a SQL database is a tool called Llama-Index. Per the docs: "LlamaIndex (GPT Index) is a project that provides a central interface to connect your LLM's with external data." Looks like it can integrate with tons of different sources, SQL databases, ElasticSearch, Notion, Obsidian, and lots more. Unfortunately it appears there's only a Python library currently. I'm keeping an eye on it for updates, or alternate solutions. llamahub.ai/ gpt-index.readthedocs.io/en/latest/

[@christiangrothe8888]

why dont you ask chat gpt itself? :P

[@lucawurker4911]

For this you should fine tune gpt 3 models.

[@davidskoda1887]

Exactly... I implemented this thing two weeks ago, but a way to train it to use only specific website and train it to answer questions certain way, to actually use my own data? Seems impossible at this point. They offer some payed services to do this, but there is no way you can tell if they aren't collecting your data and publishing them somewhere... unless you are developing it, you really can't customize it in any way. I mean, I wanted to train my own fuzzy logic model to create Beat Saber levels year ago, now with this, I'm thinking solution might be in reach, but turns out it's just barely out of it and seems it always will be... all this big talk about AI and yet, you cannot really do anything but ask chatbot about things on internet, or create images... Hopefuly I'm totally wrong in 2 weeks from now on :)

[@SnappyScience]

Brilliant video. Gets you up and running in time!

[@mariaprincesss3111]

Exactly what I need! Thank you!

[@tabooization123]

Thanks, this is a great guide to start building an AI project

[@uulecrocodile8437]

I love jackson guitars! great video too!

[@MiguelDiganchi]

Hello! I enjoyed watching your video. I have a few questions about the pricing of training. When should we train the API? And how often should we train it? Thank you for your time.

[@colinmarshall6634]

GPT-4 is out, but you have to sign up for the waitlist. FYI for anyone that wants the absolute most up to date. It's significantly more expensive per call though (but still quite cheap overall).

[@DriveandThrive]

You just have to pay for a subscription I use it now

[@vusiliyK]

Yeah there's no waitlist. I purchased it and its great but not a huge difference between gpt 3.5 for me as a regular person.

[@brymstoner]

@@vusiliyK pretty sure you still have to wait to be added to the list even if you pay.

[@johnsondoeboy2772]

@@brymstoner Exactly

[@neilmerchant5228]

I love your channel Kyle. This video felt a bit lacking though. I would love to see a video showcasing the API being implemented for some kind of basic real-world use case. An example of how to use the Fine-tuning or Embeddings API and feed training data in to tailor the bot to the specific use case would be fantastic.

[@ontheruntonowhere]

I wouldn't beat Kyle up too much. Chat GPT is brand new and hot but he's got other things on his plate. I assume he released this snack to help us out with a quick overview and will almost certainly have a deeper dive at a later date. However, if you follow his channel you are probably competent enough to implement UI/UX via React, PHP, etc. Reference the docs and give it a shot!

[@funkahontas]

Leave that to the channels that specialize in ChatGPT/AI architectures, this is a good primer as are all of Kyle's videos basically showcasing the tech to beginners and intermediate programmers who might be afraid of this new tech.

[@itsabhiyan]

He doesn't have to give everything on your plate. He has guided us to how to use the API, and we are the ones who think of the real world use cases. I actually PREFER this type of content.

[@VideoHostSite]

I agree- this tutorial was as useless as your average Canadian. It supplied nothing of use whatsoever.

[@daromacs]

or just be thankful for his effort of making videos.

[@theisoj]

Thanks Kyle! 👍

[@ranamuzamal9655]

Thats great.Thanks for sharing useful information

[@sarveshschauhan]

Thanks Kyle, can you explain how we can use a custom information using that as a base information it gives the output?

[@damonwu9658]

HI man, nice one👍, just got 1 tiny question: is there a way we can show code block rather than text?

[@frankchen3021]

hi kyle, thank you so much for this video. but do you know how to stream the response? so it keeps popping up instead of showing up all at once

[@haliszekeriyaozkok4851]

it's beautiful. if it wasn't paid api i definitely will integrate it.

[@Simon-yf7fo]

This title is just misleading and wrong. You don‘t build an AI you just integrate one.

[@btat16]

To be fair, ChatGPT isn't the AI itself. GPT3 is. ChatGPT is simply an integration of GPT3. Clickbaity? Yes, that's how most KZbinrs survive. False/misleading? No. Edit: this comment is wrong. Leaving it up as a reminder of my shame

[@KeenanBernard]

@@btat16 exactly lol

[@Simon-yf7fo]

@@btat16 he still isn‘t building an AI. It doesn’t even matter if the AI is GPT-3 or if the AI is ChatGPT he is still just integrating an existing AI.

[@btat16]

@@Simon-yf7fo Thought you'd say that. It boils down to how you define "build". When someone says "they built a website using Wix/WordPress/Webflow", did they "build" a site despite them not actually "building" the components of a website (the HTML, CSS, JSS, etc.)? The end result is a website, despite them using a service that handles the groundwork of the product. Edit: to clarify before the ackchuallies get me, I mean basic WordPress themes with only drag and drop as well as Webflow with its most basic functionalities

[@theisoj]

you're exactly right on that.

[@raj.blazers]

Hi, What kind of chatbot UI could be developed that is framework agnostic? I want to use the UI with gpt3 apis running in some python or node backend. I want to plug and play this chatbot UI which can be integrated in a react and vue app seperately

[@ignifymind]

You are absolute legend my friend :-0

[@MatthewGibbon]

Great example of simple use case. However is it possible yet to point the LLM as an interface to your own or a specific knowledge base of content to be an interface for? An example somewhere was using the tax laws as a prescribed knowledge base and askin the LLM to perform tasks based on that. IS this possible yet as an extension of this example?

[@ophelia6207]

Awesome, thanks!

[@sohailahmad1277]

Big fan of your content❤💕💕

[@Nursultan_karazhigit]

thanks for the video, is it possible to integrate all the features of chat gpt 4 into your application ? e.g. transcribing a conversation into crm to check customer service quality ?

[@louielouie9502]

So do you write your own rules for your own version of chat gpt or did you only integrate a watered down version of the original chat gpt for your own use?

[@MW2proification]

When you integrate the chatbot from openai, will it be tied to it by any means of policy, monetization or data transfer, or will this one you personally integrate is totally isolated on your local machine and can do almost anything you want with it?

[@kittentheorangetabby9676]

I did this and integrated it with AWS for speech, and linked a bunch of Google API services in.

[@piddy1235]

00:02 OpenAI has expanded upon their API to include ChatGPT, allowing you to integrate AI into your own applications. 01:21 Create a secret key for ChatGPT API 02:33 Setting up configuration for a simple node terminal application 03:47 Setting up OpenAI for chat related tasks 05:00 Sending messages from user role 06:14 Using ChatGPT to generate AI responses and handling message content 07:31 Creating user interface prompts and listeners. 08:41 Using ChatGPT API to build a chat-related AI. Crafted by Merlin AI.

[@mouhamedgueye2775]

Please could you explain us how to put the chat in an application or a website, especially a website. Thanks in advance !

[@bravoslab]

what's good, Kyle? was just wondering how can I make GPT answer the user prompt under a role given by a dev prompt? "u are an engineer focused on 2floor buildings" for example and then give out some data the model can use to better answer the questions/prompts from the user. do u understand?

[@luis96xd]

Nice tutorial! But, I get **Too many requests** error when executing the script and a "hello, what functions can I do?"

[@xx_Firefox_xx]

my brain has never been so confused and understanding at the same time

[@shengye5990]

thank you

[@FaizanAnwerAli]

One question, in a recent Microsoft 365 demo they showed that in PowerPoint you can ask in a chat to review a word file and create a presentation for it with animation. I get the chat feature you just demonstrated, but how do you tell it to scan your DB, files and images on the server and perform an action on the website, like Microsoft is doing with MS Office, or Google is doing with their Workspace or khan Academy with their website? Because that's a game changer. Have you seen those videos that just came out a day ago?

[@scottb6715]

I saw the Microsoft video and it was AMAZING

[@buttofthejoke]

I'm guessing since MS can access files and read it on your behalf, it reads the content, and sends it to gpt, and using that, it returns some results

[@rodrigocoriat7106]

THIS ROCKS!!!

[@karlbolinger2161]

Could you show how to build the UI for the prompting?

[@ToiBroCode]

Hi is there anyway to build our own ChatGPT AI using JavaScript for fun? thanks

[@zikwin]

how to pre-train it with our own info..like our own company info or product ?

[@coderxceko]

I love it! Just subscribed...

[@rishiraj2548]

Thanks

[@OlaWhite]

Awesome! Thanks. I have a question please. I have a list of names of like the president of all countries in the world and I would to use ChatGPT API to read the list and generate few details about these presidents like, (1) About the president, (2) 1 inspiration quote from the president and (3) Why he/she made the quote. I want results to be populated on a page called results.html How do I achieve these with this tutorial? Thank you.

[@user-iw7fp1mc9x]

can you do this in Python instead of Java?

[@kap139]

here 👑, you dropped this

[@alexander123987]

Looking for something like this but more explanation. Immediately got an error trying to use node.js. I'm super stoked to start playing around with the api but I need a little more detail. Do y'all have any ideas?

[@jasonpmcneill]

The main thing that resonates with me about ChatGPT is its conversational abilities. It can convey information in a conversational way. Other than that, it doesn’t seem like much more than a search engine with conversational abilities. And what value is there in just giving users the ability to search from a search engine? We’ve had that ability for about 30 years now.

[@vincentjohnflorio]

I find the former to be incredibly useful. It isn't a thinking being but it parses like one. It also has a built-in broad perspective because no human being has ever been made aware of everything ever.

[@Bobby-sm3sy]

I think of ChatGPT the same way, and I would add that the value using it over the search engine is that it filters through all of the results for me and returns the most relevant information. Most of the time, anyways. Sometimes it's a waste of time for more complex queries. For simple and more direct queries, sometimes it even interprets the information and returns it in a usable form specific for my use case.

[@SEWebDesign]

Using traditional search engines to look for a recipe is a perfect illustration of how chatGPT search is better. I don't want to have to wade through a keyword stuffed, ad rittled 1000 word essay on the history of porkchops just to find a recipe. But that's what it takes to rank on the first page of Google right now.

[@unblemished_]

Other than that, ChatGPT explains things really well and you can even refer to specific parts of your own code, which can be painful to do with a common search engine.

[@khangviet7042]

awesome thanks

[@negativeplayer4446]

Question: Is it possible to create a front-end that with features that allows the AI to obtain and search data within the conversation through a "network tree?" (Essentially training the AI on the data you have whilst preventing the AI to input unwanted data) What I mean by that is: *"The Network Tree"* is a Network containing branches and trees that serve as connection between certain elements portrayed within the conversation. We can visualize this as a map containing all elements and descriptions about a conversation, a story, or something else and the necessary data about those. A complex summary in a form of a map. By entering certain prompts and referencing local data as a basis for generating future responses, the AI is able to output more consistent responses whilst still utilizing "skills" from its database as the Network Tree would have to make the AI redo responses that the user doesn't want or wasn't asking. NT (Network Tree) inquires AI in the background to fulfill certain prompts which are generated whenever certain keywords are present within the input. So if user asked for a character in the story, the NT will ask the AI to provide all necessary data about the character. This will also work the same for items, places, etc.. This prevents AIs from randomly generating info aboit existing elements as the NT will be the AI's reference point. A branch is generated from an NT whenever it detects the user provide new data that is related to that NT. A new NT will be generated whenever the input generated is new, but different to the current trees within the conversation. For ex: You can have several trees for a cast of characters each with their own branches. Another set for setting, more for items, places, etc. These are updated when AI sees that data from user is new and decides whether it is or isn't related. Also, if AI sees that user-input is inconsistent for NT, it would inquire user for clarification and will update branch or ignore the token that triggered the inconsistencies to prevent confusion. NTs will also keep tract of scenes, updating scenes and asking AI to generate timelines and dates for said scenes. A scene is generated whenever the AI detects new action taking place or the settings changing. Sub-scenes are generated in Main-scenes. These can be subtle actions, conflicts, thoughts, etc. within the cast. Like a scene of a family eating with the main cast having trouble with some schoolwork. The NT would ask AI to generate a requirements for that scene such as who is in the scene, their appearance, age, name, personality, where they're placed, etc. These inquires could be automously generated by prompting the AI to generate details within the scene in the background.

[@Sankaritarina89]

One question: on chatGPT website there are those separate chats where the ai can understand what was asked before, no? Is that possible when using the API? Since each API call seems to be a separate "chat", No?

[@codeacme17]

The message in the request parameter of the turbo interface is an array, which means that if you want it to remember the above, you can store the above information in the array

[@asivak]

@@codeacme17 But most important is how much data you can put there? (I mean in message array

[@hackmylife6268]

@@asivak The Chat GPT model has a 4092 token limit so whatever the size of the array it should be fine, but it will only take into account the n last messages depending on its token limit

[@djeragon6544]

Is there a way to use my own dataset to make a gpt version for my use case ?

[@ibrahimjaballa2706]

I am a beginner When using gpt chat, do I have to get the API from it, or can I get it from anywhere?

[@JamesQQuick]

Nice!!

[@geforcesong]

Excellent

[@rainerrain9689]

What I'm looking for is an API web browser plug in to pull real stock data so I can give chatGPT the up to date data to work on my prompts ,any help on this ? Thanks

[@drjambalaya8395]

When using the API, I guess all prompts will still be used as training data, right? Can you even do something to keep your input confidential?

[@virgilwalker683]

Your using a Linux base application to run your commands?

[@DigitalSamTV]

hi, how do u set if the api uses gpt3.5 or gpt 4 ? there is no setting when you generate the key as far as I can see... please help. cheers

[@arkahhhzzrisingto1071]

Thanks ⚡🙅

[@rafmaits8656]

How do we use it for our own datasets?

[@michaelgonzales2732]

Hello. I am trying to integrate ChatGPT with TextDrip and Acuity. Would I follow this same process to have ChatGPT to respond to Yes responses from TextDrip campaigns and guide them towards making an appointment in Acuity?

[@steezyx2321]

Awesome.

[@jonathanalphonso2035]

Tip for anyone trying this and failing. I was getting an error: "You exceeded your current quota...". Turns out you need to add your credit card info and then wait 15 or so minutes before making API calls. It was driving me nuts since I thought I was doing something wrong.

[@alibinnaseer]

I don't have one, I am 16 :(

[@hadeebataj2137]

Has your credit card been charged as per usage?

[@jonathanalphonso2035]

@@hadeebataj2137 I only used $0.02 worth but it charged me $6.00 to top up my credits.

[@chinatyu4778]

How would you deploy it?

[@pingu_..]

Why does the it say that the requested module 'openai' does not provide an export named 'Configuration' ????

[@Mr-gi9rq]

Same problem, did you find any solution

[@pallu83]

Does it remember what you said earlier in the conversation?

[@mritorto1]

Is that a Jackson guitar in the back ground

[@austinmallar5430]

This wouldn't be conversational though right? Each prompt would create a new conversation with no knowledge of the previous messages?

[@Mauro0]

Cool !!!

[@paulolinks1]

Probably the API was update and this code doesn't work anymore...

[@Sanjeet287]

how should i fix this error The requested module 'openai' does not provide an export named 'Configuration'

[@Mr-gi9rq]

Same problem, did you fix it?

[@Matt-jw9qd]

any fix yet?@@Mr-gi9rq

[@seargentomkar5299]

Check new openai documentation

[@lukewang5400]

how do i open the terminal to run $ npm init -y?

[@euwofbw]

very good

[@csprofessorpam]

I am getting the error that openai.createChatCompletion is not a function. I guess the docs have changed? I am trying to find the correct syntax to use.

[@meetahaldar2083]

One of an awesome video i have ever seen in my life till now.

[@davidmoosmann]

But how do I make the chat continuous? So it remembers what I posted before.

[@blueapple2428]

1:57 how can i open it?

[@ihyrere]

What terminal is he using?

[@simpledish2471]

I want to copy it step by step but in the first step im doomed. How to make file like that, the .env?

[@abanoubashraf1308]

i made new account and subscribed to plus right away and got 0 free credit, does anyone know why? and am i still able to use the abit or not in this case?

[@nathanict.developers]

GOD bless you

[@LEKSIDENATION1]

How to i train it with my own data

[@afzalharun8975]

I think the gpt-3.5-turbo model doesnt work anymore, text-davinci-003 and others work

[@tesshsu1]

Is this will rendre response more faster then in chatGTP website? Then it is worth to develop one in local

[@codeacme17]

use stream model，faster

[@tesshsu1]

@@codeacme17 thanks, stream model? What that's about? Version payante ?

[@eliah787]

how to open terminal like that?

[@nuclearHesam]

how i can bulid this in windows

[@sahildas.]

fifth! watched after 4 minutes this video uploaded

[@malluvocalist1416]

why iam not getting correct answet it gives some python code some times

[@tomasbloem3591]

Maybe it's a dumb question, but is there a tutorial on how to set up the correct programs? Because I keep getting errors like "MODULE_NOT_FOUND". Sounds like I don't have the same setup as you...

[@gauravjagtap2620]

coz openai has there own library form where you can use all there tools

[@IamNivesh]

i am having problem to implement it my website may someone help me please?