Skip to main content
In this tutorial, you’ll build a fast-food ordering chatbot—BurgerBot—using the OpenAI Chat API and HoloViz Panel within a Jupyter notebook. We’ll start by experiencing the end-user flow and then break down each implementation step: environment setup, API integration, instruction design, state management, and UI assembly.

Table of Contents

  1. End-User Experience
  2. Setup: Imports and API Key
  3. Chat Completion Helper
  4. Bot Instructions
  5. Conversation State and Widgets
  6. Processing User Messages
  7. Building the Dashboard
  8. Dependencies
  9. Next Steps

1. End-User Experience

Inside the notebook, Panel presents a simple chat interface. A typical conversation might look like this:

2. Setup: Imports and API Key

Never expose your OPENAI_API_KEY in public repositories. Use environment variables or a secrets manager.

3. Chat Completion Helper

Create a helper function to send messages to the Chat API and return the assistant’s reply:

4. Bot Instructions

Define system-level instructions to guide BurgerBot’s behavior:

5. Conversation State and Widgets

Initialize the conversation context and Panel widgets:

6. Processing User Messages

Define a function that handles user input, updates the chat context, and renders messages:

7. Building the Dashboard

Bind the message handler to a button and assemble the UI:
Run this cell in your Jupyter notebook. Click Send after typing each message to interact with BurgerBot.

8. Dependencies


9. Next Steps

In upcoming sections, you’ll learn how to:
  • Craft more precise prompts for improved order accuracy
  • Manage conversation state and handle edge cases
  • Style the Panel UI for a polished user experience
  • Integrate a real-time database for order tracking

Watch Video

Practice Lab