Welcome

Welcome to Workshop 6 of Web Architecture. Today we are shifting gears from writing every single line of code by hand to learning how to collaborate with Agentic AI.

Over the past few years, AI in software engineering has evolved rapidly:

In this workshop, you will set up Google Antigravity inside VS Code, establish strict safety guardrails using an AGENTS.md file, and task the agent with building a live MQTT temperature sensor dashboard.

Installing VS Code and Google Antigravity

Unlike the previous workshop where we edited files directly on the PiCloud using nano, agentic workflows work best inside a modern Integrated Development Environment (IDE). We've been using Visual Studio Code (VS Code) as our IDE for this class and in this session we are going to add the Google Antigravity extension.

  1. If you don't already have it installed, download and install VS Code for your operating system.
  2. Open VS Code and click on the Extensions icon on the left-hand activity bar (or press Ctrl+Shift+X on Windows / Cmd+Shift+X on Mac).
  3. Search for Google Antigravity and click Install.
  4. Once installed, click the Antigravity icon in your sidebar and follow the prompts to authenticate with your account.

*(Optional: If you want to develop directly on your PiCloud node using VS Code, you can also install the Remote - SSH extension by Microsoft, which lets VS Code and Antigravity connect directly to your pi@10.129.111.X server!)*

Initialize Your Project & Git Safety Net

Before letting an AI agent touch your files, your number one rule is: Commit your work often! Using Git ensures that if the agent hallucinates or breaks your working application, you can easily view the "diff" (the exact lines of code that changed) and roll back to a working state if something breaks.

Open the integrated terminal inside VS Code (Ctrl+\` or Terminal > New Terminal) and create a new project folder:

mkdir ~/mqtt-dashboard
cd ~/mqtt-dashboard

Now, initialize a new Git repository so we can track everything the agent does:

git init

Open this folder in VS Code by selecting File > Open Folder... and choosing your new mqtt-dashboard directory.

The "Lethal Trifecta" of AI Agents

As you learned in the lecture, security researcher Simon Willison identified the Lethal Trifecta of AI agent risks:

  1. Access to Private Data (e.g., your .env (environment) files, passwords, and API keys).
  2. Exposure to Untrusted Content (e.g., reading a random GitHub README or external documentation).
  3. Ability to Externally Communicate (e.g., running network commands or making HTTP requests).

If an agent has all three, a malicious instruction hidden inside a webpage or README could trick the agent into reading your private credentials and sending them to an external server. Furthermore, some self-improving agents can edit their own instruction files—leading to memory poisoning, where untrusted content becomes a permanent rule for the agent!

To protect our projects and keep the agent focused, we must establish strict boundaries before we start prompting.

Writing Your First AGENTS.md

AGENTS.md is a standard file used by many AI harnesses (applications) (https://github.com/agentsmd/agents.md) used to control an AI coding agent's behaviour. Whenever Antigravity starts a task, it reads this file to understand your project architecture, coding style, and security rules.

In VS Code, create a new file in the root of your mqtt-dashboard folder called AGENTS.md and type in the following rules:

# AGENTS.md

## Project
Plain HTML, CSS and JavaScript. No build tools or frontend frameworks (like React or Vue). 
I am learning Web Architecture, so explain each change you make clearly.

## Rules
- Never put real passwords, credentials, or API keys in client-side code.
- Ask for explicit permission before installing any npm package or external library.
- Make one change at a time so I can review the diff.
- Do not modify this AGENTS.md file under any circumstances.

Save the file, and let's make our first Git commit to lock in our rules:

git add AGENTS.md
git commit -m "Initial commit: Add AGENTS.md guardrails"

Tasking the Agent

We are now going to build a web application that connects to an MQTT broker and displays live temperature sensor readings on the page. Instead of asking the agent to build the entire app in one massive prompt, we will give it small, specific tasks.

Open the Antigravity panel in VS Code and enter your first prompt:

> *"Create a basic `index.html` and `app.js` file for displaying live temperature sensor readings via MQTT. Include the `mqtt.js` library via a context delivery network (CDN) in the HTML file, and add a clean layout where incoming sensor topics and their temperature values will be listed."*

Observing the Agent Loop

Watch how Antigravity processes your request:

  1. Perceive & Reason: It will first read your workspace and notice AGENTS.md.
  2. Plan: It will outline a plan to create index.html and app.js using plain HTML/JS without build tools, respecting the rules we have defined.
  3. Act: It will generate the files and show you the diff (the proposed additions highlighted in green).

Task 1 - Carefully read the diff in VS Code. Did the agent follow the rules in AGENTS.md? If the code looks clean and understandable, accept the changes and commit them to Git:

git add .
git commit -m "Add initial HTML layout and app.js boilerplate"

Connecting to the MQTT Server (And Watching It Fail!)

Now let's ask the agent to write the connection logic in app.js. For this workshop, we can use our UCL MQTT broker (https://mqtt.cetools.org).

Send the following prompt to Antigravity:

> *"Update `app.js` to connect to the MQTT broker at `mqtt://mqtt.cetools.org:1883` and subscribe to the weather stations data (UCL/OPS/Garden/WST/dvp2/) temperature topic."*

Notice that we deliberately gave it standard MQTT port 1883 (mqtt://). Let's see what happens when we test it in the browser!

Open index.html in your Chrome browser and open Chrome DevTools (Ctrl+Shift+J or Cmd+Option+J) to look at the Console tab (just like we practiced in Workshop 4!).

You will immediately see a connection error in the console. Why? Because web browsers cannot make raw MQTT connections on port 1883, they need to use MQTT over WebSockets!

Task 2 - Let the agent enter the Observe $\rightarrow$ Loop phase. Copy the error message from your Chrome DevTools console (or let Antigravity inspect the browser output) and tell the agent:

> *"I am getting a connection error in the browser console when trying to connect to port 1883. Why is this happening in the browser, and how do we fix it?"*

Watch the agent reason through the problem: it will realize that browser-based JavaScript requires WebSockets (ws:// or wss:// on port 8000 or 8083/8884), explain the architectural difference to you (as requested in AGENTS.md!), and update app.js to use the WebSocket protocol.

Review the diff, accept the fix, and refresh your browser to verify that the console now logs a successful connection.

What Can Go Wrong?

Even when an AI agent successfully connects and gets code running without console errors, subtle architectural and security bugs often slip through. In the short session, we looked at two classic mistakes agents make during this exact MQTT task:

  1. The Guessing Game (Topic Wildcards): If the agent doesn't know the exact topic structure of the MQTT server, it might guess and subscribe to a wildcard like +/+/temperature. While some readings might appear on your screen, a wrong guess means you might silently miss temperature sensors published at ucl/campus/building/room/temperature (which has 4 levels instead of 2)!
  2. Hardcoded Credentials: If your MQTT server requires authentication, an eager agent might hardcode your username and password directly inside app.js. Because app.js is sent to the user's browser, anyone who opens Chrome DevTools (using the Sources or Network tab from Workshop 4) can read your password in plain text!

Auditing Your Code with a "Fresh" Agent

When an AI agent has been working on a task for 20 minutes, its context window is full of its own previous assumptions—meaning it is very bad at spotting its own mistakes. A great industry habit is to ask a "fresh" agent to review the code.

Let's test this! First, let's simulate a developer mistake (or check if your agent already made one). Look at app.js and see how the agent structured the MQTT connection options and topic subscriptions.

Now, click the New Chat / Reset Session button in the Antigravity panel to spawn a completely fresh agent with no memory of writing this code. Give the fresh agent this prompt:

> *"Act as a senior web security and architecture reviewer. Read `index.html` and `app.js` and check them against the rules in `AGENTS.md`. Specifically:*
> *1. Are there any hardcoded credentials or security risks exposed to the client browser?*
> *2. What assumptions does the MQTT topic subscription make, and could it miss any sensor messages?*
> *Do not edit any files yet—just give me your audit report."*

Task 3 - Read the fresh agent's audit report.

Finalizing and Committing

Once you have refined your topic subscription (or added a safe input prompt so users enter their own credentials into sessionStorage rather than hardcoding them in app.js), review your final diff in VS Code and commit your completed dashboard:

git status
git diff
git add .
git commit -m "Complete MQTT temperature dashboard after security audit"

Well Done

Have fun playing with agents - just remember it is not free to use and may you need subscriptions to complete more complex tasks. Just be careful and if you use your credit card to sign up for these services, make sure you AI keys are safe and that you keep an eye on billing amounts. Make sure to set spending caps on the AI if you can.

You now know how to collaborate with an AI coding agent inside VS Code without falling into the traps of blind "vibe coding". By combining Git version control, strict AGENTS.md guardrails, Chrome DevTools inspection, and fresh-agent code reviews, you can build web applications faster while staying firmly in control of your architecture and security.

Before you finish for the day, make sure all your changes are committed to your local Git repository.

See you all at the next session.