Geolocation applications are increasingly becoming essential in our daily lives. From food delivery apps to ride-hailing services, real-time geolocation is a crucial feature that enhances user experience. However, as services become more easily accessible and apps easier to find, you’ll need to implement additional features to maintain an edge in the competitive market. One way to do this is to improve your user experience with Generative Artificial Intelligence (AI). Generative AI has exploded in popularity, where natural language processing applications such as Microsoft’s Bing AI (which uses OpenAI’s GPT model), Google Bard, and Amazon Codewhisperer are used in a variety of use cases, including blockchain, devops, e-commerce, and even robotics.
In this blog post, you’ll learn how to easily integrate arguably the most popular Generative AI application OpenAI’s ChatGPT into an existing open-source Geolocation web app with PubNub to provide details about your current location.
Prerequisites
Although not required to integrate ChatGPT into a Geolocation application, it would be best to follow how to architect Geolocation applications, where you’ll learn about the fundamentals of real-time geolocation services for developers and what to consider while building geolocation features.
You can also learn how this Geolocation application was built by following our tutorial. This geolocation app allows participants to locate and interact with each other, based on PubNub's Javascript SDK for web development. PubNub powers the following functionality in the application:
Real-time Tracking - Share your location with others in real time.
Location History - See the last known update from any user that's come online.
Greeting Messages - Send and update a personal message for users looking for you.
Private Session and Invites - Make a new private space for you and others.
For this tutorial, you’ll need the following requirements:
PubNub Account: You’ll need the API Keys for real-time messaging and communication and set up a serverless environment (Functions) to host interaction with ChatGPT. Learn more about how to obtain these keys by following our documentation. In your keyset, you’ll need to enable the following functionality:
Presence: Track when the user’s online status changes.
Message Persistence: You will be able to see the user’s message history and metadata.
Stream Controller: You will be able to receive messages against a group of channels, or post one message to multiple channels.
App Context: This allows you to manage the metadata of your users and channels.
Google Account: The Google Maps Platform requires an API key that you’ll need to configure and restrict in your Google Cloud account. Follow their documentation on how to obtain this API key.
OpenAI Account: You’ll need to obtain your secret API Key to interact with OpenAI’s ChatGPT. This will be securely stored when integrated into your application.
Code Editor: You’ll need a code editor to modify vanilla HTML, CSS, and JS files, such as Visual Studio Code.
Geolocation app: Download the geolocation app used in this tutorial and open the folder in the code editor.
Integration of OpenAI's ChatGPT
ChatGPT, developed by OpenAI, is an advanced language model that uses machine learning to generate human-like text. It can be used to build chatbots, generate creative content, and more. In this context, we will be using ChatGPT to provide interactive location-based information, enhancing the overall user experience of our geolocation application.
PubNub now integrates with OpenAI GPT to enhance real-time communication and messaging experiences. With this integration, you can easily host a serverless environment that allows you to intercept messages published in your app, process this information with OpenAI’s platform, and then forward these responses back to your applications with PubNub. Once you’ve set up a PubNub account, it takes less than five minutes to host this integration by following the Setup section in the integration documentation. You can think of this integration as a quick and easy plugin for your PubNub applications.
We will need to modify the code in the function to suit our specific needs. You’ll be modifying the instructions that detail the task that ChatGPT needs to complete, as well as publishing the response from ChatGPT back to the application. For this application, ChatGPT will return three interesting or historical facts about the provided coordinates sent from the Geolocation app.
Replace the following code in your Function:
Set up the channel name to be chatgpt.facts.*, which is a wildcard subscribe to listen for any messages of that type. You can learn more here. Be sure to press the Save button to save your changes and press the Restart Module button (or stop/start the module) to deploy the new changes.
Setting up PubNub and OpenAI's ChatGPT on Your Geolocation App
Once you’ve set up the serverless OpenAI GPT integration with PubNub, you’re almost ready to begin viewing the ChatGPT integration in the Geolocation Demo! You’ll need to replace a few of your API keys in the files and understand how the geolocation app is receiving the location information.
In index.html, right below the map-canvas-div, there is a space that displays the location information returned from ChatGPT. Be sure to replace the API key for the Google Maps API source towards the bottom of the file in the key parameter.
The entirety of the HTML and CSS code can be found on GitHub.
Let’s view the logic of the application in js/app.js to receive these location updates for the backend. You’ll need to begin by replacing your PubNub publish and subscribe keys you obtained earlier when initializing the PubNub object:
The channel of the ChatGPT connection, which is the connection to transmit data between the user and the PubNub platform, is specifically designated to publish and subscribe to an exact channel, so only that user can send/receive location information from ChatGPT that is specific to them.
The channel is added when subscribing to the PubNub channels:
The showPosition function is called whenever the user’s location has been updated. You’ll publish the updated user coordinates to be caught by the OpenAI GPT integration hosted via PubNub Functions, but only under a few conditions. In sendMessageChatGPT, the new updated coordinates must be from a different city and be further than two miles from the original location. This DISTANCE_BETWEEN_CITIES_MILES const can be adjusted as you see fit, but defaults to 2.
Finally, a listener is necessary to handle the response from ChatGPT. In the redraw function, which is called whenever a new message is received on the PubNub platform, a condition is added to listen for updates from the PubNub Function. The function setInterval is used to simulate a typing effect, mimicking ChatGPT’s responses. The condition is added at the end:
If you’d like to see the application in its entirety, you can view the application on GitHub.
You’re now ready to see the location information received from ChatGPT! Open the index.html file in your browser (double-click the file in explorer) and allow the app to use your current location. Once your location has been registered in the map, you should see the location section be updated with historical/interesting facts regarding the city that is closest to your location.
What's Next
You’ve learned how you can easily enhance a geolocation application with PubNub and OpenAI's ChatGPT. Not only does it provide a better user experience by providing interesting information about locations, but it gives your app a competitive edge by incorporating Generative AI.
You can use what you’ve learned in this tutorial to enhance this application using PubNub’s JavaScript SDK and OpenAI’s API Reference documentation for these additional features. Don’t worry if your application is in a different programming language: PubNub offers 25+ SDKs in both web and mobile apps with React, Python, Android Kotlin, iOS Swift, Java, and more for application development.
If you would like to learn more about how to get started integrating PubNub and OpenAI’s ChatGPT into your own application, take a look at our growing collection of updates, demos, tutorials, and documentation.
Explore PubNub’s Geolocation Developer Path, a guided journey in how you can use PubNub’s SDKs to build and enhance Geolocation applications.
Learn how to use PubNub to build Geolocation applications.
Read how PubNub created its OpenAI GPT API Integration with PubNub Functions.
Follow how to Build a Chatbot with PubNub and ChatGPT / OpenAI.
If you would like more personal assistance, please reach out to us. We’ll walk you through the best way to add PubNub to your application.
