DEV Community

Cover image for Build a Text Summarization App in React with ChatGPT

Build a Text Summarization App in React with ChatGPT

Femi Akinyemi on February 06, 2023

Introduction In today's digital age, the abundance of information can be overwhelming. With the constant stream of news, research papers...
Collapse
 
kakauandme profile image
Kirill Kliavin

Good work. You are exposing your API key in JS, tho. Meaning anyone can abuse it and your billing will go through the roof. FYI

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

What is the best way to handle the API key on the front end? @kakauandme

Collapse
 
pengeszikra profile image
Peter Vivo

If you use Nextjs instead of react and store your key in .env file ( gitignored ), and chatGPT api call maded on server side. pages/api/chatGPT.ts then your key will safe.

Thread Thread
 
femi_akinyemi profile image
Femi Akinyemi

Yes! This works for Nextjs. But How do you handle it in React ? @pengeszikra

Thread Thread
 
pengeszikra profile image
Peter Vivo

You can either ask for a key as user input or use .env in React. When using .env, anyone who downloads your repository can fill in the environment values. However, front-end solutions are never secure as the key can be seen when monitoring the API request.

Thread Thread
 
femi_akinyemi profile image
Femi Akinyemi

thanks @pengeszikra env file was created and that was where the key was stored

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
femi_akinyemi profile image
Femi Akinyemi

Thank you for finding this Article helpful @abhaysinghr1 . I appreciate it. OpenAI is awesome. Please give it a try

Collapse
 
nayanika12 profile image
Nayanika-12

Once I entered the text to be summarised, and clicked on the summarise button its just loading for a long time and summarised text is being shown. What do I do?

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

did you use your API KEY ?

Collapse
 
nayanika12 profile image
Nayanika-12 • Edited

Yes I did. Is it okay?
Image description

Thread Thread
 
femi_akinyemi profile image
Femi Akinyemi

can you reach out to me via akinfemi46@gmail.com so we can look at it together and see what you're not doing right

Thread Thread
 
nayanika12 profile image
Nayanika-12 • Edited

yes yes sure. Thank u so much. Mailed u!

Thread Thread
 
nayanika12 profile image
Nayanika-12

Thank u so much Femi, its working now.

Thread Thread
 
hady68 profile image
Hardikk Kamboj

what was the issue? I am facing something similar

Thread Thread
 
femi_akinyemi profile image
Femi Akinyemi

Did you check the console to see the error you're getting? Also, check your API Usage to be sure you have not exceeded your normal Quotal @hady68

Thread Thread
 
hady68 profile image
Hardikk Kamboj

Hey yes, that was the case, figured it out and built some fun projects following this during my internship!

Thread Thread
 
femi_akinyemi profile image
Femi Akinyemi

Interesting! Glad it helped

Collapse
 
chrisgreening profile image
Chris Greening

Wow, fantastic article Femi!

Loving how detailed this tutorial is - ChatGPT is really exciting and I love seeing what everyone's building with it :~) I've only used the ChatGPT interface on OpenAI but I'd love to mess around with the API next time I'm building a side project to incorporate it into my own apps. Thank you for the tutorial!

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

Glad you found the article Interesting and well detailed😊. Yeah! ChatGPT is really exciting😀 Go ahead and build with the Api✌🏽@chrisgreening

Collapse
 
kawacarp307 profile image
John Doe

this is gold! Thanks for sharing. 😊

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

Thanks for finding it helpful. @kawazackie307

Collapse
 
divyanshukatiyar profile image
Divyanshu Katiyar

A really nice tutorial, could really use this step by step to enhance my learning :)

Collapse
 
femi_akinyemi profile image
Femi Akinyemi

Definitely👌 @divyanshukatiyar