Building Web Apps from Jupyter Notebooks with GitHub Copilot

One significant challenge that AI/ML engineers often encounter is the transition from a Jupyter Notebook—a fantastic tool for prototyping and experimenting with data—to a deployable web application that web developers can further build upon. While Jupyter Notebooks excel in the experimentation phase, transforming them into a working web app that can be further enhanced through application development requires additional steps.

GitHub Copilot to the rescue. GitHub Copilot recently introduced context variables which allow you to specify a file: to generate code from. And since VS Code supports Jupyter Notebooks, I conducted a simple experiment to see if I could generate a web application from a Jupyter Notebook using GitHub Copilot. SPOILER ALERT: It was successful!


  1. VSCode
  2. GitHub Copilot
  3. Jupyter Notebooks
  4. Python
  5. Streamlit

Step 1: Create a Jupyter Notebook (skip to Step 2 if you already have one)

Another cool feature of GitHub Copilot is the /slash commands. One of the commands, /newNotebook, utilizes GenAI to create a plan and generate a new Jupyter Notebook. Here is my prompt and the generated notebook:

@workspace /newNotebook Use pandas to read the csv file in #file:people.csv and plot a bar graph by number of people by age group

New Notebook Prompt GitHub Copilot /newNotebook prompt

After clicking [Create Notebook], GitHub Copilot generated this notebook: Generated Notebook GitHub Copilot Generated Notebook (code here)

The code generated will not be perfect, but it will be a very good starting point. In my case, I only needed to fix the path to the CSV file and it worked seamlessly.

# Read the CSV file using pandas
df = pd.read_csv('C:/GitRepos/RazGPT/sampledata/people.csv')

Step 2: Use the Jupyter Notebook to generate a Streamlit Web App

Now that we have a working Jupyter notebook, we can save it to a *.ipynb file and then use the #file: context variable to generate a Streamlit web application. Here is the prompt I used:

create a streamlit application based on #file:notebook.ipynb

New Streamlit App Prompt

Because I had a hardcoded people.csv path in my notebook, the generated Streamlit code also assumed this path was fixed. Using GitHub Copilot Chat, I asked it to revise the code to prompt the user to upload a CSV file instead. New Streamlit App Follow Up Prompt

After copy-pasting the generated code into a new file, I am now able to run the Streamlit web application by executing streamlit run to test its functionality. Streamlit Web App Streamlit Web App generated from Jupyter Notebook (code here)

For visual impact, I generated a Streamlit Web App for this blog post instead of a REST API. REST APIs may be more useful if you’re working with other developers; to do so, you can try this prompt instead:

create a python flask rest api application based on #file:notebook.ipynb

Have fun!

This post is licensed under CC BY 4.0 by the author.