AI Watercooler – Lower Thirds

Lower Thirds App

After Hours

10am Pacific  |  1pm Eastern  |  1700 UTC  |  6pm UK  |  7pm Central Europe

On Friday July 17th our AI Watercooler session will be holding an AI Coding lab that will show you the basics, and we’ll build a web page that can shows a broadcast style lower third that you can use with OBS or other software. You’ll also be shown security tips and keeping your code safe, in case you make mistakes in the code and want to go back to an older version or want to keep a copy online for backup or to share with others.

I’ll be available from straight after today’s Office Hours show to help people with the prerequisites and setup before the watercooler session starts two hours later.

Prerequisites

Accounts

  • A ChatGPT or Claude account ($20 tier or higher)
  • A free GitHub account

To join in with the lab and create your own app, you’ll need either a Chat GPT or Claude account. The $20/plans are sufficient to get you started and you can cancel before the second month if you like.

You’ll also need a GitHub account, which is free. Creating this in advance will save time during the lab. No prior knowledge is needed, although there is a four minute video at https://www.youtube.com/watch?v=e9lnsKot_SQ that will take you through the basics.

Complete these steps before the lab. If you have issues with this, pop into After Hours and ask for help

Installations

For Mac

Homebrew — Makes installing command-line tools on macOS easier
Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Git — Version control for communicating with GitHub
Terminal (Homebrew):

brew install git

Claude Code — Install Claude Code
Terminal:

curl -fsSL https://claude.ai/install.sh | bash

GitHub CLI — This will make authenticating with GitHub easier
Terminal (Homebrew):

brew install gh
For Windows

Git — Version control for communicating with GitHub
Command Prompt: 

winget install --id Git.Git -e --source winget

Claude Code — Install Claude Code
Launch Command Prompt as an Administrator
Install Claude Code: 

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Update PATH: 

setx PATH "%PATH%;%USERPROFILE%\.local\bin"

Restart Command Prompt to load new PATH

GitHub CLI — This will make authenticating with GitHub easier
Command Prompt: 

winget install --id GitHub.cli

Here is the text to paste into your AI coding agent to get started :


Create a single file called index.html that shows a broadcast-style lower third: a name and a title that slide in over a coloured bar in the lower left of the screen, hold, then slide out. The page background must be fully transparent so it could be keyed over video. Add keyboard controls: press I to animate the graphic in, press O to animate it out. Add a button in the top-right corner that toggles the page background between transparent and a grey checkerboard so I can preview the transparency. Put all HTML, CSS and JavaScript in this one file and use no external libraries.

We then extended the app with the following prompts :

Update the page to allow the name and title of the lower third to be changed


Update the page to allow the controls to be hidden with the "h" key and shown with the "s" key