Forem: Abraham E. Tavarez

How to Build a Chatbot with Next.js, TailwindCSS, and OpenAI Chat Completion API - Full Tutorial

Abraham E. Tavarez — Mon, 22 Jul 2024 20:35:42 +0000

Introduction

Are you interested in creating a dynamic and responsive chatbot? In our latest YouTube tutorial, we walk you through building a chatbot using Next.js, TailwindCSS, and the OpenAI Chat Completion API. This step-by-step guide is perfect for developers of all levels looking to enhance their web development skills and create engaging user experiences.

Technologies Used

Next.js: A powerful React framework that enables server-side rendering, static site generation, and easy API integration. Next.js is known for its performance and scalability, making it an excellent choice for modern web applications.
TailwindCSS: A utility-first CSS framework that allows for rapid styling and customization. TailwindCSS provides a responsive and cohesive design system without writing traditional CSS, streamlining the development process.
OpenAI Chat Completion API: This API leverages OpenAI's advanced language models to generate human-like responses, enabling the creation of intelligent and interactive chatbots. Integrating this API enhances the conversational capabilities of your chatbot.

Getting Started

To give you a taste of what you'll learn in the tutorial, here’s a snippet of the code we’ll be working on:

export async function chatCompletion(chatMessages: Message[]) {
// Create chat with system prompt
  const chat = [
    { role: "system", content: "You're a helpful assistance" },
    ...chatMessages,
  ];

  // API Request
  const completion = await openAI.chat.completions.create({
    messages: chat,
    model: "gpt-4o-mini",
  });

  // Completion result (new message)
  console.log(completion.choices[0]);
  return completion;
}

Explanation:

Function Definition and Parameter:

The function chatCompletion is an asynchronous function that takes an array of Message objects as its parameter. Each Message represents a chat message exchanged between the user and the assistant.
Creating the Chat Array:

The chat array is created by combining a system prompt ("You're a helpful assistant") with the chatMessages provided as input. This system prompt helps guide the assistant's behavior in generating responses.
API Request to OpenAI:

The function makes a request to the OpenAI API using the openAI.chat.completions.create method. This request includes the chat array and specifies the model gpt-4o-mini to be used for generating the response.

Handling the Completion Result:

Once the API returns a response, the first choice of the generated completion (i.e., the new message from the assistant) is logged to the console.

The function then returns the entire completion object.

This code snippet demonstrates how to create a chat session with a system prompt, send it to the OpenAI API for generating a response, and handle the API's completion result.

Why Watch the Tutorial?

In our YouTube tutorial, we cover:

Setting up a Next.js project from scratch.
Integrating TailwindCSS for a beautiful and responsive design.
Connecting to the OpenAI Chat Completion API to enable intelligent conversations.
Building a user-friendly chatbot interface.
Deploying your chatbot to a live server.

Watch the Full Tutorial

Ready to dive in? Watch the full tutorial on our YouTube channel and start building your chatbot today. Don’t forget to like, share, and subscribe for more tutorials on web development and AI integration!

Conclusion

By the end of this tutorial, you'll have a powerful chatbot that can engage users with intelligent conversations. This project is a great way to enhance your web development skills and explore the capabilities of modern web technologies. Happy coding!

Tags: #NextJS #TailwindCSS #OpenAI #Chatbot #WebDevelopment #CodingTutorial

JavaScript Loops: For vs For of

Abraham E. Tavarez — Fri, 17 Sep 2021 17:52:06 +0000

JavaScript Loops

JavaScript, like many other programming languages, has many different kinds of loops. Some examples of these loops are while loops, for loops, for of loops, and for in loops.

Learning how and when to use the best kind of loop could be a bit overwhelming. Today we're going to talk about for loops and for of loops, which are two kinds that have a similar syntax.

One of the most frequent use-cases of a loop, is to iterate or loop over an iterable object like a string, array or any array-like object such as (NodeList, Map, Set). We'll be working with an array.

Let's take a look at the for loop syntax:

for (initialization; condition; final-expression) {
   statement
}

A for loop consists of three optional expressions (initialization; condition; final-expression).

Let's look at some code

In the example below, we have a nested array called myArray, which contains two other arrays, which contain number values in them. (I'll reference these two other arrays as inner arrays to help you follow the code example).

Operation

Let's say we need to get the total or the sum of the values inside of each of the inner arrays.

First, we'll loop over myArray to get access to the inner arrays.
Then, we'll loop over each of the inner arrays and add all values inside of each of the inner arrays to a variable called total and print the total.

Example with comments

Here is the same code without comments and extra spaces

What's happening here?

Quick Aside: On line 4, I created a variable called inner to hold the current value of each value inside myArray (the two inner arrays). This is optional, it just makes your loop more readable. You can always reference the value like this: myArray[i].length instead of inner.length.

Notice when we use a for loop we get access to the index of the array, which is i on the first loop and n on the second loop.

Then we use i and myArray to get each value of myArray -> myArray[i].
We also use n and inner to get each value of the inner array -> inner[n].
Finally we add each value to the total variable total += inner[n] and print it to the console.

Behold: The 'For Of' Loop

First let's take a look at the syntax of a for of loop:

for (variable of iterable) {
  statement
}

The for of loop will give you a more clean and readable syntax.

Now let's see the same code using a for of loop:

Much better

The first thing we notice is a much shorter and readable syntax.

On line 3, for (let inner of myArray); on each loop the variable inner will be assigned each of the arrays in myArray:

On the first loop inner will be assigned [11, 22, 33].
On the second loop inner will be assigned [55, 66, 77].

On line 5
for (let num of inner); on each loop num will be assigned the value of each number inside the current inner array:

For the first inner array num will be assigned 11, then 22, then 33.
For the second inner array num will be assigned 55, then 66, then 77.

The syntax of a for of loop is straight forward and concise.

Conclusion

When should we use a for loop or a for of loop?

A basic rule of thumb is, if you need access to the index of the values, then a for loop will be a good choice. If you just need the values, you can use a for of loop instead.

You can still get the index inside of a for of loop but it will use a different syntax. If you're curious, here is one last snippet:

Ok, that's it! I hope you liked this short article.
Now go ahead and practice what we learned replit and if you want to do some more reading on Array.prototype.entries() here is a link to MDN.

Thank you for reading and don't forget to connect with me!

Host a static-website on AWS S3

Abraham E. Tavarez — Tue, 09 Mar 2021 13:14:21 +0000

Are you looking for a free and easy way to host a static-website? Or maybe you're just looking to learn more about AWS S3? Either way, this article will help you!

Intro

A static-website is a website that doesn't change. All of its content is pre-built and static, just sitting somewhere as opposed to a dynamic website where its content is built at the time of the request and can change based on new data, for example, a weather website.

AWS S3 (Simple Storage Service) is a super easy storage solution that allows you to store and retrieve unlimited amounts of data from anywhere. You can store any kind of data on S3, from text files to pictures, data files, videos and more. AWS calls these files "objects," and the name of your object is called a key.

Even though AWS S3 is simple to use, S3 also has advanced options for security, encryption and more. You can read more about AWS S3 after you're done.

Let's get started

If you don't have an AWS account, follow this link to create a free AWS account. Otherwise, let's continue.

1- Head over to our AWS Management Console, then search for S3 and click on it.

2- Click on the big orange Create Bucket button.
You can think of a Bucket as a folder for you to organize your data.

3- Now we need to give our Bucket a name. This name needs to be globally unique. When you create a Bucket, AWS will create a URL that's unique to each Bucket in the world.

I'll use my initials and the purpose of this Bucket as name:

4- Uncheck Block all public access. AWS by default will Block all public access, so in order for the public to see your website, we need to make this particular Bucket public.
Now, check the acknowledge box so we can continue.

5- Leave Bucket Versioning and Default encryption Disabled. you can always Enable them later if need it.

6- Click Create bucket.

7- Nicely done! Now you can see that your new Bucket was created. Let's click on the Bucket and navigate to the Properties tab:

8- Scroll all the way to the bottom until you see Static website hosting and click on Edit.

9- Click on Enable:

10- Go down to Index document and type the name of the main or home page file of the website. If your file name is not already index.html, just write the name of the main page file.
In my case its index.html:

11- Scroll all the way down and click Save changes.

12- Well done! Now we're ready to upload our website files.
If you need a template HTML page, you can download a simple one that I created for you on GitHub. (You can ignore the README.md file)
Now that you have the files ready, click on the Objects tab located on the same page, then click on the big orange Upload Button:

13- If you have a single file, you can upload your index.html file by clicking on Add files. If you have multiple files, click on Add folder instead.

In my case, I have a Folder (HTML_Cloud_Resume) that contains an index.html file and another folder (CSS) that contains a main.css file.

HTML_Cloud_Resume/index.html
HTML_Cloud_Resume/CSS/main.css

Now scroll down and click on Upload, then click Close.

14- Finally, you should see your folder listed:

Click on your folder, select all the Objects in the folder, click on Actions, scroll down and click on Make Public, and then the orange Public button again, and finally, click Close. Now your Objects are also public.
If you have any files inside other folders, make sure to make them public as well.

15- To see your website, click on index.html and look for the Object URL link:

Congratulations! If you followed all the steps you should be looking at your static-website.

You can share this link with the world now. If you make any changes to the website files just upload again the files that you changed to your S3 Bucket.

Thanks for reading. Please share with your friends or leave me a clap or comment.

I'll see you on the next one!

Contact me on LinkedIn

JSON vs BSON

Abraham E. Tavarez — Wed, 25 Nov 2020 14:48:07 +0000

What's the difference between JSON and BSON?

To better understand the difference between JSON and BSON, first let's make sure we understand what JSON is.

JSON

JSON is a lightweight data-format that is often used for structuring data primarily to send data between a server and an application over the internet.
Many developers prefer building APIs using JSON format because of many reasons like for example readability.

Let's look at some key details about JSON:

JSON stands for JavaScript Object Notation
JSON is based on JavaScript in that they are conceptually similar to objects in JavaScript.
JSON is really easy for people to read and write, and easy for computers to parse and generate.
JSON is a text format and is completely language independent.

Now let's look at an example representing a completely made up DEV post JSON object:

{ "Title": "JSON VS BSON",//String Type "Author": "Abraham Tavarez", "hasImage": true,// Boolean Type "readTimeInMinutes": 1,// Number Type "tags": ["beginners", "javascript"],// Array Type "references": { "json.org": "www.json.org", "wikipedia": "www.wikipedia.org", "bsonspec": "www.bsonspec.org/", "mongoDB": "www.github.com/mongodb/mongo" },// Embedded documents or objects "previousArticles": null,// Null Type }

JSON has six different data types as we can see in the JSON object example above.

These types are: String, Boolean, Number, Array, Object and Null.
Having only six types makes JSON super easy to understand and work with.

Even though these types allow us to create an impressive amount of expressivity when formatting our data, JSON's capabilities are still very limited.

There are a few other types that are crucial for some applications like databases. This is where BSON comes to the rescue!

BSON

BSON is a lightweight binary-encoded serialization format capable of representing any JSON-like document.

You can think of BSON as a superset of JSON. BSON supports all of the JSON types but also contains extensions or extra types that are not part of the JSON spec. BSON has well over a dozen of different types, we're going to see some of those types in an example below but here is a link to the full list.

Let's come back to databases for a second. For databases, working with dates and numbers is crucial. JSON has no Date type and only has a single Number type which is not enough to work with large numbers.

MongoDB database uses BSON format to transfer MongoDB documents between the client and the server.

Documents are encoded to a BSON string before being sent to the server and decoded by the driver before returning it to the client.

Using BSON to represent MongoDB's documents allows MongoDB to share data throughout MongoDB's ecosystem despite the language or driver you are writing your application in while maintaining performance, efficiency, and keeping data easy to traverse.

Let's look at some key details about BSON:

JSON to BSON:

BSON stands for Binary JSON.
BSON was created in 2009 by MongoDB.
BSON documents are stored as a string of bytes.
BSON has a variety of implementations depending on the language/driver you are using. For example JavaScript, Python, Java, C# and many more...
BSON is efficient, keeping the space used to a minimum.
BSON is easy to traverse, which is useful for analyzing data.
BSON is really fast in most programming languages.
BSON uses C programing language for creating data types making the encoding and decoding process impressibly fast.

Finally, let's look at the same example but with new BSON types:

{ "_id": ObjectId(), // Object Type "Article": "JSON VS BSON", "Author": "Abraham Tavarez", "hasImage": true, "readTimeInMinutes": 1, "tags": ["beginners", "javascript"], "references": { "json.org": "www.json.org", "wikipedia": "www.wikipedia.org", "bsonspec": "www.bsonspec.org/", "mongoDB": "www.github.com/mongodb/mongo" }, "previousArticles": null, "postedOn": new Date(), // Date Type "likes": NumberInt("343"),// NumberInt Type 4-byte "shares": NumberLong("1254"),// NumberLong Type 8-byte "totalLikes": function(){/your code here.../},// Code Type "querytags": /beginner/i // Regular Expression Type }

BSON Types:

Notice the ObjectId type at the top. ObjectId are the default identifier for documents in MongoDB.
Date Type, notice how we can set the key "postedOn" to an instance of new Date(), pretty nifty.
NumberInt for 4-byte integers and NumberLong for 8-byte integers.
Code can also be store as a value in a BSON Object.
Regular Expressions can also be store on BSON object to work with queries.

Remember, don't forget to read the docs for a full list of BSON types and to learn more about BSON and MongoDB.

Thank you for taking your time to read this short article. I hope it was helpful for you. If you like it please let me know by leaving me a comment, like or share, also if you spot any errors please let me know as well.
Happy hacking 👨🏻‍💻 🤘🏻.

Linkedin | Facebook | Github

Danny Nee on Unsplash Thanks for the awesome cover photo!