Skip to main content
In this tutorial, you’ll build an interactive chatbot for Burger Bliss, a fast-food restaurant. We’ll cover:
  1. Imports and API key configuration
  2. Implementing the chat completion function
  3. Collecting messages and updating the UI
  4. Crafting the system prompt with menu details
  5. Building the Panel-based UI
  6. Running an example conversation and inspecting the message history

1. Imports and API Key Configuration

First, install and import the required libraries:
Storing your API key in an environment variable keeps it secure. Avoid committing secrets to version control.
Hardcoding your API key in source code can expose it publicly. Use environment variables or secret managers.

2. Chat Completion Function

Define a reusable function that sends the full conversation history to the OpenAI GPT-3.5 Turbo model and returns the assistant’s reply.

3. Collecting Messages & Refreshing the UI

The collect_messages callback does three things:
  1. Reads the user’s input and clears the text field.
  2. Appends user and assistant messages to the context.
  3. Updates the Panel layout with the latest chat entries.

4. Designing the System Prompt

We steer the chatbot’s behavior using a detailed system prompt. This includes greetings, order flow, and a complete menu. Use a Markdown table for clarity and SEO.
This history enables the model to maintain context across turns, crucial for coherent, multi-step conversations.

Next Steps

  • Persist context to a file or database for chat sessions.
  • Customize bot_instructions and menu for other restaurants.
  • Enhance the UI with dropdowns for menu items and add-on buttons.

Watch Video

Practice Lab