Unlocking the Power of ChatGPT: A Comprehensive Video Series on Building a ChatGPT Recipe Chatbot

Welcome to our latest video series, "How to Build a ChatGPT-powered Recipe Chatbot with Botpress."

In this series, we'll walk you through the process of creating a ChatGPT recipe chatbot from scratch, leveraging Botpress' powerful generative AI features. Our step-by-step video series is designed to help beginner builders unlock the full potential of Botpress and ChatGPT. 

Throughout these videos, you'll learn essential chatbot building skills such as capturing user information, making API calls, displaying content in carousels, and harnessing the power of AI Tasks to design interactive, engaging conversations.

The video series might be all about a recipe chatbot, but don't worry – the skills you'll pick up can be used in many other situations: hotel bookings, insurance quotes, customer service chats – you name it. They all pretty much use the same three-part structure when talking with users. So, as you build along with us, you'll be well on your way to creating your own ChatGPT chatbot for your organization, no matter what industry or application you have in mind.

Video Series Breakdown

Video 1: Overview

In the first video of the Recipe Bot video series, our very own Gordy from Botpress introduces the chatbot project we'll be building together. This chatbot is designed to help users figure out their dinner plans by recommending recipes based on their preferences. Gordy takes us through the three main sections of the chatbot: capturing user information, using an API to fetch recipes, and providing contextual Q&A

One of the most interesting features Gordy highlights is the AI Task card, which leverages ChatGPT to simplify the chatbot building process, making it faster and easier than ever before. By the end of the first video, you'll be eager to dive into the rest of the series, where we'll create a new bot and build the recipe chatbot from scratch.

Video 2: Capturing Information

In the second video of our series, Gordy jumps right into the first stage of building our chatbot: capturing user information. He guides us through the process of creating a new bot and cleaning up the default template to provide a clean slate for the project. To plan out the chatbot, Gordy creates empty nodes for each task, starting with greeting the user, asking the number of people, inquiring about dietary preferences, and finally getting a recipe search query. 

Gordy demonstrates how to use the "capture card" to extract user information, such as the number of people, and store it in a variable. He then moves on to capturing dietary preferences by creating custom options for the user to choose from. The final step involves leveraging ChatGPT to handle the recipe search query. By using an AI Task card, Gordy instructs ChatGPT to classify the user's input and extract relevant keywords. 

Throughout the video, Gordy tests each step in the Botpress emulator to ensure everything works as intended. With the basic skeleton of the bot in place, the stage is set for the upcoming video, where we'll learn how to use the "Execute Code" card to call an external API and fetch real-world recipes for the user. Stay tuned for more exciting bot-building adventures!

Video 3: Calling an external API

In the third video of the series, Gordy continues to build the chatbot using Botpress Studio's generative AI features. In this episode, he focuses on using an external API to fetch real-world data based on the user's input. The API being used is Spoonacular, which offers a large food database and a generous free tier.

After signing up for Spoonacular and obtaining an API key, Gordy demonstrates how to use environmental variables in the Botpress Studio to securely store and manage the API key. Next, he outlines a plan for calling the API and processing the data. 

To write the code needed for making the API call, Gordy leverages Botpress’ GPT "Execute Code" function. By providing a detailed prompt, he gets GPT to generate the necessary code, which includes handling the API call parameters and saving the results to the workflow. He then modifies a node to display the API call results as text. 

Upon testing the chatbot in the emulator, the API call successfully retrieves a large amount of information. In the next video, Gordy will focus on transforming this data into a visually appealing carousel, presenting the user with a more digestible and engaging experience.

Video 4: Displaying content dynamically in a carousel

After fetching data from Spoonacular’s external API in the previous video, the focus of this fourth video is parsing the data and converting it from a large block of text into a visually appealing carousel. Gordy demonstrates what a completed carousel looks like, with images, titles, and buttons for each recipe. The challenge is to turn the raw data from the API into this user-friendly format. 

To create the carousel, Gordy once again employs Botpress’ GPT "Execute Code" function to help write the necessary code. While the generated code requires some manual tweaking, GPT provides a solid starting point. He then moves on to writing code for handling different numbers of recipes returned by the API and shows how GPT can be used for transitions as well.

After setting up the necessary nodes and populating them with the correct variable names, Gordy tests the chatbot and successfully generates a carousel with three recipe cards. 

Video 5: Calling an external API

The focus of the fifth video is integrating ChatGPT to power contextual Q&A, allowing users to ask questions about the recipes obtained from Spoonacular API and receive relevant, accurate answers.

To achieve this, Gordy plans out a series of nodes to prompt users for questions, answer them using ChatGPT, and ask if users have any more questions. He demonstrates the process of setting up the AI tasks and transitions, emphasizing the importance of providing contextual information and giving the AI an "out" to combat hallucination issues.

Gordy shows how to create a chat history variable by running a piece of code, ensuring that the chatbot respects the 5,000-character prompt limit. He then tests the chatbot by asking it various questions about the recipes, and the AI successfully provides accurate and contextually relevant answers.

Videos 6-10: still to come

In the next half of the series, Gordy will focus on how to share your bot, add fallbacks in the conversation, and make the chatbot more robust for a better user experience. 

Code Snippets

Code Snippet that appears in Video 3 to call Spoonacular API

var options = {
  method: 'GET',
  url: 'https://api.spoonacular.com/recipes/complexSearch',
  params: {
    query: workflow.baseQuery,
    diet: encodeURIComponent(workflow.dietType),
    apiKey: env.apiKey,
    number: '3',
    ignorePantry: 'false',
    sort: 'popularity',
    sortDirection: 'asc',
    addRecipeInformation: 'true',
    addRecipeNutrition: 'false'
  }
}
const response = await axios.request(options)
if (response.status == 200) {
  workflow.recipes = response.data.results
} else {
  console.log(`API call failed with status code ${response.status}`)
}

Code Snippet that appears in Video 4 to render recipe carousel

workflow.recipeInfo = []
const myCards = workflow.recipes.map((recipe) => {
  workflow.recipeInfo.push({
    title: recipe.title,
    vegetarian: recipe.vegetarian,
    vegan: recipe.vegan,
    glutenFree: recipe.glutenFree,
    dairyFree: recipe.dairyFree,
    veryHealthy: recipe.veryHealthy,
    cheap: recipe.cheap,
    veryPopular: recipe.veryPopular,
    readyInMinutes: recipe.readyInMinutes,
    servings: recipe.servings,
    summary: recipe.summary
  })
  // create the card object
  return {
    type: 'card',
    title: {
      dynamicValue: `${recipe.title}`,
      valueType: 'dynamic'
    },
    subtitle: {
      dynamicValue: '',
      valueType: 'dynamic'
    },
    imageUrl: {
      dynamicValue: `${recipe.image}`,
      valueType: 'dynamic'
    },
    actions: [
      {
        action: 'url',
        label: 'View Recipe',
        value: `${recipe.sourceUrl}`
      }
    ]
  }
})
workflow.cards = []
for (var card of myCards) {
  workflow.cards.push({
    //in order to render a card, we only need these three fields
    title: card.title,
    imageUrl: card.imageUrl,
    actions: card.actions[0]
  })
}

Code Snippet that appears in Video 5 to prepare Chat History

workflow.chatHistory = []
event.state.session.history.map((message) => {
  if (message.preview != 'What would you like to know about these recipes?') {
    workflow.chatHistory.push(`${message.sender}:${message.preview}`)
  }
})

const myStr = `Using the provided recipe information and chat history as context, try to answer the question as honestly as possible. If you don't know the answer, say "I don't know." 

Your answer should be friendly and complete, using the same words from the question as much as possible.
Recipe info: ${JSON.stringify(workflow.recipeInfo)}
Chat history: ${JSON.stringify(workflow.chatHistory)}
User question: ${event.preview}}`
console.log(`The prompt is ${myStr.length} characters long`)
if (myStr.length > 5000) {
  console.log('The prompt is too long! Omitting the chat history...')
  workflow.chatHistory = []
}

Conclusion

In this comprehensive video series, Gordy explored the process of building a ChatGPT-powered recipe chatbot using Botpress. The series covered essential chatbot building techniques such as capturing user information, making API calls, displaying content in carousels, and harnessing the power of AI Tasks to create interactive, engaging conversations. We've also delved into more advanced topics like integrating ChatGPT for contextual Q&A and managing chat history. The skills and techniques shown while building the recipe bot are transferable to a variety of chatbot applications across different industries. With half of the video series completed, we encourage you to stay tuned and join us when the next half is released. 

With the power of ChatGPT and Botpress at your fingertips, you'll be well-equipped to create dynamic, engaging chatbots that cater to your organization's specific needs. If you haven't already, we invite you to explore the video series and start building your own chatbots using Botpress.

Happy bot-building!