Build a Keyword Extractor: React + OpenAI API + Chakra UI

Build and deploy a keyword extractor powered by OpenAI, using React, Vite and Chakra UI.
Hostinger:
hostinger.com/traversy
Use the code TRAVERSY for 10% off!
Github Repo:
github.com/bradtraversy/ai-ke...
Blog Post:
www.traversymedia.com/blog/ai...
My Web Development Courses:
www.traversymedia.com
Timestamps:
0:00 - Intro
1:58 - Hostinger Sponsor
3:13 - Vite & React Setup
4:30 - File Clean Up
7:00 - Chakra UI Setup
8:58 - Base Styles
10:58 - Header & Footer Components
15:42 - TextInput Component
21:46 - Start Extract Keywords Function
22:58 - Create API Key & Environment Variables
26:36 - Global State
27:56 - Completions API Request
36:50 - Modal Component & Spinner
43:54 - Project Deployment

[@TraversyMedia]

Many of you know that I like to build from scratch. If you don't want to build the entire project, we start the completions API stuff at 23:00.

[@guledomer]

Wonderful course again thanks. Hope one day you get around to elm-lang your view along with your experience in js would be amazing

[@hasnainyaqoob4451]

You are doing a great job, and i really love your work and the way you explain in the video. My request to you is to please 🙏 make tutorial series on CHATBOT DEVELOPMENT WITH OPENAI WITH REACT. I did really appreciate if you could please do this. Thank you so much..

[@universecode1101]

Years go by but it’s always nice to see a new Brad video come out. Your thumbnails are so clear. Thanks for sharing 😊

[@TraversyMedia]

Many of you know that I like to do everything from scratch, so if you don't want to do the whole project and you just want to know about the completions API from OpenAI, go to around 23:00

[@Ravishar-maa]

me : back to the point i was on my career about UX UI designer and developer and you told me about java script websites that will gives free courses but can you teach me the JavaScript in a very creatively and easy to understand and implements ? ChatGPT : As an AI language model, I can provide you with information and resources about JavaScript, but I cannot personally teach you how to code. However, there are plenty of resources available online that can teach you JavaScript in a creative and easy-to-understand way. One such resource is Codecademy. They offer interactive coding lessons on JavaScript and other programming languages. The lessons are designed to be engaging and easy to follow, with hands-on exercises that allow you to practice what you've learned. Another great resource is W3Schools, which offers tutorials and examples on a wide range of web development topics, including JavaScript. In addition, there are many KZbin channels and blogs that offer free tutorials on JavaScript. Some popular options include *Traversy Media* , FreeCodeCamp, and The Net Ninja. Remember that learning to code takes time and practice, so it's important to be patient and persistent. Start with the basics and work your way up, and don't be afraid to make mistakes - that's all part of the learning process! Good luck on your journey to becoming a UX/UI designer and developer. me : who is *Traversy Media?* ChatGPT : Traversy Media is a KZbin channel and website that offers free tutorials and courses on web development, programming, and technology in general. It is run by Brad Traversy, a web developer and online instructor who has been creating educational content for over a decade. Traversy Media's tutorials cover a range of topics, including HTML, CSS, JavaScript, React, Node.js, and more. The channel has a large following and is highly regarded in the web development community for its quality content and clear, easy-to-follow instruction.

[@GilAguilar]

Yay can’t wait to build this. Thanks Brad, going to pick up some of your courses on your new site you built ☕️❤️

[@charbelboughazale3994]

BRAD I JUST WANTED TO SAY THAT I AM ONE OF YOUR BIGGEST FANS. You helped me a lot, your courses let me to get hired in my dream job.🔥🔥🔥🔥

[@TraversyMedia]

Thanks so much 😊 Stuff like that really helps me keep pushing and keep doing this.

[@philippec4448]

Awesome video Brad, like always ! But OMG this is sooo powerful ! While watching your video I was imagining all kind of apps I could build with that API. We truly have opened a new chapter in the dev history with this AI thing.

[@jagadeeshkj594]

This is really cool, TM. Glad you're back with a project on openai APIs.

[@msajjadali]

Brad, let me say that you are a great inspiration and role model for all of us. Keep shining! May God protect you and your family from all evils!

[@AvinashVagh]

Hey Brad! Thanks, This was simple & upto the point & how to use open-ai API. Really appreciate it.

[@allanfernz9356]

Haven't even watched it yet but thank you Brad, I owe a great deal of gratitude to you for where I am in my developer journey

[@abenjamin13]

Very much appreciate this Brad, thank you. I’ve been using the WP AI plugin and writing ✍️ my prompts. Been meaning to build a js app thank you 🙏

[@stevenfullman5646]

Brad, you’re a great tutor. Thanks man

[@joshthomas7190]

Another great video Brad, thanks!

[@rickythegermanshepherd5438]

Awesome video Brad. Love it

[@doug774]

Wow this is cool, thanks Brad

[@martin42382]

This is awesome 👌! Thank ya!

[@teknolovedigital]

You r Back mr Traversy

[@sonamohialdin3376]

Awesome tutorial thank you

[@timw3447]

Love your stuff! If you use the gpt-3.5-turbo API you can do the same thing with 1/10th the cost. The API call is a little bit different, but functionally the same (and maybe arguably better). If anyone is out there penny pinching, ask chatGPT how to set up the API to use gpt-3.5-turbo (you might have to copy paste the documentation to get an accurate response)

[@vlad_pantyukhin]

Hi, Brad! Thanks for your hard work! What theme do you use in VS Code?) Have a nice day

[@rapid1010]

You're legend mate. Keep on coding.

[@jackweaver5840]

How do you get to that level by developing anything from scratch with any language and framework like you do in the videos ?

[@NeverCodeAlone]

Very nice...thx a lot for this software entertainment.

[@yodkwtf]

Hey Brad, what's the vscode theme?

[@hamzaeshoul]

Sensational !

[@zeekdesigns7519]

instead of showing as string i wanted to display the data in a table.. i'm not very good with react i tried to work it out but coudn't. can anyone pls explain me how i can do that?

[@abeprangishvili]

you are legend.

[@kamikozzz]

Thanks for the tutor! Really helpful

[@AbdoulahAlEzzo]

Thanks for the tutorial, but I don't know why I am getting an error says: "you must provide a model parameter". I checked the body and it does contain the model: "text-davinci-003" param!

[@AbdoulahAlEzzo]

This is the payload of the request from the network tab: { "model": "text-davinci-003", "prompt": "Extract keywords from this text. Make the first letter of each work uppercase and seperate with commas ...mytext....", "temprature": 0.5, "max_tokens": 60, "fequency_penalty": 0.8 }

[@TraversyMedia]

@@AbdoulahAlEzzo That's strange. Can you email me your github repo? I'm curious. [e-mail]

[@amirtech8648]

Chakra UI is very good, trust me

[@charlesloehle7998]

For anybody using the newer API, change in the extractKeywords function: body: JSON.stringify({ messages: [ { role: 'user', content: 'Extract keywords from this text. Make the first letter of each word uppercase and separate with commas ' + text, }, ], model: 'gpt-3.5-turbo' }),

[@shriyaraju6996]

Greetings, this is helpful, but I seem to be getting a 429 error though i did not post many requests and tried with another key generated with another mail. Still the same error. If you know any fixes could you help please?

[@shabazahmad8267]

@@shriyaraju6996 did u get the solution?

[@aryanverma7816]

I am a complete beginner.. can anyone tell me how to get the setup he has in my vs code.. what all exact things do i have to install

[@vikasrajput2253]

Any mern project is upcoming if yes what is it?

[@HelioSalesJr]

Probably doing something stupid but I can't get out of this error: "SyntaxError: Unexpected end of JSON input at extractKeywords"

[@andrewgrablewski5151]

Me too!

[@HelioSalesJr]

@@andrewgrablewski5151 now I’m having either 429 or some message saying that there’s something wrong with the key :(

[@shayanghoree2490]

so make sure ur key has the following name VITE_OPENAI_API_KEY without the VITE keyword it won't accept the variable in the App.jsx file

[@marksponge9073]

@@HelioSalesJr Hi, found out I made a typo with the Api key. Think 429 error is cause you ran out of free requests. Good luck!

[@shriyaraju6996]

@@HelioSalesJr I’m having 429 error as well, found any fixes?

[@betafilip1110]

🤓He's back!

[@alessioburgio124]

STUCK AT "SyntaxError: Unexpected end of JSON input at extractKeywords"

[@user-mg3xw5sr8k]

Hi Brad, I am not able to purchase your courses as i do not have a credit card. Is there any way i can pay through GooglePay or Paytm ?

[@tanmaypanadi1414]

Paytm and Google pay are just digital wallets. UPI is not supported mode of payment by a lot of sites. Ask someone you know who has a credit card to make the payment on your behalf and send them the money that's the only way.

[@suhaskj8111]

does any know which theme he's using in vs code?

[@jarycruz]

Github Theme

[@Me-mv9bz]

Inmotion hosting sucks an egg! anymore brilliant recomendations?

[@rezaulmasum205]

How much is the costing for such api call Brad?

[@TraversyMedia]

Go to around 23:00 and I explain how it works

[@rezaulmasum205]

@@TraversyMedia appreciated. Of Course I will see

[@StefanRows]

Whoop Whoop!

[@lehuynh7637]

Keyword Extractor good for SEO?

[@TraversyMedia]

Yes, finding the right keywords has always been tough for me. But more important than building this one project is the power of this API. You can build anything with it

[@mohammadabdelrahman786]

I'm not sure why, but I keep getting error 401 for every fetch request : / God I hate fetching

[@Brennnann13NY]

same did you ever find a fix to this?

[@rishabhbhargava3852]

when I put the text in the box then after hitting extract keywords the keywords prompt loop goes o and on and never gives the keywords. Please suggest what to do.

[@rishabhsaklani880]

Even I'm getting the same issue.

[@rishabhsaklani880]

Have you resolved it?

[@rishabhbhargava3852]

@@rishabhsaklani880 No bro

[@sumitkumarjha6984]

using Vite app api key in env or react app api key?

[@shriyaraju6996]

Is it resolved? same issue :(

[@nyankanakitty]

I am confused what exactly is the purpose of building a separate keyword extractor with openai api when a prompt into chatgpt does exactly the same thing?

[@shrutisaxena2111]

I am getting 429 even though my usage isnt expired. Can someone help?

[@shriyaraju6996]

same!

[@forzastrikerz]

im getting 429 error after applying my api key

[@phillbloom6707]

me too

[@forzastrikerz]

@@phillbloom6707 ignore it move on next videos.

[@shriyaraju6996]

Hey by any chance you found a solution to this?

[@ojasvisingh786]

🎉🎉❤

[@bendevweb89]

Great project 🎉, a pity that you have to subscribe to the paid plan of the openAI API to be able to enjoy the project to the fullest

[@jeanssmith5864]

BardGPT

[@cyphermediaschool]

create a nextjs 13

[@martinmengh]

modern dev has devolve to this? hideous on multiple levels ... sigh ..

[@owaisqasim5054]

Hi Brad! I began learning web development five months ago, and I'm starting to get the hang of it now. However, with the emergence of new AI tools, I've noticed many KZbinrs creating videos that suggest there won't be any jobs for developers in the future. Could you make a video addressing this topic? I'm genuinely concerned that I might be wasting my time learning to code if all the coding will eventually be done by autopilot.

[@evileyes9317]

That's not true, at least for the next five years we won't be replaced by AI, and it's not scary as you might think if you understand the tech behind the AI's mind. But the impact might strike on fresher or junior dev type with less experience because, although AI cannot replace developer now for sure but their intellect is equal a junior dev now. Also senior dev don't know how to use AI will be replaced by senior dev with AI on their mind.