Build browser automations and AI agents with TypeScript, Steel, Playwright, and the Vercel AI SDK. These six examples take you from connecting to a cloud browser to embedding a live agent in your own webpage.
Open the numbered files as you run them. Each example introduces a capability you can use in your hackathon project.
You’ll need Node.js 22+, npm, and a Steel API key. Examples 05 and 06 also need an Anthropic API key.
From this folder, install dependencies and create your local configuration:
npm ci
npm run setupAdd your keys to the generated .env.local:
STEEL_API_KEY=your_steel_api_key
ANTHROPIC_API_KEY=your_anthropic_api_keyThe setup includes ExpandTesting’s public test account for example 04. The default model for the agent examples is claude-haiku-4-5; you can change it with MODEL_NAME.
Start your first browser:
npm run 01 -- --watchOpen the viewer URL printed in your terminal. With --watch, examples 01–05 pause at key steps until you press Enter. Omit that flag to run continuously. Example 06 always pauses and must run in an interactive terminal.
| Example | What you’ll build | Run |
|---|---|---|
| 01 · Browser basics | Create a Steel session, connect Playwright over CDP, navigate, take a screenshot, and release the browser. | npm run 01 -- --watch |
| 02 · Files | Upload a CSV, attach it to CSV Plot, capture its chart, and download the original CSV with a byte-for-byte check. | npm run 02 -- --watch |
| 03 · Credentials | Store a test account in Steel’s vault and opt into automatic form filling with credentials: {}. |
npm run 03 -- --watch |
| 04 · Session context | Log into ExpandTesting, save browser state, and restore the login in a new session. | npm run 04 -- --watch |
| 05 · AI agent | Use Anthropic and ToolLoopAgent to research GitHub through browser tools and return structured findings. |
npm run 05 -- --watch |
| 06 · Live browser embed | Add Steel’s live viewer to an HTML page with an iframe and watch a meme-making agent work. | npm run 06 |
Examples 01–05 use public websites and don’t need a local server or tunnel. Example 06 needs the playground setup below.
About example 03: Testfire’s public admin / admin account was rejected during testing. The script reports that failure and cleans up; successful login depends on the test account being available. Testfire also had an expired certificate, so this example includes a certificate-error exception for its dedicated test session. Don’t carry that exception into code for other websites.
The meme agent operates a small website included in playground/. Steel’s remote browser needs a publicly reachable address for that website.
If a workshop host provides a playground URL, set PLAYGROUND_URL in .env.local to that address. Otherwise, install Cloudflare Tunnel and run these in separate terminals:
# Terminal 1: start the target website
npm run playground# Terminal 2: give it a public HTTPS address
cloudflared tunnel --url http://127.0.0.1:4400Copy the tunnel’s HTTPS URL into .env.local:
PLAYGROUND_URL=https://your-tunnel.trycloudflare.comKeep both terminals running. Restarting a quick tunnel changes its URL, so update the configuration when that happens.
Then run npm run 06 and open http://127.0.0.1:3000. Press Enter in the terminal to start the agent. The iframe displays its remote browser; press Enter again when you’re ready to release the session.
Port 4400 serves the target website through the tunnel. Port 3000 serves your local page containing the iframe. The embedding code is in 06-embed.ts; the agent logic is in shared/meme-agent.ts.
- Change the data: edit assets/example-data.csv, rerun 02, and compare the chart with the downloaded CSV.
- Change the research question: edit the prompt in 05. Keep the prompt, extraction logic, and
reportFindingsschema aligned. The supplied extractor reads GitHub Trending repository cards; researching commits, users, or another website requires adapting it. - Embed your own agent: replace the
runMemeAgentcall in 06 with your workflow. The iframe’ssrcis the session’s viewer URL; API keys and the authenticated CDP connection stay server-side.
Generated files are saved in output/, including the chart and downloaded CSV from 02, the JSON research report from 05, and the meme from 06.
npm run doctor # Checks configuration; reports the tunnel setting needed for 06
npm run check # TypeScript checks
npm test # Helper testsdoctor checks settings, not external service availability. A missing playground URL doesn’t prevent examples 01–05 from running. For local browser checks, start the playground and run npm run test:browser with Chrome or Playwright Chromium installed.
Each example releases its Steel session in finally. Keep .env.local and .workshop/ private: the first holds API keys, and saved browser context can contain active login tokens. Both are excluded by .gitignore.
Follow the Steel CLI setup guide, then run:
steel login
steel skills install steel-browser
steel doctor --preflight
bash 00-cli.shRestart your coding agent after installing the skill. While the script’s named session is open, ask it to use the Steel browser skill with session steel-hackathon-cli to explore User Inyerface using fictional test details. Press Enter in the script’s terminal to close the session.