Chapter 10 · Claude sees the app — Learn AI by Building

Goes with Episode 10"How does Claude Code see my app?". The video is being made. This page teaches the same steps, at your own pace.

In a hurry?Jump to the quick reference: every command and key in this chapter, what it does, and when to use it.

Every prompt, ready to copyThis chapter's prompts and commands, each with a Copy button. Type them yourself first; copy if you are stuck or behind.

Where you areDevPulse from chapters 1 to 9, with the server running in your second tab. Playwright runs through npx, so you need Node.js.

Claude has never seen your page

Most people will open a page like DevPulse on a phone. Does it look right there?

Claude wrote most of that page. But it only ever read the code. It has never opened the page, and it has never seen it 390 px wide.

The question for this chapter

How do you let Claude look at the running app, not just the code?

Give Claude a browser

Claude Code talks to outside tools through MCP servers. MCP is an open standard: one server, many tools. Playwright's server gives Claude a real Chrome to drive.

Add it from your terminal, not inside Claude.

Type this into the terminal, in projects\devpulse, one line at a timeclaude mcp add playwright -- npx -y @playwright/mcp@latest claude mcp list

The same two lines work in PowerShell and in the Mac Terminal. On Windows we did not need cmd /c in front.

claude mcp add playwright prints: Added stdio MCP server playwright with command npx -y @playwright/mcp@latest to local config. Then claude mcp list shows playwright: Connected. — Everything after `--` is the command that starts the server. `list` starts it once to check: Connected.

Now start claude and type /mcp.

The /mcp panel: Manage MCP servers. Local MCPs: playwright, 25 tools, with a tick. — Playwright brings 25 tools: open a page, click, resize, take a screenshot and more. (We cropped the panel to this server.)

Let Claude look at the page

Type this into Claude Code, as one lineUse the playwright tools to open http://127.0.0.1:8000, resize the window to 390 px wide, take a screenshot and tell me what looks wrong on a phone.

A Chrome window opened by Playwright on 127.0.0.1:8000/#today, the page narrowed to 390 px, with a grey bar: You are using an unsupported command-line flag. — A new Chrome window opens by itself, the page narrowed to phone width. The grey warning bar about a command-line flag comes from Playwright. You can close it.

The end of Claude's list: 4, edit and delete icons under 44 px and close together; 5, the Standup panel is a dense block; 6, a 40 px gap above the Standup card. Also a favicon 404. I haven't changed any code. — The end of a list of 6 problems, found in 19 seconds. The first three, above this, were about the add form and the task titles. It changed nothing yet.

Fix it, then look again

Type this into Claude Code, as one lineFix those in index.html with a narrow-screen media query, then check again at 390 px with the playwright tools.

The diff in index.html: rules inside the media query, edit and delete at min-width and min-height 44px. Below it: Calling playwright 2 times. — The new CSS goes in, then Claude calls Playwright again to check its own work.

Claude's summary: the tag field has its own row; titles get a full-width line; edit and delete are 44 by 44 px; the gap is gone; the Standup font is smaller. It has not tested the edit row, the error message or dark mode. — Done in 32 seconds. Read the last part: it says what it did *not* test.

Now see it yourself. Narrow your own browser window.

Wide, then narrow. Everything now fits one column. Commit it with /commit-commands:commit.

/commit-commands:commit: Committed as 951eb4f, Add mobile layout for narrow screens. It contains only index.html. — One commit, one file.

A second server: the docs

Some servers are not programs on your computer. They live on the web. Anthropic runs one for the Claude Code docs. Exit Claude with /exit first.

Type this into the terminalclaude mcp add --transport http claude-code-docs https://code.claude.com/docs/mcp

Added HTTP MCP server claude-code-docs with URL https://code.claude.com/docs/mcp to local config. File modified: .claude.json, project devpulse. — An HTTP server: just a web address. Note the last words: *to local config*. (Our recording uses a separate demo profile, so the path is not the usual one.)

Start claude again and ask it about that.

Type this into Claude CodeUse the claude-code-docs tools: what is an MCP scope, and which scope did I just use?

The end of the answer: a scope table with the User row; which scope you just used: local, private to you in this project; use --scope user for all your projects or --scope project for a shared .mcp.json; source link. — The answer comes from the docs, with the link. Local: only you, only this project.

Scope	Who gets the server	How to add it
Local	You, in this project only	The default
Project	Everyone who clones the repo, through `.mcp.json`	`--scope project`
User	You, in all your projects	`--scope user`

Careful here

An MCP server runs with your permissions. Add only servers you trust, the same way you would install a program.

What a server costs

Every connected server adds its tool list to Claude's context. Playwright alone has 25 tools. Keep the servers you use, and remove the rest with claude mcp remove name.

These servers were built by others. What if DevPulse had its own tools for Claude? That is chapter 11.

Quick reference

The prompts from this chapter, ready to copy: every prompt, chapter 10.

Command or key	What it does	Use it when
`claude mcp add name -- command`	Adds a server that runs on your computer (stdio)	The tool is a program you can start, like Playwright
`claude mcp add --transport http name url`	Adds a server that lives on the web	The tool has a web address, like the docs server
`claude mcp list`	Lists your servers and whether they connect	You want to check a server works
`/mcp`	Shows the servers inside Claude Code, with their tools	You want to see what Claude can use right now
`Use the playwright tools to …`	Claude opens a real browser and looks	You want Claude to see the page, not just the code
`--scope user / --scope project`	Makes a server yours everywhere, or shared with the repo	Local scope is too narrow

Your homework

Let Claude look at a page of your own

The goal: Claude checks a page by seeing it, not by reading it.

The steps: add Playwright to one of your own projects. Ask Claude: Use the playwright tools to open … at 390 px and tell me what looks wrong. Then ask it to fix one problem and check again.

Guess first: will Claude find more problems from the screenshot, or from reading the code?

One question for you: which server would your team want in project scope?

References

Where each command on this page comes from. Every screenshot is from our own recording on 29 Oct 2026, Claude Code 2.1.312.

Anthropic · Connect Claude Code to tools via MCP claude mcp add, list and get; stdio and HTTP servers; the local, project and user scopes; /mcp. https://code.claude.com/docs/en/mcp
Microsoft · Playwright MCP The browser server we added: open a page, resize it, take a screenshot. https://github.com/microsoft/playwright-mcp
Model Context Protocol · Introduction What MCP is: one open way for an AI app to talk to tools and data. https://modelcontextprotocol.io/introduction
My own recording · 29 Oct 2026, Windows 11 Claude found 6 phone problems in 19 seconds, fixed them in 32, and the docs server named the scope we used.

New chapters and episodes come out every week. Follow along on YouTube or the WhatsApp channel.

← PreviousChapter 9 · A code reviewer of our ownNext →Chapter 11 · DevPulse tools for Claude