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
Пікірлер: 83
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..
Years go by but it’s always nice to see a new Brad video come out. Your thumbnails are so clear. Thanks for sharing 😊
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 KZread 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 KZread 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.
Yay can’t wait to build this. Thanks Brad, going to pick up some of your courses on your new site you built ☕️❤️
This is really cool, TM. Glad you're back with a project on openai APIs.
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.
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!
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.
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
Hey Brad! Thanks, This was simple & upto the point & how to use open-ai API. Really appreciate it.
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 🙏
Brad, you’re a great tutor. Thanks man
Another great video Brad, thanks!
Awesome video Brad. Love it
Wow this is cool, thanks Brad
You r Back mr Traversy
This is awesome 👌! Thank ya!
Hi, Brad! Thanks for your hard work! What theme do you use in VS Code?) Have a nice day
Awesome tutorial thank you
Very nice...thx a lot for this software entertainment.
You're legend mate. Keep on coding.
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)
Sensational !
you are legend.
How do you get to that level by developing anything from scratch with any language and framework like you do in the videos ?
Chakra UI is very good, trust me
Hey Brad, what's the vscode theme?
Whoop Whoop!
🤓He's back!
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?
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. support@traversymedia.com
Thanks for the tutor! Really helpful
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
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.
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
3 ай бұрын
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?
@jashanpreet.753
13 күн бұрын
can you give me the working source code, some error is coming always idk why
Any mern project is upcoming if yes what is it?
does any know which theme he's using in vs code?
@jarycruz
Жыл бұрын
Github Theme
Probably doing something stupid but I can't get out of this error: "SyntaxError: Unexpected end of JSON input at extractKeywords"
@andrewgrablewski5151
Жыл бұрын
Me too!
Жыл бұрын
@@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
Жыл бұрын
@ 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
3 ай бұрын
@ I’m having 429 error as well, found any fixes?
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
🎉🎉❤
Inmotion hosting sucks an egg! anymore brilliant recomendations?
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
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
3 ай бұрын
Is it resolved? same issue :(
I'm not sure why, but I keep getting error 401 for every fetch request : / God I hate fetching
@Brennnann13NY
4 ай бұрын
same did you ever find a fix to this?
STUCK AT "SyntaxError: Unexpected end of JSON input at extractKeywords"
I am getting 429 even though my usage isnt expired. Can someone help?
@shriyaraju6996
3 ай бұрын
same!
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?
im getting 429 error after applying my api key
@phillbloom6707
Жыл бұрын
me too
@forzastrikerz
Жыл бұрын
@@phillbloom6707 ignore it move on next videos.
@shriyaraju6996
3 ай бұрын
Hey by any chance you found a solution to this?
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
BardGPT
modern dev has devolve to this? hideous on multiple levels ... sigh ..
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 KZreadrs 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
5 ай бұрын
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.