ChatGPT API - Build A Chatbot App

[@mattizzle81]

Just one tip, putting the identity in just the system message is not really that effective. The model actually doesn’t put a lot of weight in the system message. What I do is put it both in the system message and a brief back and forth user/assistant conversation at the beginning with the same information, like user: You are a …… and then assistant: Ah yes, I understand now that I’m a ………

[@Huntabyte]

That's great to know! Thanks for giving an example, I have just began experimenting with it over the past couple days! I'll pin this comment for others to reference as well.

[@jason_v12345]

Is that name field an actual thing? I didn't see it documented, and no one mentions it on the web

[@Huntabyte]

@@jason_v12345 According to their TypeScript definitions, yes, but it could still be experimental/docs could still be in-progress.

[@BobRobinson]

@@Huntabyte i'm having trouble with the api key I can get it to work on a local server but not when I deploy to vercel and idea?

[@Huntabyte]

@@BobRobinson Did you add it to your vercel environment variables?

[@seangillic]

I am 52 and just about to start learning to code. You incredible instruction video just pushed across the line and reminded me why I want lo learn how to code and create apps using ChatGPT. Many thanks 👍

[@Huntabyte]

That's great to hear! Be sure to join our Discord if you have any questions or need assistance with anything, we have a very helpful community!

[@ninanordbo]

check out 100devs, l started learning code last year and l am 49 now, already been hired. the 100devs commmunity is awesome.

[@asimdeyaf]

Now’s a good time to start learning. Good luck. 🫡

[@itswadesh]

I have started watching each of your uploads and keep on waiting for more new uploads. These videos are just fantastic. Keep spreading love...

[@Huntabyte]

Thanks for watching! Will do!

[@joetrubenstein]

Man, you are the only person on the internet right now who was able to explain this to me

[@jporre]

Great video Hunter ! always learning new things from your fast paced presentations. I was wondering how would this approach change to include svelte5 , and make use of tool calling, embeddings, multimodal and realtime api.

[@imho7992]

Man u are so good with the timing, was just playing around with the new API!

[@Huntabyte]

Thank you! It’s fantastic!

[@TheGuitarzac]

How'd you got access to the api? I guess GPT Plus isn't enough?

[@Huntabyte]

@@TheGuitarzac It's through their platform. platform.openai.com - completely separate from GPT+

[@kswcfa]

Thanks!

[@Huntabyte]

Thank you Kelly!

[@lgsyt]

Impressive explanations and total cutting edge topics, very useful, please keep on doing

[@gamblinggangster769]

Wow, sir, my hats of to you. This is awsome yea im old im 46 and am glad ive lived trough a lotvof changes starting from the simple beper to now ai and even maybe see brain implant would love to be like the matrix movie and be able to plug in and know and be able to understand half of what you are writing hell im stuck on syntax or codes for google sheets and seeing you fly trough this blows my mind how something rhat recently came outband you are in mi opinion an expert at it you gainged a new fallower ibwillbhave to govback and watch your vids thanks for showing me this makes me want to learn something new keep up the amazing work and once again thank you for the time and effort you put into showing others. New stuff, well, at least new to me

[@Huntabyte]

Thank you!

[@maskman4821]

My thoughts on this demo tutorial: 1. This is the first tutorial that applies chatGPT api 2. The UI and UX are fantastic and smooth 3. We can integrate this chatbot into our Sveltekit apps seamlessly 4. We can learn many advanced technuques such as Vercel Edge function, sse module, the usage of chatGPT api, etc. This is a valuable lesson we could have, it is time to bring openai chatbot into our apps from now on or users will abandon your apps if they are not equipped with AI talking in human manner capability you know 😎🤓🤗😘😌

[@Huntabyte]

Thank you for the words, Mask Man!

[@fegreat2462]

thank you so much, very usefull. Always waiting for you videos

[@rampage_sl]

Im glad I came across this tutorial! perfect!

[@Itssssss_Jack]

Great video bro! 💙

[@zendrix396]

thanks, really helpful for starters!

[@ofeenee]

Thank you for the great video! 🙏

[@bobbradleybell]

Hey, thanks for your content. I think i pressed the like button in every video you drop. So good an well explained.

[@Huntabyte]

Thanks Bryan, I appreciate you taking the time to do that!

[@banderdash]

Thanks, this video made my day. You helped it all make sense.

[@kian8770]

Keep producing amazing relevant content like this. Excellent job.

[@Huntabyte]

Will do!

[@SolomonFoskaay]

Helpful.. Thanks 👍

[@Huntabyte]

You’re welcome!

[@p_o_z_e]

Hey, i got the stream working based on your code but in the +server id like to be able to save the finished stream to my backend or know when the stream is done at the server level right now the client looks for ["DONE"] and not server. do you have any idea how i can do that? when i add a loop like for chunk in completion etc i get a error that im blocking the response body.

[@hello_world_104]

Amazing video. Keep these coming and ill watch every one. Maybe could get into supabase embeddings.

[@automioai]

Broo! what a tutorial, thanks so much. an idea for another video: python integration with sleve.

[@maskman4821]

Many people dive in Python learning these days, because almost AI powered backends are developed with Python, we developers just gotta know Python programming these days 😅🤓😎😌

[@automioai]

@@maskman4821 Yea btw with GPT4 here now, it's gonna be easy. Take a look at their wp

[@Huntabyte]

If you know TypeScript you can become proficient in python within a few weeks (if that)!

[@Huntabyte]

Do you mean with Svelte? Or is sleve something else? You can build a python API with FastAPI and hit it from your SvelteKit app!

[@MCab]

What is that extension or option that shows you the typscript errors in line as you type?

[@Huntabyte]

ErrorLens

[@diptyprakashswain1121]

Hurray 🎉.

[@JorgeEscobarMX]

Wonderful, I need to remake my chatbot app with gpt3.5 immediately.

[@Huntabyte]

For sure, cost savings and performance improvements are huge!

[@JorgeEscobarMX]

@@Huntabyte yeah, I wonder if fine-tuned models are still a thing with gpt3.5? Seems like they are redundant in gpt3.5

[@martinrupertbulquerin228]

hey man, thank you for this video! do you know how we can extend the timeout issue when streaming? i guess vercel has a 15 seconds limit.

[@Kevinsmithns]

can you set it up to respond to voice commands. like, "hey chatty..." then it awakens (like alexa) and we can ask a question like finding directions to the closet gas station and then it will pull up your maps and take you there? or to ask any question you want and it searches the internet for it? id like to make an app out of it also can you make a video showing how to use the script for newbees?

[@Huntabyte]

Possibly so! It would definitely require a bit of work, but using some sort of transcription software that takes your voice message, converts it to text, and sends it off would be cool!

[@Kevinsmithns]

@@Huntabyte a real Iron man like ai that we can speak to and it replies with a voice we choose too

[@Huntabyte]

@@Kevinsmithns I'm just waiting for AI chefs to start popping up.

[@riddhimanpaul5697]

I am stuggling to understand the things you are doing in this video and understand it is mostly of my lack of knowledge. What languages and things should I study to be able to comprehend what you are doing and also add on to it?

[@Huntabyte]

TypeScript / NodeJS mostly

[@saru1635]

Is it possible to make the chatbot access the internet in order to modify its answers? for example inserting a webchatgpt extension but into the code to do it automatically when someone is using the website you built?

[@yoli6373]

Is there anyway to let this chatbot interacts with predefined functions to have a textual prompted interactions? Thanks!

[@maskman4821]

I have a tutorial request, can you do a i18n tutorial using hooks, and the selected language is saved in cookie or somewhere server side so that when page gets refreshed the selected language persisted, I currently use sveltekit-i18n package it works but when page refreshed it rollbacks to default language which is not a good user experience 😅😔🤔

[@Huntabyte]

This is on my list of videos to make! Thanks for the suggestion!

[@JOHNSMITH-ve3rq]

Wow dude I almost didn’t click because only 800 views but this is lit!!

[@Huntabyte]

Thanks for giving it a chance 😁. I posted it at a weird time so it took a bit of time for the views to trickle in.

[@skeptiklive]

This is an awesome tutorial, thank you!!

[@Huntabyte]

You're welcome!

[@syedmuhammadshoaib3664]

​@Huntabyte Sir, please tell me if I can display the values of a graph in React Apex Chart using the ChatGPT API, so that when a user hovers over the graph, they can see the statistics of the user's page in the graph. Currently I am displaying values from server api?

[@edanisko]

Nailed it!!

[@MrJoeMontano]

Is there an .APK file that IU can download the app onto my phone?

[@maskman4821]

There a a variety of online services that wrap your web app into Android and Apple apps

[@asatorftw]

This is super useful. My question though is that this seems like a great usecase reactive programming with rxjs . Instead of the sse library use an observable to retrieve the stream. Additionally we could keep the user from spamming messages with debounceTime() etc. Any specific reasons other than preference?

[@Huntabyte]

Svelte is reactive and you could add a debounce setup if you wanted, just tried to keep the video as brief as possible!

[@bhriscannan2080]

Any ideas why the "Best_of" parameter DOES NOT work?!?

[@Jjjabes]

If you are having to keep pretty much the whole chat in each request, by the end of the conversation aren't you going to be charged a large number of tokens? as I presume each request is billed per input tokens and output tokens.. or have i got that wrong?

[@Huntabyte]

Well I believe the maximum tokens you can send per request is 4096 (might be 4000), if you exceed that, OpenAI rejects your request. That's why I setup the tokenizer to check to make sure we're under that 4000 limit. What I would do is start removing the oldest messages each time I was over 4000 until I wasn't. But yes you are correct. Cost optimization is definitely something you should experiment with and determining the least # of tokens to send for the best response :)

[@Jjjabes]

​@@Huntabyte thanks for your response... it's mainly the cost that I think might become a problem.. It's priced 10x cheaper than GPT3, however if you've reached the 4k tokens per request, then it is costing almost 1 cent per message in the conversation from that point onwards. Fine if you've only got one user having one long conversation a day with your chat, but I imagine the costs will mount quite quickly otherwise.

[@Huntabyte]

@@Jjjabes Then you could knock it down to whatever you're comfortable with!

[@adamspice9076]

Great video thanks

[@Huntabyte]

You’re welcome!

[@matthew_brown]

Awesome!!

[@Huntabyte]

Thanks!

[@tomich20]

OPENAI Docs: "In general, gpt-3.5-turbo-0301 does not pay strong attention to the system message, and therefore important instructions are often better placed in a user message." May be we should send user messages in hidden instead of the system prompt?

[@Huntabyte]

I think for simple instructions like giving it an identity is okay, but if you’re doing context injection then you certainly would want to add that to the latest user message.

[@michaelkirby9021]

Is there a way to keep the line breaks that the api sends in the assistant chat box? I gave this a go today as my first Sevlte app. I had fun trying to dockerize it. The line breaks are the only thing I need to fix now. Awesome tutorial

[@Huntabyte]

You would need to parse the data from markdown -> HTML as it comes through, there a few libs that can handle this, look into the unified ecosystem.

[@phoneywheeze]

how much does the moderation call cost? storing user messages on the client may be harmful, the client could modify the previous in this setting to bypass the moderation call since it only checks the last added message

[@Huntabyte]

That’s why I mentioned that the user could do something like that; but the video would have been an hour to handle all of that.

[@nigelnyakudya2262]

Hell sir how are you. I was on the white list for your course, I some how missed the email notification. How can I get the discount for that course.

[@mandrasaptakmandal636]

Can you cover all the sveltkit directives like use:, animate:, transition:. and all the bind: usages. I found the documention is in a grey area on these. I found this use directive very helpful use:intersection.

[@Huntabyte]

Yes I possibly will in the near future!

[@mostafamadwar7330]

Bro this is astonishing. I wanted To ask whether this would be faster or smarter than the regular GPT and if so what are they use case scenarios

[@Huntabyte]

It’s faster, smarter, and cheaper. There’s 0 reason to use text-davinci-003 over this model.

[@stephenduff1917]

Sounds great but how would you integrate this with document import?

[@kevincaballas8432]

Great video! Made me want to use Svelte in my next project! A bit off-topic though: would you mind sharing your plugin list for VSC? I imagine that the auto-indentation and inline error messages could be very useful in my workflow. Thank you!

[@Shaparder]

Auto-indentation is Prettier (+eslint, it depends) and error messages is Error Lens !

[@Huntabyte]

Thanks @Shaparder! @Kevin, I have a video on my page (10X Developer Experience with SvelteKit in VSCode) which goes through some other tips to make life a bit better!

[@Huntabyte]

But I'm also working on a new website where I plan to have my whole setup.

[@snoweh1]

Is transfer learning available for GPT 3.5 turbo, or are we still tied to what it has already been trained on?

[@Huntabyte]

Unfortunately, fine-tuning isn't available with this model yet.

[@snoweh1]

@@Huntabyte I wonder if they'll release GPT 3 and maybe 3.5 turbo as open source when 4 comes out. Would be cool.

[@galacticHFY]

Can this actually be deployed onto the internet? And would you need to route the requests through your own server, or does Svelte do that for you?

[@Huntabyte]

It is deployed to the internet and requests are routed to the server at Vercel!

[@galacticHFY]

@@Huntabyte Thanks, this tutorial is very helpful

[@vortical911]

also you can deploy with "npm dev run -- --host" then open up port 5173 on your firewall and router, then you can access the webpage from anywhere with PublicIPAddress:5173 in browser

[@Huntabyte]

@@vortical911 use something like ngrok to make this a bit better!

[@prasathdevwiz]

Hi @Huntabyte, Thank you for the great video. Can you help me with one thing in deployment, how to build this project with a node adapter? and deploy it in an AWS instance.

[@Drunkenhead]

such a simple request :-D

[@anay4168]

When I tried to clone files from your repo it gives bunch of errors, can you please tell me how to run all files without error step by step?

[@l28094]

How do you set up the dev environment?

how can i upload it to firebase hosting?

[@dribbens91]

in that made GPT version, is it possible to copy and past more then 2k-3k characters? lets say i want it to summery for me 15 pages of long article...

[@Huntabyte]

This would require generating some embeddings and potentially making multiple requests. I actually haven't used it to summarize something that long before, but I'm sure if there's a will there's a way!

[@dribbens91]

@@Huntabyte thank you :) great video

[@Ryan-yj4sd]

How do I make code blocks formatted like they are in chat gpt? Like black boxes and readable like an IDE?

[@Huntabyte]

Use a markdown parser to parse the text as it comes in!

[@NederHopBeatz]

I suppose you're not into answering questions related to this because that would be a dayjob, but I've implemented your code in my own project and it stops streaming a quarter of the way through the response, works fine locally. Any ideas?

[@Huntabyte]

I try to answer as many as possible with the time I have, especially those that give enough detail to help. It seems like your issue may be a network issue due to it cutting off part-way. Once it's deployed it has an extra trip to make that it doesn't when running locally. Check the 'Network' tab of your browser dev tools to see if anything weird is going on.

[@reed3249]

i have a question, i tried cloning your repository and then installing sveltekit inside the main folder but it gave me a bunch of errors to missing modules. what is the proper way to get it up and running without issues. i am learning git and svelte but this caught me by surprise.

[@Huntabyte]

You should just be able to clone the repo and run npm install or pnpm install, followed by npm run dev or pnpm run dev.

[@reed3249]

i got these errors: Module '"$env/static/private"' has no exported member 'OPENAI_KEY'. Cannot find module 'openai' or its corresponding type declarations. Cannot find module '@sveltejs/adapter-vercel' or its corresponding type declarations.

[@ChrisOzar]

I tried downloading python and opening in terminal but I can figure it out. Can I pay someone to just get the the place that I can atleast get pythons properly launch’s of my mac? 🙏

[@justinoneill2837]

what a freakin BOSS !

[@jazzminlee8428]

can i integrate this app into a website?

[@Huntabyte]

You sure can!

[@CraigBramscher]

Very cool, I deployed the finish code with a few changes to vercel. Amazing really. For some reason the text for the messages to send is white, so I can not tell where I am typing. I will endeavor to find that, but new to svelte.. any pointers? THanks for this great tutorial.

[@Huntabyte]

Hmm, not sure why that is! Possibly if you’re in light mode in the browser!

[@CraigBramscher]

@@Huntabyte i just changed the app.css and all good thanks!

[@Huntabyte]

@@CraigBramscher Awesome to hear!

[@latlov]

How to implement a chatGPT chabot that can answer questions based on a MySQL database?

[@Huntabyte]

You would need to generate embeddings for that data. I've done something similar with Postgres and the pgVector extension.

[@theshy6717]

I really love the font you're using, can I have the name of it?

[@Huntabyte]

Cascadia Code!

[@panzorax.]

i have a question how can i use in terminal like web application chat

[@Huntabyte]

You would issue API calls from the terminal using something like CURL or another HTTP terminal client.

[@panzorax.]

@@Huntabyte yeah it's like this i mean i saw revChatGPT like this library from python but it didn't work

[@panzorax.]

if you know like this can you make a video?

[@michael818]

Is it possible to maintain a persistent conversation with the api without prepending the entire conversation history to the prompt?

[@Huntabyte]

No, it's a REST / Stateless API

[@hicoop]

Why would you only set one api to the edge and not the whole project?

[@Huntabyte]

In case you have other endpoints that wouldn’t work or be ideal on the edge! For the code I have here you can totally deploy the whole project like that - just figured I’d show the per route capability too!

[@hicoop]

@@Huntabyte that makes sense. In my experience i have avoided edge because of cold start times with tools like prisma

[@plaginnn3886]

why is the bot running slower today? taking too long to process requests

[@Huntabyte]

Not sure, maybe an influx of traffic?

[@plaginnn3886]

@@Huntabyte It may have started to run slower after release GPT-4

[@nicksrub]

@huntabyte if you pass the ENTIRE conversation back every time, wouldn't that be a problem as conversation grows longer?

[@Huntabyte]

I cover this situation it in the video

[@SebKrogh]

is it possible to integrate this with a persona/app in teams? I want a virtual it supporter within teams

[@Huntabyte]

You sure could. You could use PowerAutomate to hit that endpoint the same way the form does.

[@maskman4821]

of course you can, I have already integrated this chatbot into my app 🤗😘🤩😍🤓

[@mateomayor1944]

Great Video. Thank you for sharing this valuable content. Is it possible for me to train the bot with the specific information I provided to him?

[@dareljohnson5770]

Love it!

[@danielrasmussen4862]

would this work even if the chat-gpt Engine is down?

[@Huntabyte]

ChatGPTs throttles don't impact it's API performance, however, if the entirety of OpenAI's infrastructure were to go down, then yes this would be impacted. However, it's hosted with Azure so the availablity is very high due to strict SLAs

[@andrewdaw6623]

How would you go about training this bot?

[@Huntabyte]

They don’t have fine tuning available for the ChatGPT model at this time. You can look at fine-tuning text-davinci-003 (covered in my previous video)

[@andrewdaw6623]

@@Huntabyte is it feasible to add embeddings in the backend if you wanted to give the bot a 'custom knowledge base'

[@jazzminlee8428]

for which device is this app?

[@Huntabyte]

It's a webapp so it could be accessed from any device with a browser!

[@trinhthang8673]

is this work well in case we have multiple users? could you release Python version? thanks for your video

[@Huntabyte]

It will certainly work if you have multiple users!

[@trinhthang8673]

@@Huntabyte I wonder that my response could be use for next user after me as he's prompt? This happended with gpt 3 and I had to create an array for each user

[@kusiled8084]

Your videos is good 👍 hello from 🇺🇦

[@Huntabyte]

Thank you! Hello to you as well!

[@DAMfoxygrampa]

The captions at 0:05 say Chad GPT and I think that's more scary than anything else being talked about

[@VaibhavShewale]

but but this api was available from long now, why everyone saying that it is been available now? and different models charge different money!

[@Huntabyte]

The ChatGPT API was just released last week! There has been ‘unofficial’ ones but this is the first official!

[@mohanedbro9217]

Can I make chatbot like this and add it to my website?

[@Huntabyte]

Yes you can!

[@kurabika2497]

Hello nice contents! I was thinking if you could integrate chatgpt with google translate so it can write in any language or translate perfectly 🥰

[@Huntabyte]

Anything is possible!

[@Hope79-h5f]

UR AWSOME BRO

[@Huntabyte]

Thanks, so are you!

[@lisacherry8176]

Please try to make the videos simple if possible so a layman can understand and build cool stuff like you are, everything is going over my head in this video, thanks.

[@JOHNSMITH-ve3rq]

Bro can you actually host this?? It would be cheaper than gpt plus.

[@Huntabyte]

There are open source GPT-like models that you could host but this specific API is owned by OpenAI. They do mention something about dedicated hosting (think AWS bare metal) but I haven’t looked into it much!

[@Huntabyte]

Just realized what you meant by this! Yes I host my own for that specific purpose 😂 personal ChatGPT that isn’t slow and I only pay for what I use 🔥

[@greendsnow]

Vercel Edge functions are too expensive for such wait times.

[@gyoofyloowkin]

imagine if i did this to make a chatbot completely just for the most useless thing, and that is rejecting every request for information.

[@Huntabyte]

You could do that if you want 😂

[@Ryan-yj4sd]

thanks! feedback: you are going too fast!

[@Huntabyte]

Thanks for the feedback, Ryan! I did notice after rewatching that it is pretty quick, mostly because I cut a lot of breaths and downtime out so I'm not wasting your time, but I may have went a bit overboard in this one. I will try to slow down a bit in future videos!

[@Ryan-yj4sd]

@@Huntabyte yeah my brain cannot keep up, I need to keep pausing and going backward. Thanks!

[@saurabhshelar3401]

Slow down the playback speed. He covered a lot in single video.

[@Patrick-qk4ss]

Hi, very interested in your AI chatbot. Would you able to help to build a complete chatbot for our website. We are an online test preparation platform. We provide practice for school students to prepare their important public exams

[@derekalex4506]

You speak fast

[@_nightowl263]

Too expensive

[@Eugene_earendel.]

You lost me at the beginning of the coding

[@Huntabyte]

Sorry, my videos are tailored towards an intermediate webdev audience. I do have a lot of beginner friendly SvelteKit videos on my channel though if you’re interested in learning!

[@moistweener]

This is sick! I'm currently teaching myself React thru a basic chat app tutorial (node.js, davinci-003). II want to take the chat UX/UI + gpt-3.5-turbo into that app.....do you have recommendations? Bc this is in a different language Svelte + TypeScript, right

[@Huntabyte]

I'm using NodeJS (as TypeScript) for the server stuff! The same logic could be applied to an express server, or if you're using NextJS. The beauty of Svelte/SvelteKit is that it can easily be translated to other languages because it's mostly HTML & Javascript/NodeJS.

[@maskman4821]

Go with Sveltekit, it is simply better, it is the best DX friendly meta-framework 😌

[@finderstore-wj7qv]

Eu gostaria de conversar em particular com você, me passe seu telegram