Meeting 4: Building a ChatGPT-Powered Chatbot for Canvas

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.