[HAI5014] Week 4: Eliza meets CoPilot

Explore devcontainers and GitHub Copilot to enhance your coding workflow and AI interaction skills.

Disclaimer: This blog provides instructions and resources for the workshop part of my lectures. It is not a replacement for attending class; it may not include some critical steps and the foundational background of the techniques and methodologies used. The information may become outdated over time as I do not update the instructions after class.

Something is missing

Open the codespace from your first Markdown project, and have a look at the extensions. Which ones do you have installed on your own system - and which ones do you think we will need to develop our chatbot?

• Let’s try to create and run some python code in our Codespace

1. Devcontainers and devcontainer.json

Devcontainers are a way to define a development environment in a repository. This way, you can ensure that everyone working on the project has the same environment. This is especially useful when working with different programming languages or libraries.

1.1 Delete your Codespace

• Open your repository in Codespaces and make sure that you have pushed all changes to GitHub
• Remove the Codespace

1.2 Add a devcontainer.json file

• Open your repository main page in GitHub
• Click on the Add file button and select Create new file
• Name the file .devcontainer/devcontainer.json

• Copy the following code into the file and commit the changes:

  /*
  * Dev containter configuration file for class HAI- 5014
  * Sungkyunkwan University 2025 Spring Semester - by camphouse.me
  */
  
  {
      "name": "Python 3",
      // Use the official Python 3.11 image as a base
      "image": "mcr.microsoft.com/devcontainers/python:0-3.11-bullseye",
      "features": {
      },
  
      // Configure the Codespaces Machine to use 2 CPUs
      "hostRequirements": {
          "cpus": 2
      },
  
      // Set up python variables in our new container 
      "postStartCommand": "export PATH=/usr/local/python3.11/bin:$PATH",
      
      // Install preferred extensions into VS Code
      "customizations": {
          "vscode": {
          "extensions": [
          "github.copilot",
          "ms-python.python",
          "ms-toolsai.datawrangler",
          "ms-toolsai.jupyter",
          "DavidAnson.vscode-markdownlint",
          "esbenp.prettier-vscode"
          ]
      }
      }
  }
  

1.3 Open the devcontainer

• Open your repository in Codespaces
• Click on the <> Code button and select Codespaces
• Create a new Codespace on main and wait for it to load

The creation of the Codespace will take longer than the first time, because of the extra steps of installing the customization in our devcontainer file. You can check the progress in the bottom left corner of the screen.

Let’s explore the new devcontainer to ensure we have all the necessary extensions to enhance our Markdown file. Make Ctrl + I your go-to shortcut and discover the possibilities with the newly added extensions. See the references below for a cheat sheet on GitHub CoPilot in VS Code.

The Markdown linter extension may override the Ctrl + I shortcut. To resolve this, open the command palette (Cmd + Shift + P or Ctrl + Shift + P) and select Preferences: Open Keyboard Shortcuts. Search for “italic” and remove the conflicting keybinding.

2. Hello Eliza

2.1. Fork Eliza

• Go to wadetb/eliza, the Python implementation of the Eliza chatbot
• Click the Fork button in the top right corner and select create a new fork
• You can proceed with the default settings in the Create a new fork page

2.2. Open the repository in Codespaces

• Open the repository in Codespaces
• Try to run the eliza.py file in the Codespaces terminal

2.3 Implement devcontainer.json

• Delete the Codespace
• Add a .devcontainer/devcontainer.json file to the repository like we did before
• Create a new Codespace and open the eliza.py file

2.4. Hey Copilot, Explain!

• Open the eliza.py and readme.md files in your Codespace
• Open Copilot chat and ask Copilot to explain the code in eliza.py

Homework

For next week:

1. Watch The History of ELIZA - The World’s FIRST Psychiatrist Chatbot and The First Ever AI Chatbot: ELIZA (1966)

2. Improve and complete your Good Chatbot / Bad Chatbot markdown file.

   • Make sure your file is saved as readme.md
   • Well organised and easy to read
   • Put a table of contents at the top of the file
   • Include images and links for vivid and interactive presentation
   • Include a AI generated header
   • Put links to references you used in the bottom of the file so we can check them out easily if we want to know more
   • Make sure there are no spelling mistakes in your file (tip: use CoPilot to help you with this)

References

• GitHub Copilot in VS Code cheat sheet