Introduction

Code Hub is the home for prebuilt solutions for common communication workflows and browser-based coding environments. These prebuilt solutions can greatly reduce your development time, configuring dependencies, and manually configuring API Keys.

Code Hub's intuitive interface allows you to browse use cases that span our Vonage Messages API, Voice API, Video API, Number Insight API, and more.

Since ChatGPT is a tool many businesses are adopting today, we have several templates that make that process even easier.

This includes:

• WhatsApp ChatGPT Bot - Create a WhatsApp ChatGPT Bot using the Vonage Messages API.

• Voice ChatGPT Bot - Create a WhatsApp ChatGPT Bot using the Vonage Voice API.

• Voice ChatGPT Bot (Java) - Create a WhatsApp ChatGPT Bot using the Vonage Voice API and Java.

• Image ChatGPT Bot—In this project, you will create an SMS chatbot to generate images based on SMS text prompts using the OpenAI API DALL-E.

• SMS ChatGPT Bot—In this project, you will create an SMS chatbot that sends and receives messages using ChatGPT and the OpenAI API.

In today’s blog post, we’ll discuss a Messaging use case. Let’s get started!

Getting Started

Visit Code Hub and scroll through the solutions list to familiarize yourself with the user interface. You can use the search capability in the middle of the page if you want something specific. Now’s also a great time to sign in or sign up if you haven’t already done so.

Code Hub Main Menu

“SMS ChatGPT Bot” Use-case walkthrough

Point your browser towards the SMS ChatGPT Bot template. This common use case will serve as our first example.

SMS ChatGPT Bot

Let’s review what each tab’s function is:

• Overview - A short description of what the sample aims to achieve and how to get started.

• Get Code - Allows you to use the Visual Studio Code browser version to try the code, make changes, and instantly deploy it.

• Deploy Code - Allows you to deploy the application and see it in action.

To begin, once signed in, select Deploy Code, then Deploy new** **instance.

You’ll be asked to provide the following:

• Region - select whatever is closest to you

• Instance Name - Give it a nickname

• Vonage Number - Assign a number to the project

• OpenAI API Key - This is the key you get from the OpenAI API.

Project Deployment

Finally, click Continue, and it will begin deploying. You can then check to see if the Status is Running, and if so, press the Launch button.

Chatbot Running

There is also an option to View Logs, which can assist with tracking and troubleshooting.

Launch the application

Go ahead and click on the Launch. A new browser window will appear that displays the following content:

Launch App

Assuming you entered a valid OpenID API, If you text your number with a question, it will return the answer. Try something such as “Where is the Vonage Headquarters?”

Edit the Sample (in YOUR browser!)

Now that we have successfully deployed a sample, let's try changing the code and instantly deploying it to see the changes live. Click on Get Code, and then Create a new development environment. You’ll need to set your workspace, so enter the information requested and click Continue.

You'll now be presented with the project in Visual Studio Code INSIDE your browser.

Edit in your Browser

Begin by reviewing the README.md, which contains important information on how to run the sample.

If you navigate to one of the source files (such as index.js), you can modify the code and try it.

Feel free to play around and make some changes. For example, on Line 98 in index.js, you could remove the hardcoded “ChatGPT:” string and only reply with what ChatGPT sends back.

Wrap-up

We're excited to see all the new and interesting ways customers use this tool. Feel free to consult our documentation for further information. Also, if you have questions or feedback, join us on the Vonage Developer Slack or send me a Tweet on Twitter, and I will get back to you. Thanks again for reading, and I will catch you on the next one!