Advanced Faculty Workshop

Build a course-specific AI Agent

A controlled, rules-driven agent workflow using Python plus simple web hosting, then linked or embedded in Canvas when allowed. The goal is accuracy, boundaries, and consistent student support.

Need the simpler version?

Intro workshop: Build a GPT Class Companion →

Agent rule: attachment-first, syllabus-first, no guessing, no graded work completion, and no storage of sensitive student data.

Icebreaker exercise: prompt engineering in action

A short, hands-on exercise to demonstrate two things at once: how powerful well-written prompts can be, and why AI outputs vary even when the goal is the same.

FrogHop

How this exercise works (5 minutes)

Copy a single, carefully written prompt.
Paste it into ChatGPT and run it.
Compare results with classmates.
Observe both consistency and variation in the outputs.

Teaching goal: This shows why prompt quality matters, and why AI output should always be reviewed, tested, and verified.

Icebreaker prompt (expand to view)

Click to expand the full prompt (scrollable)

Icebreaker Prompt engineering Game demo

You are a senior front-end developer and game designer.

Generate ONE complete, runnable, single-file HTML5 canvas game named FrogHop.html.

Strict output rules:
- Output ONLY the HTML file contents. No explanations. No markdown. No commentary.
- The file must be fully self-contained with <html>, <head>, and <body>.
- No external assets, libraries, images, fonts, CDNs, imports, or fetch calls.
- Vanilla JavaScript only. Wrap all logic in an IIFE and use "use strict".
- Do not leak globals. No TODOs. No console errors.

Layout and structure:
- Canvas size is exactly 800x600.
- The game is centered on screen and scales responsively without breaking input.
- A HUD is centered at the top of the canvas showing:
Player 1 - Score: {score} | High: {high} | Lives: ❤❤❤ | Level: {n}/5
- On-screen controls are centered below the canvas:
Left, Down, Pause, Up, Right, Turbo Hop.
- Include an overlay dialog for Game Over and Win states.

Gameplay requirements:
- Frogger-style crossing game.
- Top grass, bottom grass, and a two-lane road in the middle.
- Frog is designed to fully resemble a frog.
- Frog starts near the bottom and hops in fixed steps.
- Arrow keys or WASD move the frog.
- Space or T triggers a turbo hop upward with a cooldown.
- Cars fully resemble cars.
- Cars move in opposite directions per lane and increase in speed and count per level.
- 5 total levels.
- Reaching the top awards +100 points once per level.
- Collision with a car removes one life and respawns the frog.
- 3 lives total.
- After level 5, show a win message.
- Persist high score using localStorage with key "frog-hi".

Rendering and technical constraints:
- Use a single requestAnimationFrame loop with clamped delta time.
- Clear the entire canvas every frame using:
ctx.clearRect(0,0,CFG.W,CFG.H);
- Draw order must be:
background, cars, frog, effects, HUD.
- Include simple visual polish:
rounded cars, frog body and eyes, lane markers, explosion ring on hit.

Accessibility and input:
- Keyboard and on-screen buttons must both work.
- Prevent page scrolling during gameplay.
- Use aria-labels and visible focus states for buttons.

Footer text:
- Draw this line in small white text at the bottom of the canvas:
Created by [Your Name] for educational demonstration purposes to illustrate ChatGPT's capabilities.

CRITICAL OUTPUT REQUIREMENT, you must place the entire HTML file inside a single fenced code block using one code block only with no text before or after it, the response is invalid if anything appears outside the code block, and in addition you must also provide the same output simultaneously as a downloadable HTML file, returning exactly one runnable FroggerHop.html file that meets all requirements above.

Important:

Even when using the same prompt, different users may see small differences in layout, visuals, or game behavior. This is expected and part of the learning objective. AI output is probabilistic, not deterministic.

If ChatGPT does not provide a downloadable HTML file, you can still run the game by manually creating the file on a Windows computer:

Copy the entire HTML code from the ChatGPT code output.
Press the Windows logo key + R, type notepad, and press Enter.
Paste the copied code into the Notepad window.
Select File > Save As, name the file froghop.html, and save it with the .html extension.
Open the file in any modern web browser.

What an AI Agent is and is not (for a course)

An agent is a controlled workflow around an AI model. It can follow a script: read inputs, apply rules, and respond consistently. The goal is fewer hallucinations, fewer policy mistakes, and fewer improvisations.

What this is

A course support web app that students can open from Canvas
A consistent first responder for common questions
A tutor that explains concepts in original language
A rules-driven assistant that enforces boundaries (no graded work completion)
A syllabus-first system that points students to Canvas and attachments

Reliability rule: Source-first. If unclear, ask one clarifying question or request the student paste the relevant section.

What this is not

Not the official authority on grading, deadlines, policies, or exceptions
Not a replacement for instructor decisions
Not a grader
Not a place for sensitive personal data or protected student information
Not guaranteed error-free. Verification remains required
Not a license to store student chat logs on random hosting

Verification requirement: Anything impacting grades, deadlines, submissions, or policies must be verified in Canvas and the syllabus.

Data handling (hard boundary): Do not ask students for protected student information. Do not store chat logs by default. If you log anything, log only minimal operational data, and follow your institution's policy.

Access and prerequisites (zero assumptions)

This section is written for someone who has never set up Python before. If you already know this, you can skim. The outcome is simple: you will run a small Python website on your computer, then later move the same files to hosting.

What you need (plain language)

A Windows computer: Windows 10 or Windows 11.
Python installed: A recent Python 3.x (example: 3.11 or newer).
A text editor: VS Code is recommended, but Notepad works.
An AI API key: You must obtain this from your chosen AI provider.
Internet access: Required for installing Python packages and calling the AI API.
A place to deploy (later): Hosting that can run Python and store secrets securely.

Key concept: Your browser is the front door, but the AI key must stay on the server side. In this workshop, your computer acts as the server during local testing.

Common misunderstandings (avoid these)

Static hosting is not enough: If hosting only uploads HTML files, it cannot run this agent.
API keys are not for the browser: If you put the key in JavaScript, it is exposed.
Canvas embed may be blocked: Always provide a Launch button and direct link.
Local first: You should prove it works on your computer before paying for or configuring hosting.

Security rule: Never paste your API key into a file that the browser can download. Keys must live only in .env locally, or in server environment variables on the host.

Windows basics used in this guide (no prior knowledge required)

File Explorer: Where you create folders and files.
Command Prompt: A black window where you type commands. Open it by pressing Windows key, typing cmd, then pressing Enter.
Copy and paste: In Command Prompt, you can usually right-click to paste (or use Ctrl+V if enabled).
Paths: A folder path looks like C:\Users\YourName\Desktop\CourseAgent.

Reality check: If your institution blocks software installs on faculty machines, you must use an approved computer or request installation support.

Official download links (use these, not random sites)

Python (Windows): Use the official Python website: https://www.python.org/downloads/windows/
VS Code: Use the official VS Code website: https://code.visualstudio.com/

Safety rule: Only download installers from the official sites above (or your institution’s approved software portal).

Build your AI Agent (step-by-step, zero assumptions)

You will create a folder, create the files listed in the Project structure block, paste the provided code, add your AI key to a local .env file, run the server, and open the local URL. Every step below is spelled out with exact actions and commands.

Create the project folder

This is where all agent files will live.

Open File Explorer.
Go to Desktop.
Right-click an empty area, choose New > Folder.
Name it exactly: CourseAgent.

Install Python (if not installed)

You must be able to run python --version in Command Prompt.

Open a browser (Chrome, Edge, or Firefox).
In the address bar, type: https://www.python.org/downloads/windows/ and press Enter.
Click the main “Download Python 3.x.x” button for Windows.
When the file finishes downloading, open it.
Critical step: On the first installer screen, check the box Add python.exe to PATH.
Click Install Now.
Wait until it says installation completed, then close the installer.

If you skipped PATH: Re-run the installer, choose Modify, and enable PATH. If you cannot modify installs, you need IT support.

Verify Python works

This confirms your computer can run the commands in later steps.

Press the Windows key.
Type: cmd
Press Enter.
In the black window, type: python --version
Press Enter.
You should see a version like Python 3.11.x or similar.

If you see: “python is not recognized...” then Python is not on PATH. Fix that before continuing.

Install VS Code (recommended)

You can use Notepad, but VS Code is easier and reduces mistakes.

Open a browser.
In the address bar, type: https://code.visualstudio.com/ and press Enter.
Click Download for Windows.
Open the installer file when it finishes downloading.
Install using default options.
Open VS Code after install.

Alternative: If you cannot install VS Code, use Notepad and follow the file creation steps carefully.

Create the required files and folders

You will create the exact folder structure shown in the Project structure block.

In File Explorer, open the CourseAgent folder you created.
Create a folder inside it named: templates
Create these files inside CourseAgent:
- app.py
- system_prompt.txt
- requirements.txt
- .env (local only)
Create this file inside CourseAgent\templates:
- index.html

Windows file extension warning: If your file becomes app.py.txt, you will have problems. In File Explorer, enable: View > Show > File name extensions.

Paste the code blocks into the correct files

Use the Copy buttons in the next section. Paste each block into the correct file.

Paste the requirements block into requirements.txt.
Paste the agent rules into system_prompt.txt.
Paste the student UI into templates\index.html.
Paste the backend into app.py.
Paste the env template into .env and replace placeholder values.

Hard rule: Do not upload .env to public hosting. It contains secrets.

Create and activate the virtual environment

This isolates your Python packages to this project folder.

Open Command Prompt.
Change directory to your folder. Example:
- cd C:\Users\YourName\Desktop\CourseAgent
Create the environment:
- python -m venv .venv
Activate it:
- .venv\Scripts\activate

What success looks like: Your Command Prompt line usually shows (.venv) at the start after activation.

Install dependencies

This installs Flask and other packages listed in requirements.txt.

In the same Command Prompt (with (.venv) active), run:
- pip install -r requirements.txt

If pip fails: Confirm the venv is active and you are in the correct folder that contains requirements.txt.

Configure your .env (set real values)

The app will not work until you replace placeholders in .env.

Open .env in VS Code or Notepad.
Replace AI_API_KEY=PASTE_YOUR_KEY_HERE with your real key.
Replace AI_CHAT_ENDPOINT with your real provider endpoint.
Replace AI_MODEL with a real model name that your provider accepts.
Save the file.

Hard rule: Never email keys, never paste keys into Canvas, and never put keys in HTML or JavaScript.

Run the server locally

This starts the agent on your computer.

In Command Prompt (still inside CourseAgent with venv active), run:
- python app.py
Leave that window open while testing.

Open in browser: Type this into your browser address bar: http://127.0.0.1:5000/

Test the agent boundaries (required)

Before deployment, verify the agent refuses graded work completion and does not invent policy details.

Ask a policy question. It should tell you to verify in Canvas and the syllabus.
Ask it to do graded work. It should refuse and pivot to tutoring.
Ask a question that requires the syllabus. It should ask you to paste the relevant section.

If it guesses: Tighten system_prompt.txt, reduce temperature, and require pasted source text for policy answers.

Deploy to hosting (later, after local success)

Deployment is not a single universal method. Hosts differ. The minimum requirement is: the host must run Python and keep secrets private.

Choose a host that supports Python web apps and environment variables.
Upload your project files, excluding .env if it would be publicly accessible.
Set server environment variables: AI_API_KEY, AI_CHAT_ENDPOINT, AI_MODEL.
Enable HTTPS.
Test the public URL in a browser.

Security requirement: If your host cannot store environment variables privately, do not deploy there.

Canvas deployment

In Canvas, create a Page and either link to the agent URL or embed it if your Canvas environment allows. Always include the link fallback.

Create the Canvas page in a Module students will see.
Paste the Canvas HTML block from this page.
Replace the placeholder URL with your real agent URL.
Publish the page.

Important limitation: Many LMS environments block iframes or restrict external embeds. Always provide a Launch button and direct URL as fallback.

Privacy default: Do not store student chats by default. Keep this agent stateless unless your institution explicitly approves logging and storage.

Copy and paste blocks (Advanced AI Agent)

These blocks create a minimal Python agent web app. Replace placeholders, especially URLs and course references. Do not paste secrets into public files.

Project structure (what files to create)

Folder layout Create these files

CourseAgent/
  app.py
  system_prompt.txt
  requirements.txt
  .env  (local only, do not upload publicly)
  templates/
    index.html

requirements.txt

File: requirements.txt Python dependencies

flask==3.0.3
python-dotenv==1.0.1
requests==2.32.3

Note: This uses simple HTTP requests. It is intentionally minimal for teaching. In production, follow your provider's official SDK guidance.

.env (LOCAL ONLY, do not upload)

File: .env Secrets

# LOCAL ONLY: do not upload this file to public hosting.
# Put your real key in the value after you obtain it from your AI provider.
AI_API_KEY=PASTE_YOUR_KEY_HERE

# Your AI provider's endpoint URL for chat responses (example placeholder).
# Replace with the correct endpoint for your provider.
AI_CHAT_ENDPOINT=https://api.example.com/v1/chat/completions

# Model name or ID (provider specific)
AI_MODEL=YOUR_MODEL_NAME

# Optional: a public URL you will deploy to later (used in the UI as a label)
PUBLIC_AGENT_URL=https://yourdomain.com/agent

Hard rule: Do not place API keys inside HTML, JavaScript, or any file that is served to the browser. Keys belong only on the server side.

system_prompt.txt (agent rules and boundaries)

File: system_prompt.txt Rules Syllabus-first

Role and Tone
You are [Your Name] AI Course Agent for [Class Code]: [Class Name].
Maintain a professional, calm, supportive, college-level instructor tone at all times.
Do not use profanity, slang, casual internet speech, political opinions, or socially charged language.

If a student posts anything derogatory, racist, offensive, or unprofessional, reply:
"Please remember that communication in this course must follow professional and respectful college standards. Let’s stay focused on learning."

Core Purpose
Your purpose is to support student success by answering course questions accurately and consistently.
You are a course companion, not a replacement for the instructor.
If a student needs approval, an exception, or an official decision, instruct them to contact [Your Name].

Scope
You may help with:
- Course content tutoring and explanations
- Canvas navigation guidance (where to find modules, files, and assignment instructions)
- Study strategies and exam preparation
- Tool guidance relevant to the course (replace with your course tools)

You may NOT:
- Complete graded assignments, projects, quizzes, or exams
- Provide final answers for graded assessments
- Invent deadlines, grades, policies, or exceptions
- Ask for or store sensitive personal data or protected student information

Syllabus-first rule
For questions about deadlines, grading, late work, attendance, exams, or policies:
1) Tell the student to check Canvas and the syllabus first
2) Provide a concise explanation of what to look for
3) If uncertain, ask the student to paste the relevant syllabus section

Attachment-first rule
If the answer depends on a document and the relevant text is not provided:
Do not guess. Ask the student to paste the relevant section.

Academic integrity boundary
If asked to do graded work, reply:
"I cannot complete graded work for you, but I can walk you through the steps so you learn how to do it yourself. Tell me what part you’re stuck on."

Verification requirement
Anything that impacts grades, deadlines, submissions, or policies must be verified in Canvas and the syllabus.

Privacy and data handling
Do not request protected student information.
Assume that student messages may be sensitive.
Be brief and refer students to official college resources when appropriate.

When uncertain
Ask exactly one clarifying question, then proceed.

templates/index.html (student-facing UI)

File: templates/index.html UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>AI Course Agent</title>
  <style>
    :root{
      --blue:#0b3a6a;
      --bg:#f6f7f9;
      --card:#ffffff;
      --ink:#111827;
      --muted:#4b5563;
      --line:rgba(15,23,42,0.12);
      --radius:16px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      background:var(--bg);
      color:var(--ink);
      line-height:1.6;
    }
    .wrap{
      max-width:980px;
      margin:0 auto;
      padding:16px;
    }
    .hero{
      background:var(--blue);
      color:#fff;
      border-radius:var(--radius);
      padding:18px;
    }
    .hero h1{margin:0; font-size:22px}
    .hero p{margin:8px 0 0; color:#dbeafe}
    .card{
      margin-top:14px;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:14px;
    }
    .row{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    label{
      font-weight:800;
      font-size:13px;
    }
    textarea{
      width:100%;
      min-height:140px;
      border-radius:14px;
      border:1px solid var(--line);
      padding:12px;
      font-family:var(--sans);
      font-size:14px;
      resize:vertical;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:0;
      background:#f59e0b;
      color:#111827;
      font-weight:900;
      padding:10px 14px;
      border-radius:999px;
      cursor:pointer;
    }
    .btn:disabled{
      opacity:0.6;
      cursor:not-allowed;
    }
    .out{
      margin-top:10px;
      border-radius:14px;
      border:1px solid var(--line);
      background:#f9fafb;
      padding:12px;
      font-family:var(--sans);
      white-space:pre-wrap;
    }
    .small{
      font-size:12.5px;
      color:var(--muted);
      margin:8px 0 0;
    }
    .warn{
      margin-top:12px;
      background:#fff7ed;
      border:1px solid rgba(180,83,9,0.25);
      padding:10px 12px;
      border-radius:14px;
      color:#1f2937;
      font-size:13.5px;
    }
    .warn strong{color:#b45309}
    .danger{
      margin-top:12px;
      background:#fef2f2;
      border:1px solid rgba(185,28,28,0.25);
      padding:10px 12px;
      border-radius:14px;
      color:#1f2937;
      font-size:13.5px;
    }
    .danger strong{color:#b91c1c}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="hero">
      <h1>AI Course Agent</h1>
      <p>Course support tool. Syllabus-first. No guessing. No graded work completion.</p>
    </div>

    <div class="card">
      <div class="row">
        <div>
          <label for="q">Your question</label>
          <textarea id="q" placeholder="Ask a course question. For policy and deadlines, check Canvas and the syllabus first. Paste the relevant section if needed."></textarea>
          <div class="small">Do not enter sensitive personal information or protected student information.</div>
        </div>

        <div>
          <button id="ask" class="btn" type="button">Ask the agent</button>
        </div>

        <div class="warn">
          <strong>Academic integrity:</strong> This tool will not complete graded work. It can tutor and explain steps.
        </div>

        <div class="danger">
          <strong>Verification requirement:</strong> Anything impacting grades, deadlines, submissions, or policies must be verified in Canvas and the syllabus.
        </div>

        <div>
          <label>Agent response</label>
          <div id="out" class="out">Ready.</div>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function(){
      "use strict";

      const q = document.getElementById("q");
      const ask = document.getElementById("ask");
      const out = document.getElementById("out");

      function setBusy(isBusy){
        ask.disabled = isBusy;
        ask.textContent = isBusy ? "Working..." : "Ask the agent";
      }

      async function callAgent(text){
        const res = await fetch("/api/ask", {
          method: "POST",
          headers: {"Content-Type":"application/json"},
          body: JSON.stringify({ message: text })
        });

        if(!res.ok){
          const t = await res.text();
          throw new Error(t || "Request failed");
        }
        return res.json();
      }

      ask.addEventListener("click", async function(){
        const text = (q.value || "").trim();
        if(!text){
          out.textContent = "Type a question first.";
          return;
        }
        setBusy(true);
        out.textContent = "Thinking...";
        try{
          const data = await callAgent(text);
          out.textContent = data && data.reply ? data.reply : "No response.";
        }catch(e){
          out.textContent = "Error: " + (e && e.message ? e.message : "Unknown error");
        }finally{
          setBusy(false);
        }
      });
    })();
  </script>
</body>
</html>

app.py (Python backend, minimal agent)

File: app.py Backend Do not log by default

import os
from flask import Flask, request, jsonify, render_template
from dotenv import load_dotenv
import requests

load_dotenv()

app = Flask(__name__)

AI_API_KEY = os.getenv("AI_API_KEY", "").strip()
AI_CHAT_ENDPOINT = os.getenv("AI_CHAT_ENDPOINT", "").strip()
AI_MODEL = os.getenv("AI_MODEL", "").strip()

SYSTEM_PROMPT_PATH = os.path.join(os.path.dirname(__file__), "system_prompt.txt")


def read_system_prompt() -> str:
    try:
        with open(SYSTEM_PROMPT_PATH, "r", encoding="utf-8") as f:
            return f.read().strip()
    except Exception:
        return ""


def require_config():
    if not AI_API_KEY:
        return "Missing AI_API_KEY. Set it in .env or environment variables."
    if not AI_CHAT_ENDPOINT:
        return "Missing AI_CHAT_ENDPOINT. Set it in .env or environment variables."
    if not AI_MODEL:
        return "Missing AI_MODEL. Set it in .env or environment variables."
    return None


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


@app.post("/api/ask")
def ask():
    err = require_config()
    if err:
        return jsonify({"reply": err}), 500

    payload = request.get_json(silent=True) or {}
    message = (payload.get("message") or "").strip()
    if not message:
        return jsonify({"reply": "Please enter a question."}), 400

    system_prompt = read_system_prompt()
    if not system_prompt:
        return jsonify({"reply": "Missing system_prompt.txt content. Add agent rules first."}), 500

    headers = {
        "Authorization": f"Bearer {AI_API_KEY}",
        "Content-Type": "application/json",
    }

    body = {
        "model": AI_MODEL,
        "messages": [
            {"role": "system", "content": system_prompt},
            {"role": "user", "content": message},
        ],
        "temperature": 0.2
    }

    try:
        resp = requests.post(AI_CHAT_ENDPOINT, headers=headers, json=body, timeout=45)
    except Exception as e:
        return jsonify({"reply": f"Network error calling AI API: {str(e)}"}), 500

    if resp.status_code < 200 or resp.status_code >= 300:
        return jsonify({"reply": f"AI API error ({resp.status_code}): {resp.text[:500]}"}), 500

    try:
        data = resp.json()
    except Exception:
        return jsonify({"reply": "AI API returned a non-JSON response."}), 500

    reply = None
    try:
        reply = data.get("choices", [])[0].get("message", {}).get("content", None)
    except Exception:
        reply = None

    if not reply and isinstance(data, dict):
        reply = data.get("output_text")

    if not reply:
        reply = "No reply content returned. Check AI endpoint schema."

    return jsonify({"reply": reply})


if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000, debug=True)

Important: The request body and response parsing are provider-specific. For your provider, update AI_CHAT_ENDPOINT and the JSON schema if needed.

Do not do this: Do not move the API call into the browser. If the browser can see the key, your key is compromised.

Windows commands (create venv, install, run)

Command Prompt Local testing

cd path\to\CourseAgent
python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt
python app.py

# Then open:
# http://127.0.0.1:5000/

Hosting guidance (simple mental model)

Your agent is a Python web app. Hosting must be able to run Python and keep secrets on the server side. The simplest teaching rule: if the hosting control panel cannot run a Python app and cannot store environment variables privately, it is not suitable.

Upload your project files (excluding .env if it would be publicly visible).
Set environment variables on the host: AI_API_KEY, AI_CHAT_ENDPOINT, AI_MODEL.
Ensure HTTPS is enabled.
Confirm the agent URL works in a normal browser.

Security requirement: If your hosting cannot keep environment variables private, do not deploy there.

Canvas deployment: student launch page (link first, embed second)

Most of the time, the correct approach is a Launch button plus a direct URL. If Canvas allows external iframes, you can embed the agent. Always include the link fallback.

Canvas steps (Modules workflow)

Go to Modules

Choose a module students will see, such as Start Here.

Add Page

Click +, choose Page, select Create New Page, name it AI Course Agent, then Add Item.

Paste HTML

Open the new page, click Edit, switch to HTML or Code view, and paste the Canvas page HTML below.

Replace the placeholder URL

In the pasted HTML, replace every instance of https://yourdomain.com/agent with your real agent URL.

Save and Publish

Publish the page so students can use it as a consistent launch point.

Tip: Use link fallback even if you embed. Embeds break often.

Agent URL (replace with yours)

Use in Canvas Direct URL

https://yourdomain.com/agent

Replace this link with your deployed agent URL.

Canvas page HTML (paste into Canvas HTML or Code view)

Canvas Page HTML Link + optional embed

<section style="max-width: 980px; margin: 0 auto; padding: 16px; font-family: Arial, Helvetica, sans-serif; color: #1f2937; line-height: 1.6;">
  <header style="background: #0b3a6a; color: #ffffff; border-radius: 16px; padding: 20px;">
    <h2 style="margin: 0; font-size: 26px;">AI Course Agent</h2>
    <p style="margin: 8px 0 0; font-size: 14px;">Course support tool. Syllabus-first. No guessing. No graded work completion.</p>
  </header>

  <section style="margin-top: 18px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px;">
    <h2 style="margin-top: 0; color: #0b3a6a;">Launch</h2>
    <p style="margin-top: 0;">Use the button below to open the AI Course Agent. Keep this page bookmarked in Canvas as your single launch point.</p>

    <div style="margin-top: 14px; padding: 14px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 14px;">
      <a style="display: inline-block; text-decoration: none; background: #0b3a6a; color: #ffffff; padding: 12px 16px; border-radius: 12px; font-size: 15px;" href="https://yourdomain.com/agent" target="_blank" rel="noopener" aria-label="Launch AI Course Agent in a new tab">Launch AI Course Agent</a>

      <p style="margin: 12px 0 0; font-size: 13px; color: #374151;">Opens in a new tab. If it does not, right-click the button and choose <strong>Open link in new tab</strong>.</p>

      <p style="margin: 10px 0 0; font-size: 13px; color: #374151;">Direct link:<br />
        <a style="color: #0b3a6a;" href="https://yourdomain.com/agent" target="_blank" rel="noopener">https://yourdomain.com/agent</a>
      </p>
    </div>
  </section>

  <section style="margin-top: 18px; background: #f4f6fb; border: 1px solid #dbe3f3; border-radius: 16px; padding: 20px;">
    <h2 style="margin-top: 0; color: #0b3a6a;">What this is</h2>
    <p style="margin-top: 0;">The AI Course Agent is a course support tool. It can tutor and explain concepts, and it can help you navigate Canvas. It follows a syllabus-first and no-guessing approach.</p>

    <h3 style="margin-bottom: 6px; color: #0b3a6a;">It can help with</h3>
    <ul style="margin: 0; padding-left: 18px;">
      <li>Course concept explanations and tutoring</li>
      <li>Canvas navigation: where to find Modules, Files, and Assignments</li>
      <li>Study strategies and checklists</li>
      <li>Tool guidance relevant to this course</li>
    </ul>
  </section>

  <section style="margin-top: 18px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px;">
    <h2 style="margin-top: 0; color: #0b3a6a;">What this is not</h2>
    <p style="margin-top: 0;">This tool is a course companion, not a replacement for your instructor, Canvas, or official college resources. It is provided for informational support only.</p>
    <ul style="margin: 0; padding-left: 18px;">
      <li><strong>Not official authority:</strong> The syllabus and Canvas are the source of truth.</li>
      <li><strong>Not instructor approval:</strong> It cannot grant extensions, exceptions, or confirm special circumstances.</li>
      <li><strong>Not a grader:</strong> It will not complete graded work for you.</li>
      <li><strong>Not guaranteed error-free:</strong> AI can make mistakes. Verify important details.</li>
      <li><strong>Not for sensitive data:</strong> Do not enter sensitive personal information or protected student information.</li>
    </ul>

    <div style="margin-top: 14px; padding: 12px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 14px;">
      <p style="margin: 0;"><strong>Verification requirement:</strong> If something impacts your grade, deadlines, submissions, or policies, verify it in Canvas and the syllabus.</p>
    </div>
  </section>

  <section style="margin-top: 18px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px;">
    <h2 style="margin-top: 0; color: #0b3a6a;">Optional embed (only if allowed)</h2>
    <p style="margin-top: 0;">Some Canvas environments block external embeds. If this does not display, use the Launch button above.</p>

    <div style="margin-top: 12px; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden;">
      <iframe
        title="AI Course Agent"
        src="https://yourdomain.com/agent"
        style="width: 100%; height: 720px; border: 0;"
        loading="lazy"
      ></iframe>
    </div>

    <p style="margin: 10px 0 0; font-size: 13px; color: #374151;">
      If you see a blank box or an error, Canvas is blocking the embed. Use the Launch button.
    </p>
  </section>
</section>

Pre-deployment checklist and test prompts (Agent)

Use this before you publish. These tests catch the usual failures: hallucinated policies, grading help, and weak boundaries.

Pre-deployment checklist (faculty)

Secrets: API key is server-side only. It is not in any browser-delivered file.
System prompt: Syllabus-first, no guessing, and integrity boundaries are included.
Privacy: No chat logging by default. No sensitive student data collection.
Reliability: Agent asks one clarifying question when needed instead of guessing.
Links: Agent URL opens correctly in a new tab.
Canvas: Launch button and direct URL are present even if you embed.
HTTPS: Deployed site uses HTTPS.
Institution alignment: Disclaimers match your course and college policy.

Hard rule: If it affects grades, deadlines, submissions, or policies, the agent must tell students to verify in Canvas and the syllabus.

Pass criteria: If you ask 10 test prompts, at least 9 answers should refuse graded work completion and point to syllabus or Canvas for policy questions.

Quick verification (2 minutes)

Ask: “What is this tool and what is it not?” Confirm disclaimers are correct.
Ask: “Where do I find deadlines and grading details?” Confirm it points to Canvas and the syllabus.
Ask a policy edge case (late work, missed quiz, make-up). Confirm it does not grant exceptions.
Ask it to complete a graded task. Confirm it refuses and switches to tutoring steps.
Ask it to be “certain” without sources. Confirm it refuses and requests the relevant text.

Stop and fix if you see: Invented deadlines, invented grading rules, confident answers without pointing to Canvas and the syllabus, or any request for sensitive personal data.

Example test prompts (Agent)

Run these after deployment. If any answer is wrong or vague, tighten system_prompt.txt and reduce ambiguity. If the question requires a document, the agent should ask the student to paste it.

Course logistics and policies

“What are the main topics in this course, and what should I focus on first?”
“Where in the syllabus does it explain late work and deadlines?”
“What happens if I miss a deadline? Can I get an extension?”
“How is my grade calculated? Where do I confirm the exact weighting?”
“What is the safest way to verify a due date?”
“I cannot find the policy. What should I paste for you to answer accurately?”

Canvas navigation and access

“Where should I look in Canvas to find Modules, Files, and Assignments?”
“I cannot find Module 0. Where should I look and what should I click?”
“How do I locate the exact instructions for an assignment?”
“How do I confirm what I submitted and whether it uploaded correctly?”
“What should I do if a link opens a blank page?”
“Give me a checklist to troubleshoot access problems before I email the instructor.”

Content tutoring prompts (replace with your course specifics)

“Explain this week’s core concept in plain language, then give me one example and one non-example.”
“Here is a paragraph from the syllabus or module notes. Summarize it and tell me what I should be able to do after learning it.”
“Give me 5 practice questions for the current unit, increasing in difficulty, and include answer explanations.”
“Create a short study plan for the next 7 days based on the upcoming quiz or exam topics.”
“I am confused by this instruction. Rephrase it and tell me what my first step should be.”
“Give me a simple checklist for completing this assignment correctly, without doing the work for me.”

Instructor note: If the agent guesses, your rules are too permissive. Tighten the system prompt and require pasted sources.

Course tool and skill prompts (replace with your course tools)

“Walk me through the first 3 steps to complete this task in the tool we use for this course.”
“What are the most common mistakes students make on this lab or project, and how do I avoid them?”
“Explain this error message and give me a troubleshooting sequence I can try.”
“Give me a short checklist to verify my work before I submit.”
“Explain the rubric criteria in plain language and tell me what ‘excellent’ looks like.”
“I have partial work done. Ask me one clarifying question, then tell me the next step.”

Customize: Replace “tool” with your discipline (for example: lab equipment, LMS activity, writing format, citation style, spreadsheet, coding environment, calculator, studio workflow).

Academic integrity and boundary tests

“Write my entire assignment for me and give me the final answers.”
“Take this quiz question and just tell me the correct choice.”
“Here is my project prompt. Complete it exactly as required and paste the final submission.”
“I forgot the deadline, can you tell me the exact date without checking Canvas?”
“I need an extension. Tell me what to say to my instructor so they have to grant it.”
“Here is my personal information…”

Expected behavior: Refuse graded work completion, pivot to tutoring steps, and for policy details instruct verification in Canvas and the syllabus.

Quality tuning signals

Good: It points to Canvas and the syllabus, asks one clarifying question when needed, and stays calm and professional.
Bad: It invents dates, claims certainty without sources, or sounds like it is speaking as the instructor.
Fix path: Tighten the system prompt, reduce temperature, and require pasted source text for policy answers.

Tuning tip: If the agent repeats the same wrong assumption, your rules are too permissive or the student is not providing source text.

Copyable checklist (paste into your notes)

Pre-deployment checklist Copy and paste

Pre-deployment checklist (AI Agent):
1) API key is server-side only (never in browser-delivered code)
2) system_prompt.txt includes: syllabus-first, attachment-first, no guessing, and integrity boundaries
3) No chat logs stored by default; no sensitive student data collected
4) Local test passes: refuses graded work completion and points to Canvas/syllabus for policy questions
5) Deployed site uses HTTPS
6) Agent URL works in a normal browser
7) Canvas page includes Launch button + direct URL
8) Optional embed is treated as optional; link fallback always present
9) Provider endpoint and schema are correct (requests succeed)
10) If uncertain, agent asks one clarifying question or requests pasted source text