Meeting 4: Building a ChatGPT-Powered Chatbot for Canvas

Announcements

None today. Hurray!

Goals

  • Understand how to use OpenAI’s API
  • Create a Python wrapper for a chatbot
  • Serve the chatbot with a Flask web app
  • Add a simple browser UI for interaction
  • Explore Canvas integration options

Codespace Setup

You can use this Codespace template to quickly set up your development environment.

Project Layout

canvas-chatbot/
├── .env
├── app.py
├── chatbot.py
├── requirements.txt
├── templates/
│   └── index.html
└── .devcontainer/
    └── devcontainer.json

Chatbot Wrapper (Python)

chatbot.py:

import openai, os

system_prompt = "You are a helpful teaching assistant for an Intro to Python course..."
openai.api_key = os.getenv("OPENAI_API_KEY")

def ask_chatbot(prompt, system_role=system_prompt):
    response = openai.ChatCompletion.create(
        model="gpt-4o",
        messages=[
            {"role": "system", "content": system_role},
            {"role": "user", "content": prompt}
        ]
    )
    return response['choices'][0]['message']['content']

Flask API + Web UI

app.py:

from flask import Flask, request, jsonify, render_template

@app.route("/")
def home():
    return render_template("index.html")

@app.route("/chat", methods=["POST"])
def chat():
    user_input = request.json.get("message", "")
    response = ask_chatbot(user_input)
    return jsonify({"response": response})

Simple Web Interface

templates/index.html:

<textarea id="question"></textarea>
<button onclick="askBot()">Ask</button>
<div id="response"></div>

<script>
async function askBot() {
  const res = await fetch("/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message: document.getElementById("question").value })
  });
  const data = await res.json();
  document.getElementById("response").innerText = data.response;
}
</script>

Run & Test

Open in browser:

Ask questions like: - “How do I print Hello World 100 times?”

Canvas Integration

Embed via iframe or page

You can embed this tool in a Canvas Page using an <iframe> if hosted publicly. We will need to investigate the best method to do this or look at Canvas LTI integrations.

<iframe src="LINK" width="100%" height="500"></iframe>

💡 Use Case Ideas

  • Answer syllabus questions
  • Give Canvas navigation help
  • Explain assignment expectations
  • Act as a Python tutor

Summary

You created a Codespaces-ready project for deployment or Canvas use.