DEV Community

Cover image for Master Notifications With ChatGPT, React and NodeJS 🧨

Master Notifications With ChatGPT, React and NodeJS 🧨

Nevo David on December 26, 2022

TLDR; In this tutorial, you'll learn how to build a web application that allows you to send notifications generated by ChatGPT to your u...
Collapse
 
jeremydayslice profile image
Jeremy Zaborowski

I appreciate the blog post as an educational demo, but I'm not sure it's a good idea to build anything in production that relies on scraping a research preview that is likely to change and will certainly end up behind a paywall shortly. I imagine that when that happens, they will also be exposing the API for the same or lower cost anyway.

Also, when testing this out, I was not able to get a consistent response from ChatGPT. Often it would ignore the command to not include an intro, which I assume is an issue with its inherent goal of being conversational.

I also thought the temperature (creativity) of ChatGPT resulted in some undesired results. For example, when their subscription was running out, it basically just said "see ya", instead of encouraging the user to update their account.

Image description

With the GPT3 API though, I was able to get very consistent results, using a temperature of .35.

For anyone looking to implement this really helpful tutorial, but using GPT3, here is the prompt I used. Providing an example is a great way to ensure you get a consistent output, by the way.

Write the text for a user notification with the title, "Your subscription is ending in a week."
use a variable, {{user}} for the user's name.

Title: You have a new message
Notification: Hey, {{user}}, you just received a new message, check out your inbox to read it.

Title: "Your subscription is ending in a week"
Notification:
Enter fullscreen mode Exit fullscreen mode

By constructing your prompt in this way, it will finish your text by only adding the notification text, ensuring you never get any intro text like with ChatGPT.

Image description

Collapse
 
nevodavid profile image
Nevo David

Thank you for posting this!
I disagree with you about production use.
It can be used in production for background processing.
I am building now a notification directory that is mainly built in GPT3.
Do I need people to go around and validate stuff? sure!
It's still pretty crazy.

Collapse
 
jimmoo profile image
Jim Moore

I'd follow this tute if it were using SolidJS. React is the Windows of JS frameworks, imo

Collapse
 
codergamer profile image
Pankaj Yadav • Edited

Cool post title, but not so cool implementation.

Just wanted to update you on the latest information regarding ChatGPT's official API's. These API's allow you to send queries and receive results, and to get started, you'll receive $18 in credit.

It's important to note that ChatGPT operates on tokens, with a cost of $0.0200 per 1K tokens (for the Davinci model on which ChatGPT is based). You can use this information to calculate how many tokens you can get with your $18 credit.

For more information, be sure to visit the pricing page.

P.S: This comment is generated using chatGPT.

Collapse
 
nevodavid profile image
Nevo David

GPT3 exists for many years now.
But the ChatGPT model is not out yet.
I have tried to compare text-davinci-003 to chatgpt, but it's really on a different level.

Collapse
 
codergamer profile image
Pankaj Yadav • Edited

I have implemented chatGPT(i.e davinci) in my react-native app and it has been working well so far. However, I would appreciate if you could share any scenarios where you feel the performance of davinci is not up to the mark.

As far as I am aware, chatGPT uses the text-davinci-003 model. Please let me know if this is incorrect.

Thank you for your help!

Thread Thread
 
nevodavid profile image
Nevo David

I have actually tried to run both prompts for notifications in chatgpt and text-davinci-003, and got a lot better one for chatgpt.

It is more aware of the context.

Also chatgpt knows how to answer questions, text-davinci-003 and the rest of the models are more auto-completion models.

Collapse
 
jurugi profile image
Jurugi • Edited

This is pretty cool except showcases the archaic and backwards structure behind react language. The actual part what it's doing is understandable but 2/3 of this seems to be copying the terrible react format into the app. I guess with that language if you're not fixing some novice issue they got stuck on for a job, if you chose to use it for some reason, then we'll go back to the raw js days where we just store entire html strings into the .js files and so on. At least with raw javascript you'd be calling the real js function that runs directly ,(just refresh, see it work in real time at least, in the proper code format), not some weird wrapper that then compiles back to javascript first after that weird useless 'addeffect', 'usestate' nonsense, that is a wrapper for other things like session/localstorage. It also tells me how backwards it is that you can press like 'compile' on the react files and some unknown issue could appear, I really don't like touching that junk unless it's like in context someone needs changes or fixes and don't want to rewrite their problematic project so 'just leave the creature alone' sort of thing, even when it'd be beneficial to redo it all in a few days to a property structured language format like real typescript or raw javascript and take those crutches off it.

I would recommend we all start to realize react for what it is and swap to a structured and better toolset that's more complete, like angular, or even just use raw libs alongside with jquery (basically react, in a widely used, better form lol). This goes for monstrosities like Vue which is just react w less support; these types have more jobs, because novices are using it, then getting stuck on it. Lol. Like at least use angular and typescript then, use like a good scalable toolset that has all benefits and has proven itself, formatting where there you're using pure html and js with es6/typescript with a proper file structure, supported for everything, that backcompiles and minifies properly. And of course if you want to add js or anything, you just add it instantly. This tutorial only demonstrates again the hoops people jump thru to use the react JavaScript wrapper, and that 'prey it compiles in this alien format' mentality as any person just hope it will compile then display basic text the way you wanted; instead of view it like 'wow this helps and simplifies things a bit'. Rewritten formats (and tutorials) explaining 'usestate' are just proof that useless wrapper, essentially a reformatting shell like func2 calls func1 etc, should not have been ever made; it is handinhand with any one who wants to make their own programming language and then finds it was too stupid and lofty goal to try to undertake that.

Collapse
 
nevodavid profile image
Nevo David

Is this text generated with GPT?
I can't read it 😅

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

This is by far the most interesting chatGPT application I’ve come across.

Thanks for sharing this!

Collapse
 
nevodavid profile image
Nevo David

Thank you so much @sumitsaurabh927! How are you today?

Collapse
 
sumitsaurabh927 profile image
Sumit Saurabh

I’m doing good, thanks for asking!

How are you?

Thread Thread
 
j4acks0n profile image
j4acks0n

im good and you?

Collapse
 
j4acks0n profile image
j4acks0n

fine.you?

Collapse
 
monimartin22 profile image
Moni Martin

There is an extension that can assist you in displaying ChatGPT responses alongside the search results from Google, Bing, and DuckDuckGo. Maybe you should try it: https://chrome.google.com/webstore/detail/chatgpt-for-search-engine/feeonheemodpkdckaljcjogdncpiiban/related?hl=en-GB&authuser=0

Collapse
 
nevodavid profile image
Nevo David

Thank you Moni!

Collapse
 
hiumesh profile image
Umesh Chandra Dani

Heading

Collapse
 
h3xn30n profile image
NE0386

Nice

Collapse
 
nevodavid profile image
Nevo David

Thank you!
Are you going to use ChatGPT?

Collapse
 
h3xn30n profile image
NE0386

Yeah

Collapse
 
hiumesh profile image
Umesh Chandra Dani

Heading

Heading

Heading

Heading

Heading

Collapse
 
nevodavid profile image
Nevo David

Heading!

Collapse
 
aubthread profile image
Aubrey 🤔

Thank you for the wonderful tutorial. Excited to try this out and learn more about Novu.

Collapse
 
nevodavid profile image
Nevo David

Thank you Aubrey 🤩

Collapse
 
jeremydayslice profile image
Jeremy Zaborowski

When you updated your /notify endpoint to pass the variables into another method, you trimmed your fullMessage variable, losing a key piece of the prompt.

I have a notification system and I want to send the user a notification about

Collapse
 
nevodavid profile image
Nevo David

Fixed! Sorry for that!

Collapse
 
tr11 profile image
Tiago Rangel • Edited

Awesome post! Very interesting and a creative idea.

I noticed a problem here:

Now let's setup your account and send your first notification
❓ What is your application name? ***Devto Clone**
❓ Now lets setup your environment. How would you like to proceed?
   > Create a free cloud account (Recommended)

Enter fullscreen mode Exit fullscreen mode

The title's wrong!

Collapse
 
magicwalter15 profile image
magicwalter15

Here is what ChatGPT thinks about it:
Combining ChatGPT, React, and Node.js to implement notifications in an application can be a powerful and effective solution.

React is a popular JavaScript library for building user interfaces, and Node.js is a runtime environment for executing JavaScript on the server-side. Together, these technologies can be used to build a wide range of applications, including those that require real-time notifications.

Using ChatGPT, which is a large language model trained by OpenAI, in conjunction with React and Node.js could potentially allow you to build sophisticated and interactive notification features into your application. However, it is important to carefully consider the requirements of your project and choose the tools and technologies that are most appropriate for your needs.

Collapse
 
pitterpacker profile image
Pitter Packer

I just found out about GPT and it's been helping me a lot in my work and learning. I also just discovered an extension for search engines. It's very convenient, everyone should try installing it and see how it goes. You need to log in to the main OpenAI page and use it on search engines.

Image description
https://chrome.google.com/webstore/detail/chatgpt-for-search-engine/feeonheemodpkdckaljcjogdncpiiban/related?hl=en-GB&authuser=0

Collapse
 
delyciousf profile image
Mr. Know it All
Collapse
 
windyaaa profile image
Windya Madhushani

Nice article.

Collapse
 
alessioferrine profile image
alessioferrine

Very interesting tool, take note to try it in my projects

Collapse
 
hawk profile image
Debashish D. Dev

Really Amazing! I have learned a lot.

Collapse
 
clubsqm profile image
sqm club

thank you so much ... really a amazing blog ... sqm club

Collapse
 
javaniecampbell profile image
Javanie Campbell

I would like to see how you go about your background processing, always interested in seeing queues being used in a scraping context or practical sense ... So go for it

Collapse
 
arthur482027721 profile image
Arthur

You may enhance the efficacy and efficiency of your online searches by combining ChatGPT with search engines like Google, Bing, and DuckDuckGo.
Click this link to know more:

Collapse
 
devpaul3000 profile image
Dev Paul

Wonderful