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

  • @TraversyMedia
    @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

    @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

    @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
    @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
    @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

    @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.

  • @GilAguilar
    @GilAguilar Жыл бұрын

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

  • @jagadeeshkj594
    @jagadeeshkj594 Жыл бұрын

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

  • @charbelboughazale3994
    @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

    @TraversyMedia

    Жыл бұрын

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

  • @msajjadali
    @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!

  • @philippec4448
    @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.

  • @allanfernz9356
    @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

  • @AvinashVagh
    @AvinashVagh Жыл бұрын

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

  • @abenjamin13
    @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
    @stevenfullman5646 Жыл бұрын

    Brad, you’re a great tutor. Thanks man

  • @joshthomas7190
    @joshthomas7190 Жыл бұрын

    Another great video Brad, thanks!

  • @rickythegermanshepherd5438
    @rickythegermanshepherd5438 Жыл бұрын

    Awesome video Brad. Love it

  • @doug774
    @doug774 Жыл бұрын

    Wow this is cool, thanks Brad

  • @teknolovedigital
    @teknolovedigital Жыл бұрын

    You r Back mr Traversy

  • @martin42382
    @martin42382 Жыл бұрын

    This is awesome 👌! Thank ya!

  • @vlad_pantyukhin
    @vlad_pantyukhin Жыл бұрын

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

  • @sonamohialdin3376
    @sonamohialdin3376 Жыл бұрын

    Awesome tutorial thank you

  • @NeverCodeAlone
    @NeverCodeAlone Жыл бұрын

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

  • @rapid1010
    @rapid1010 Жыл бұрын

    You're legend mate. Keep on coding.

  • @timw3447
    @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)

  • @hamzaeshoul
    @hamzaeshoul Жыл бұрын

    Sensational !

  • @abeprangishvili
    @abeprangishvili Жыл бұрын

    you are legend.

  • @jackweaver5840
    @jackweaver5840 Жыл бұрын

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

  • @amirtech8648
    @amirtech8648 Жыл бұрын

    Chakra UI is very good, trust me

  • @yodkwtf
    @yodkwtf Жыл бұрын

    Hey Brad, what's the vscode theme?

  • @StefanRows
    @StefanRows Жыл бұрын

    Whoop Whoop!

  • @betafilip1110
    @betafilip1110 Жыл бұрын

    🤓He's back!

  • @zeekdesigns7519
    @zeekdesigns751911 ай бұрын

    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?

  • @AbdoulahAlEzzo
    @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

    @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

    @TraversyMedia

    Жыл бұрын

    @@AbdoulahAlEzzo That's strange. Can you email me your github repo? I'm curious. support@traversymedia.com

  • @kamikozzz
    @kamikozzz Жыл бұрын

    Thanks for the tutor! Really helpful

  • @aryanverma7816
    @aryanverma781610 ай бұрын

    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

  • @user-mg3xw5sr8k
    @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

    @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.

  • @charlesloehle7998
    @charlesloehle79984 ай бұрын

    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

    @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

    @shabazahmad8267

    Ай бұрын

    @@shriyaraju6996 did u get the solution?

  • @jashanpreet.753

    @jashanpreet.753

    13 күн бұрын

    can you give me the working source code, some error is coming always idk why

  • @vikasrajput2253
    @vikasrajput2253 Жыл бұрын

    Any mern project is upcoming if yes what is it?

  • @suhaskj8111
    @suhaskj8111 Жыл бұрын

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

  • @jarycruz

    @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

    @andrewgrablewski5151

    Жыл бұрын

    Me too!

  • Жыл бұрын

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

  • @shayanghoree2490

    @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

    @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

    @shriyaraju6996

    3 ай бұрын

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

  • @rezaulmasum205
    @rezaulmasum205 Жыл бұрын

    How much is the costing for such api call Brad?

  • @TraversyMedia

    @TraversyMedia

    Жыл бұрын

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

  • @rezaulmasum205

    @rezaulmasum205

    Жыл бұрын

    @@TraversyMedia appreciated. Of Course I will see

  • @ojasvisingh786
    @ojasvisingh786 Жыл бұрын

    🎉🎉❤

  • @Me-mv9bz
    @Me-mv9bz Жыл бұрын

    Inmotion hosting sucks an egg! anymore brilliant recomendations?

  • @lehuynh7637
    @lehuynh7637 Жыл бұрын

    Keyword Extractor good for SEO?

  • @TraversyMedia

    @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

  • @rishabhbhargava3852
    @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

    @rishabhsaklani880

    Жыл бұрын

    Even I'm getting the same issue.

  • @rishabhsaklani880

    @rishabhsaklani880

    Жыл бұрын

    Have you resolved it?

  • @rishabhbhargava3852

    @rishabhbhargava3852

    Жыл бұрын

    @@rishabhsaklani880 No bro

  • @sumitkumarjha6984

    @sumitkumarjha6984

    Жыл бұрын

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

  • @shriyaraju6996

    @shriyaraju6996

    3 ай бұрын

    Is it resolved? same issue :(

  • @mohammadabdelrahman786
    @mohammadabdelrahman786 Жыл бұрын

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

  • @Brennnann13NY

    @Brennnann13NY

    4 ай бұрын

    same did you ever find a fix to this?

  • @aleb687
    @aleb68711 ай бұрын

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

  • @shrutisaxena2111
    @shrutisaxena211111 ай бұрын

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

  • @shriyaraju6996

    @shriyaraju6996

    3 ай бұрын

    same!

  • @nyankanakitty
    @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?

  • @forzastrikerz
    @forzastrikerz Жыл бұрын

    im getting 429 error after applying my api key

  • @phillbloom6707

    @phillbloom6707

    Жыл бұрын

    me too

  • @forzastrikerz

    @forzastrikerz

    Жыл бұрын

    @@phillbloom6707 ignore it move on next videos.

  • @shriyaraju6996

    @shriyaraju6996

    3 ай бұрын

    Hey by any chance you found a solution to this?

  • @bendevweb89
    @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
    @jeanssmith5864 Жыл бұрын

    BardGPT

  • @martinmengh
    @martinmengh Жыл бұрын

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

  • @owaisqasim5054
    @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 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

    @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.

Келесі