A 2-hour hands-on workshop by midudev: from prompts to agents.
We build a real AI workflow for a fashion ecommerce frontend team — installing and creating Skills, a custom command, a tiny MCP server, and running AI locally in the browser with the Prompt API and WebGPU.
This repository contains the presentation site and the exercises we build live.
You need two things installed on your machine.
Download and install the LTS version from nodejs.org.
Check it works:
node --version
# v22.12.0 or higherThis project uses pnpm as its package manager (do not use npm or yarn to
install dependencies). Once Node.js is installed, install pnpm globally:
npm install -g pnpm@latest-11Check it works:
pnpm --versionYou have two options.
git clone https://github.com/midudev/zara-boost-workshop.git
cd zara-boost-workshopIf you don't have Git installed, you can download the project as a ZIP:
- Go to the repository:
https://github.com/midudev/zara-boost-workshop - Click the green Code button → Download ZIP.
- Unzip it and open the folder in your terminal:
cd zara-boost-workshopFrom the root of the project:
pnpm install
pnpm devThen open http://localhost:4321.
The first exercise is in src/exercise/01-our-first-query.ts.
You will create an OpenAI account, generate an API
key, and complete the TODOs in the file to translate/adapt product copy for
en, es and fr.
Before running the exercise, paste your API key into the OPENAI_API_KEY
constant in src/exercise/01-our-first-query.ts:
const OPENAI_API_KEY = "your-key-here";Do not commit API keys or .env files.
All commands are run from the root of the project:
| Command | Action |
|---|---|
pnpm install |
Install dependencies |
pnpm dev |
Start the dev server at localhost:4321 |
pnpm build |
Build the production site to ./dist/ |
pnpm preview |
Preview the production build locally |
- Astro — site framework
- Tailwind CSS v4 — styling
- Geist — Geist Pixel & Geist Mono typefaces
