Creating ChatGPT Apps with JavaScript: A Hands-on Guide for AI Applications with OpenAI APIs

About the Authors ......................................................................................xiAbout the Technical Reviewer .......................................................................xiiiChapter 1: Introducing ChatGPT for JavaScript Developers ....1Who Is This Book For? ....1Chapter Overview ....2Download the Code Now! ....2So, What Exactly Is ChatGPT and Why Do I Need to Use the OpenAI APIs? ....3Regex vs. ChatGPT – Fight! ....6Analysis Question #1: Who Didn’t Get Any Ice Cream and Why? ....7Analysis Question #2: Which Kid Was Probably Left Sad? ....9Let’s Unlearn Some Words in Order to Learn More About the ChatGPT API ....10Models. Models? Models!!! ....10When We Talk About Tokens, Don’t Think About Access Tokens ....15Temperature Is All About Creativity ....16Getting Started with the OpenAI Playground ....171. System Message ....192. User ....203. Assistant (Optional) ....204. + (Optional) ....215. Code (Optional) ....216. Model (Optional) ....217. Temperature (Optional) ....228. Max Tokens (Optional) ....22Try It Now! Experimenting with the “System” Role ....22Conclusion ....23Chapter 2: Using ChatGPT As Your JavaScript Pair-Programmer ....25Chapter Overview ....25You Have Node.js Already Installed, Right? ....26Installing (or Updating) the OpenAI Node.js Library with npm ....26Three Ways to Set Your API Key ....27Option #1: Setting a System-Wide Environment Variable ....27Option #2: Creating a .env File ....30Option #3: Hard Coding the API Key Directly in Your Application(Take with Caution) ....31Creating Your First JavaScript ChatGPT App: list-models ....32Using openai.models.list( ) to Get a List of Available Models ....32Handling the Response ....33Using Your API Key to Get a List of Available Models with the OpenAI API ....34Wait, How Many Tokens Are in My Prompt? ....36Using ChatGPT As a Pair-Programmer to Build a Weather Application ....38Setting Up the Prompt ....38Creating a Weather App with the AccuWeather API ....42Refining Our Prompt with Prompt Engineering ....46Using ChatGPT As a Pair-Programmer to Build an Application ThatEstimates Distance and Arrival Time ....51Creating a Project with Google Maps Platform API ....52Approach #1: Using ChatGPT to Take a cURL Command and Convert It toJavaScript ....59Approach #2: Using ChatGPT to Avoid Reading a Lot of Documentation ....65Conclusion ....69Chapter 3: Creating a Basic ChatGPT Client in JavaScript ....71Creating Our ChatGPT Client Application in JavaScript ....71Resist the Urge to Put Your API Key in a Web Application! ....73Using OpenAI.chat.completions.create() to Send Messages to ChatGPT ....74Examining the Method Parameters ....74There Are Four Types of Messages ....81System Message (Array) ....81User Message (Array) ....82Assistant Message (Array) ....83Tool Message (Array) ....84Running Our Basic ChatGPT Client ....85Handling the Response (ChatCompletion) ....87ChatCompletionMessage ....89Conclusion ....89Chapter 4: Using AI in the Enterprise! Creating a TextSummarizer for Slack Messages ....91So, What Is Prompt Engineering? ....92ChatGPT Is Here to Take Away Everyone’s Jobs (Not Really) ....92Examining a Real-World Problem: Customer Support for aSoftware Company ....93Prompt Engineering 101: Text Summarization ....97Prompt #1: “tl;dr” ....98Prompt #2: “Explain This in 3 Sentences or Less” ....99Prompt #3: “I’m a Manager. Explain to Me What Happened” ....100Prompt #4: “Give Me Suggestions on Next Steps” ....103Let’s Talk About Real Prompt Engineering ....105Registering a Slack Bot App ....106Specifying What Your Bot Can (and Can’t) Do by Setting the Scope ....109Confirming Your Settings ....110Viewing the OAuth & Permissions Page ....111Installing Your Slack Bot App to Your Workspace ....112Getting Your Slack Bot (Access) Token ....114Inviting Your Bot to Your Channel ....114Finding the Channel ID of Your Channel ....115Using Your Slack Bot App to Automatically Grab Messages from a Channel ....116Programmatically Reading Messages from Slack ....116Exercises Left for the Reader ....119Conclusion ....120Chapter 5: Multimodal AI: Creating a Podcast Visualizerwith Whisper and DALL·E 3 ....121Introducing the Whisper Model by OpenAI ....124Features and Limitations of the Whisper Model ....126Using OpenAI.audio.transcriptions.create() to Transcribe Audio ....130Examining the Method Parameters ....130Creating a Utility App to Split Audio Files ....132Creating the Audio Transcriber with Whisper ....136Having a Little Fun and Trying Things Out with a Podcast ....138Going Meta: Prompt Engineering gpt-4o-minito Write a Prompt for DALL·E ....140Using OpenAI.openai.images.generate() to Create Images ....141Create Image (JSON) ....142Handling the Response ....144Image ....144Creating the Images with the DALL·E Model ....144Visualizing the Podcast ....146DALL·E Prompt Engineering and Best Practices ....147DALL·E Golden Rule #1: Get Familiar with the Types of ImagesThat DALL·E Can Generate ....148DALL·E Golden Rule #2: Be Descriptive with What You Want in theForeground and Background ....149Conclusion ....150Exercises Left for the Reader ....151Chapter 6: Creating an Automated Community Manager Botwith Discord and JavaScript ....153Choosing Discord as Your Community Platform ....154Creating a More Advanced Bot Than Our Slack Bot ....155Creating a More Advanced Bot Than Any Typical Discord Bot ....155Understanding the Roles for the Bots ....156Our Example Bank: Crook’s Bank ....157First Things First: Create Your Own Discord Server ....158Create the Q&A Channel ....159Registering a New Discord Bot App with Discord ....161Specifying General Info for the Bot ....162Specifying OAuth2 Parameters for the Bot ....163Invite Your Bot to Your Server ....165Getting the Discord ID Token for Your Bot and Setting the Gateway Intents ....167Creating a Q&A Bot App in JavaScript to Answer Questions from a Channel ....170Creating the Discord Client ....173Listening for New Messages in Our Preferred Discord Channel ....173Success! Running Your First Discord Bot ....174Streamlining the Process of Registering Our Next Discord Bot App ....175Registering a New Discord Bot App with Discord ....175Specifying General Info for the Bot ....176Specifying OAuth2 Parameters for the Bot ....176Invite Your Bot to Your Server ....177Getting the Discord ID Token for Your Bot and Setting theGateway Intents ....177Creating the Next Discord Bot, the Content Moderator ....177Handling Messages Sent to the Discord Server ....179Success Again! Running Your Second Discord Bot, theContent Moderator ....179Conclusion ....180Exercises Left for the Reader ....181Chapter 7: Adding Intelligence to Our Discord Bots,Part 1: Improving Our Q&A Bot ....183Making Our Tech Support Bot More Intelligent ....184Important Changes to Note from the Previous Version of the TechSupport Bot ....188Updates to the Newly Named Function, discordClient.on() ....189Analyzing Our ChatGPT Client, chatGPTClient.js ....190Running Our Intelligent Q&A Bot ....192We Have a Monumental Achievement… with One Slight Flaw ....195Update the System Message to ChatGPT and Let’s Try Again ....196Conclusion ....198Chapter 8: Adding Intelligence to Our Discord Bots,Part 2: Improving Our Moderator Bot ....199Using OpenAI.moderations.create() to Invoke a Moderation Model ....201Create Moderation (JSON) ....202Handling the JSON Response ....202Moderation (JSON) ....203Creating Our Client for Content Moderation ....207Making Our Content Moderator Bot More Intelligent ....210Important Changes to Note from the Previous Version of the ContentModerator Bot ....212Updates to the discordClient.on() Function ....214Running Our Intelligent Content Moderator Bot ....215Conclusion ....217Exercises Left for the Reader ....217Index ....219