Currently Workshop

In this workshop we’ll build and design a real-time interface—a window into a location, showing its current time, weather, and a camera view. Instead of writing code ourselves, we’ll describe what we're imagining in plain language, and work with AI to create it.

Title Currently…

Clock 14:32:07

Camera [live view]

Weather 12°C Cloudy

Setup

Install Cursor

Download and install from cursor.com if you don't have it yet.

Open Cursor

Launch Cursor — it's a code editor with a built-in AI agent. You can get started for free, but if interested you can apply for a student account.

Install Live Preview

This shows your HTML updating in real-time inside the editor.

Cmd+Shift+X to open Extensions
Search Live Preview by Microsoft
Click Install

Create your project

Create a folder called currently-somewhere
In Cursor: File → Open Folder → select it
Create a new file: index.html

Open the preview

Open index.html
Cmd+Shift+P → type Live Preview → select Show Preview

You now have three panels: your file, the preview, and the AI chat.

Initial Prompt

Open the AI chat (Cmd+L) and paste this:

Initial Prompt

Create a page in 4 quadrants. The overall container is full viewport width and height. Make each quadrant background a different shade of gray. Use 16px Arial regular as the only font, in black, aligned to the top left of each quadrant. In the top-left quadrant is the text "Currently Somewhere", in top-right is a digital clock showing the time 00:00:00 (placeholder for now), in bottom-left is this image as object-cover (https://workshop-princeton.observingtime.cam/assets/clouds.jpg), in bottom-right is the current weather (placeholder for now). The project should be a self-contained HTML file.

Accept the changes. Save (Cmd+S). You just described an interface in a sentence.

Choose a Place

The US National Parks Service maintains a collection of webcams for monitoring air quality. Choose one of these cameras to build your interface around.

View the cameras on a map or the list of the cameras are below:

Prompt Idea

Replace "Currently Somewhere" with "Currently [PLACE NAME]" in the top-left quadrant. Also update the html page title.

Clock

The clock currently shows a placeholder time. Make it reflect the current time where your place is:

Prompt Idea

Turn the placeholder time into a digital clock reflecting the current time in [PLACE NAME]

You may need to add the timezone
You can make it a 12 hour clock with am and pm

Weather

Replace the placeholder weather with real data from the OpenWeather API (openweathermap.org):

Prompt Idea

Replace the placeholder weather with the current weather from [PLACE NAME]. Use the OpenWeather API. Use this API key: 53ff53b5be52c2b3e83aeb82762cb512. Show the temperature, weather description (e.g. sunny, cloudy, rainy), and wind speed. Update every 5 minutes. Keep everything in a single HTML file.

You may need to look up the latitude and longitude

Camera

Replace the cloud photo with the live air quality camera view for your location:

Prompt Idea

Replace the static cloud image with a live webcam feed. Load the image from [WEBCAM URL] and auto-refresh it every 30 seconds so it stays current. Keep filling the quadrant.

Expand

Once the basic functionality is in, consider the typography and other elements you can expand upon.

Choose a single Google Fonts typeface for your project. Try adding to your prompt:

Prompt Idea

Replace Arial with the Google Font "[FONT NAME]" for all text on the page

Explore

Try these prompt directions, combine them, or invent your own.

"Change the background colors based on whether it's day or night at the location."
"Make the weather quadrant's background shift from cool blue to warm orange with temperature."
"Add a gradient overlay on the camera that gets darker at nighttime."
"Use only black and white. No grays."

"Make 'Currently Somewhere' as large as possible, filling the top-left quadrant."
"Show the temperature as a single enormous number filling the weather quadrant."
"Add latitude and longitude as small text in each quadrant corner."

"Add a slow pulsing animation to the clock's colon separator."
"Turn the digital clock into an analog clock using css transforms."
"Add a thin line at the bottom of the clock quadrant that fills over each minute, then resets."
"Slowly rotate the background hue over 60 seconds."

"Visualize the current weather type with a simple css animation."
"Visualize rain as animated characters falling across the weather quadrant."
"Draw wind as thin horizontal lines moving at the actual wind speed."
"If it's cloudy, apply a CSS blur to the camera image."
"If it's cloudy, apply a CSS blur to the entire page."

Submit

Save your file as index.html.
In this workshop page, click Log in in the top right.
Upload that file in the right panel.
Add your location name and click Save.
Open your submitted card to confirm everything loads correctly.
You can replace your file with a new one at any time.

Extra materials

Tips

Ask questions. The chat is designed to be conversational, not every prompt needs to be a request, some can just be questions.
Play with specificity. The more specific you are, the more likely the AI will understand you, but sometimes leaving things open-ended can lead to interesting results.
Reference the file. Type @index.html or drag the html file into your prompt if it seems confused.
Make copies. If you want to experiment with different designs, make a copy of your file so you can come back to it later.

Resources

Weather: OpenWeather
API key: 53ff53b5be52c2b3e83aeb82762cb512

Fonts: fonts.google.com

Cursor Reference

Cmd+L AI chat Cmd+S Save Cmd+Z Undo Cmd+B Sidebar Cmd+Shift+P Command palette Cmd+Shift+X Extensions