New Appliances

Your agent is a remarkable cook, but until today it's had a limitation you've maybe stopped noticing: it has never seen your website. It wrote every line — but when you "taste and adjust," you're the only one looking at the plate. Websites, PDFs on the web, anything behind a browser — the agent works blind, relying on your descriptions.

Today we plug in its first appliance: MCP, the standard that lets agents connect to new capabilities. Specifically, a real browser it can drive itself — open pages, read them, click, screenshot. (What MCP actually is, jargon-free, is a recipe of its own; today we just use it.)

What you'll plate today

An agent with eyes — proven by it opening your live site from Lesson 6, inspecting it like a visitor, and telling you something about it you didn't know.

Ingredients

• Your first-kitchen folder, agent running
• Your live URL from Lesson 6
• About 25 minutes

Cook

1. Install the browser appliance

The appliance is Playwright MCP — Microsoft's official browser server, and the single biggest upgrade for a new agent. Let the agent install its own appliance:

Add the Playwright MCP server to yourself:

1. First run `claude mcp list` and show me what I already have
2. Then add it: claude mcp add playwright npx @playwright/mcp@latest
3. Tell me when I need to restart you for it to take effect

When it says restart: /exit, then claude. New session, new hands.

2. First test drive — on YOUR site

This is the full-circle moment of the course:

Open my live site at https://[your-name].pages.dev in the browser
and describe what you actually see — not what you remember writing.
Then resize to a phone-sized screen and tell me honestly: does
anything look cramped, broken, or off?

Read the answer carefully. The agent that built the page is now visiting it — and phone-view especially loves to hide surprises: text that wraps ugly, buttons that crowd. If it finds something:

Fix what you found, then ship the new version, then open the live
site again and confirm the fix is actually visible.

Look at that sentence. Build → deploy → verify with its own eyes — you just ran a professional workflow, in English.

3. One more trick — reading the outside world

Eyes aren't only for your site:

Open [any public page you actually read — a news site, a docs page]
and summarize what's on it in three lines.

Anything you'd normally read-and-retype into the chat, the agent now fetches itself. Feel how much friction just left.

4. The pantry rule (the part everyone skips)

Here's the honest warning that makes this lesson complete. MCP has thousands of servers, and the beginner failure mode isn't installing too few — it's installing twenty and wondering why the agent got slower and dumber. Every installed appliance's manual rides along in every conversation. Clutter isn't capability.

Add a rule to CLAUDE.md: before we install any new MCP server,
tell me what it adds and what it costs in context — then I decide.
Default answer is no until a real task demands it.

When a real task does demand more, our starter pantry recipe covers the three servers this kitchen actually runs — the browser you just installed, plus two.

When it burns

• The new tools don't show up — you skipped the restart. /exit → claude.
• A browser window flashes open or nothing seems visible — normal; it sometimes runs headless (invisible). Judge by the description it gives, not by watching windows.
• First run downloads a lot — Playwright fetches its browser once. Let it finish; it's a one-time cost.
• It describes a cached/old version of your site — "hard-refresh the page before describing it."

Order up

□ claude mcp list shows playwright installed
□ The agent described your LIVE site — from looking, not memory
□ Something got fixed (or confirmed fine) end-to-end: edit → ship → verify
□ CLAUDE.md has the appliance rule: earn your shelf space

Next up — Lesson 10: Graduation Dinner. No more provided recipes. You choose the dish, plan it with your agent, build it, ship it, and show someone. Everything from nine lessons, on one plate — yours.

Stuck on a step? Question box below.