Project Overview Creating a Chatbot for a Restaurant

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:

User: Hello
Assistant: Hello there! Welcome to Burger Bliss. How can I assist you today?
User: I want to order a chicken burger.
Assistant: We have two options: Crispy Chicken Burger and BB Grilled Chicken Burger. Which one would you like?
User: I’ll have the Spicy Crispy Chicken Burger.
Assistant: Excellent choice! Anything else you’d like to add, like extra fries or a drink?
User: Can I have extra fries please?
Assistant: Of course! Would you like anything to drink? We have Coke, Fanta, Sprite, and Bottled Water.
User: I am done.
Assistant: Alright, that’s a Spicy Crispy Chicken Burger with extra fries. Pickup or delivery?
User: It’s for pickup.
Assistant: Great! When would you like to pick it up?
User: In 10 minutes.
Assistant: Perfect. Your order will be ready for pickup in 10 minutes. Thank you for choosing Burger Bliss!

2. Setup: Imports and API Key

import os
import openai
import panel as pn

# Load your OpenAI API key from an environment variable
openai.api_key = os.getenv("OPENAI_API_KEY")

3. Chat Completion Helper

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

def get_chat_completion(messages):
    """
    Sends a list of messages to OpenAI’s ChatCompletion API
    and returns the assistant’s response text.
    """
    response = openai.ChatCompletion.create(
        model="gpt-3.5-turbo",
        messages=messages
    )
    return response.choices[0].message.content

4. Bot Instructions

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

bot_instructions = """
You are BurgerBot, an automated service to collect orders at Burger Bliss.
1. Greet the customer.
2. Gather the full order; summarize before confirmation.
3. Ask for pickup or delivery (if delivery, request address).
4. Confirm payment details.
5. Clarify menu options with unique item identifiers.
"""

5. Conversation State and Widgets

Initialize the conversation context and Panel widgets:

# Starting context with system instructions
context = [{"role": "system", "content": bot_instructions}]

# TextInput widget for user messages
user_input = pn.widgets.TextInput(
    placeholder="Type your message here...", width=400
)

# List to hold UI panels for each message
panels = []

6. Processing User Messages

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

def collect_messages():
    prompt = user_input.value
    user_input.value = ""  # Clear the input field

    # Add user prompt to context and fetch assistant response
    context.append({"role": "user", "content": prompt})
    response = get_chat_completion(context)
    context.append({"role": "assistant", "content": response})

    # Display the user’s message
    panels.append(pn.Row("User:", pn.pane.Markdown(prompt, width=600)))
    # Display the assistant’s reply
    panels.append(
        pn.Row(
            "Assistant:",
            pn.pane.Markdown(
                response,
                width=600,
                styles={"background-color": "#F6F6F6"}
            )
        )
    )

    return pn.Column(*panels)

7. Building the Dashboard

Bind the message handler to a button and assemble the UI:

# Button to send messages
chat_button = pn.widgets.Button(name="Send", button_type="primary")

# Bind the function to the button click
interactive_chat = pn.bind(collect_messages, chat_button)

# Layout the dashboard
dashboard = pn.Column(
    user_input,
    pn.Row(chat_button),
    pn.panel(interactive_chat, loading_indicator=True, height=300),
)

dashboard

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

Links and References

• OpenAI Chat API Documentation
• Panel Documentation
• Jupyter Project