
In March 2023, OpenAI released its API for developers to access ChatGPT and its Whisper models. Since then, developers can integrate these services and models into their applications and products via their API. Many great tutorials have then been published on how to create your own ChatGPT Chat web app using their API together with Streamlit or Streamlit Chat.
This article proposes a lighter-weight approach. Instead of running or hosting a Streamlit server or working with Docker containers, all the work is done in a Jupyter Notebook.
In this article, you will learn how to run interactive sessions about your custom documents with OpenAI’s LargeLanguageModel (LLM) ChatGPT in Jupyter Notebook by using LangChain and IPyWidgets.
The final result will look like this:

The following chapters will explain each part of the code separately.
💾 Here you can find the complete code as a Notebook.
Prerequisites
Before we can start working on our conversational sessions with ChatGPT, some things need to be done first.
OpenAI API key 🔑
Since we want to use ChatGPT, we first need a valid OpenAI API key. The needed key can be created under this link and then by clicking on the
+ Create new secret key
button.
OpenAI offers a free trial period before you charge money. The prices are super fair in my opinion, considering that hosting your own LLM is more expensive in many cases.
Installing the OpenAI package 📦
Once we have the key, we also need to install the official OpenAI package by running the following command:
pip install openai
Installing the LangChain package 🦜️🔗
LangChain is a relatively new framework built on top of LLMs like ChatGPT. Its goal is to chain different components together to create more advanced use cases around LLM like question-answering over specific documents or chatbots.
To install it, run the following command:
pip install langchain
Install or update Jupyter Widgets 🪐
If you are using Jupyter Notebook or Jupyter Lab, ipywidgets should be already installed. However, it could be the case that you are using an older version of the package. This article uses the (latest) version 8.0.5
.
To install or update ipywidgets, run the command below:
pip install -U ipywidgets
After the successful installation, do a restart of your Jupyter Notebook/Lab.
Off-topic: …I know… Jupiter does not have a ring – its Saturn 🪐 😛
Data 📑
As promised above, we will not only create an interactive session with ChatGPT but also send our own document to ChatGPT and then ask questions about them. The document we use as an example is a Wikipedia article about the Collapse of Silicon Valley Bank (Wikipedia contributors, CC BY-SA 3.0)
Note: I downloaded the mentioned article as a text file using the wikipedia package. Of course you can use any text files or DocumentLoaders you like.
Project structure
Our project has the following folder structure
documents/
|- Collapse_of_Silicon_Valley_Bank.txt
images/
|- bear_avatar.png
|- cat_avatar.png
|- loading.gif
InteractiveSession.ipynb
Integrating ChatGPT with LangChain
Now that we have all the packages and tools we need, we can work on combining or using ChatGPT with LangChain. As mentioned above, LangChain has a number of helpful features to load documents and start conversation sessions with ChatGPT.
The code below shows the logic that we later combine with Jupyter Widgets.
In line 10
we have to set our OpenAI API key. Lines 12-13
load all text documents (in this example only one) from the specified /documents
path.
Chroma ( lines 15-16
) is an in-memory embedding database that contains our text document in the form of embeddings using OpenAIEmbeddings
.
After we initialized ChatGPT in line 18
, we create a ConversationalRetrievalChain
(line 21
). To start a conversation with ChatGPT, we need to specify a question and a chat history (lines 24–29 and line 31
) so that it remembers the previous conversations, for example, in case we reference in a follow-up question to a previous answer.
Note: If you have the choice between Jupyter Notebook and Jupyter Lab, go for the latter one. With Jupyter Lab, you have more options to debug your code (i.e., the log console)
Combining it with an interactive design
With the logic above, we could already start a conversation. However, it would not be interactive. For each new question, we would have to create a new cell with the code from lines 24–29 and line 31
.
To make our conversation interactive, we will use Jupyter widgets, CSS, and optionally two avatar images and a loading animation gif.
- I used the avatar images (bear, cat)from Animal icons created by Freepik – Flaticon (Flaticon license Free for personal and commercial use with attribution)
- And the loading animation (free license) from loading.io.
- All images are located in the
images/
folder. - The following CSS and HTML was used from Bootstrap snippet. chat app (MIT license)
The code snippet below shows the libraries we need to import first
from datetime import datetime
from IPython.display import HTML, display
from ipywidgets import widgets
After the import, we add the following code to a new cell. This is necessary because we use the %%html
cell magic.
The code below shows how the logic from above (Integrating ChatGPT with LangChain) is combined with HTML code.
To make our session interactive, we need to create a method that is trigged by changes to the Jupyter Text Widget (our input filed).
We have to set the text.continuous_update
to False
. Otherwise, our defined method would be triggered with every single character we type in.
Last but not least, we define the appearance or layout of the input field, output, and loading bar.
We use the flex_flow="column-reverse"
here to always have the scroll bar at the bottom, so we don’t have to scroll down for each new message.
That’s it! Now we can start an interactive session!
The complete code can be found here
Demo Session
As mentioned above, I used for this demo an article about the Silicon Valley Bank’s collapse. Since this event happened after ChatGPT’s latest update or refresh, it is not aware of the collapse.
Let’s find it out by using the official console (figure 2):

We can see that the current version (March 23) is not aware of the collapse. Let’s start our interactive session:

BÄM! With the information we provided via LangChain, ChatGPT can provide more detailed answers about the collapse.
Conclusion
If you are looking for a lightweight alternative to create your own ChatGPT chat web application, then this approach could be a pretty good alternative. All the needed work can be done in a Jupyter Notebook with LangChain, IPyWidgets, and HTML/CSS. Since LangChain is relatively new, I expect many updates and possible code changes soon.
Sources
Wikipedia contributors. (2023, May 1). Collapse of Silicon Valley Bank. In Wikipedia, The Free Encyclopedia. Retrieved 18:56, May 1, 2023, from https://en.wikipedia.org/w/index.php?title=Collapse_of_Silicon_Valley_Bank&oldid=1152681730