Chapter 10 · MCP Basics MCP Track CLI Project

Model Context Protocol: give your LLM hands on a real browser, then build it a server of your own.

Two firsts in one chapter. First, Microsoft's Playwright MCP lets an LLM drive a live browser from plain English and hand back a runnable spec. Then you build your own FastMCP server exposing tools, resources and prompts over stdio.

01 What students build

MCP is the USB port between LLMs and your tools. Students wire @playwright/mcp into their client, ask in English for a negative login test against app.vwo.com, and watch the model call browser_navigate, browser_type and browser_click for real, then emit vwo-login.spec.ts. Then they flip sides and write server.py, a FastMCP server with an add tool, three resources and two QA prompt templates.

English → Browser

Playwright MCP exposes 21+ browser_* tools. The LLM plans the journey, snapshots the page for refs, and drives clicks and typing itself.

Exploration → Spec

After the live run, the model converts what it did into a committed Playwright TypeScript spec with role-based locators and assertions.

Your First Server

A FastMCP DataServer with a tool, static + dynamic resources, and prompt templates: the three MCP primitives in 60 lines of Python.

02 Architecture

Youplain English ask
──▶
MCP ClientClaude · Cursor · Code
──▶
Playwright MCPbrowser_* tools
──▶
Real Browserapp.vwo.com
MCP Inspectorlocalhost:6274
──▶
server.pyFastMCP · stdio
──▶
Toolsadd(a, b)
──▶
Resources + Promptsdata://config · review_test_case
row 1: consume an mcp server · row 2: build one · same protocol, both directions

03 Live demo (simulated with sample data)

This is a UI walkthrough with pre-baked sample data so you can feel both sides of MCP without a client installed. In the course you run the real thing: npx @playwright/mcp in your MCP client, and your own server.py under MCP Inspector.

mcp-session · stdio transport demo · sample data

04 Inputs & outputs

What goes in

  • A plain-English test ask: "verify invalid login shows the error banner"
  • Playwright MCP registered in your client config (npx @playwright/mcp)
  • Your own server.py: tools, resources and prompts in FastMCP
  • MCP Inspector pointed at the server for interactive poking

What comes out

  • A live browser session driven step by step by the LLM
  • Runnable vwo-login.spec.ts with role-based locators
  • Screenshot evidence (vwo-login-error.png)
  • Tool results, resource JSON and rendered prompt templates
  • A mental model of MCP tools vs resources vs prompts

05 How it's built

Register Playwright MCP in your client: one npx command in the MCP config, no code.
Ask for a negative login journey on app.vwo.com and watch the LLM chain browser_navigate, browser_snapshot, browser_type and browser_click.
Assert the real product error banner appears, capture a screenshot, and have the model emit vwo-login.spec.ts from the recorded journey.
Switch sides: scaffold server.py with FastMCP("DataServer") and add an add(a, b) tool with a docstring the LLM can read.
Add resources (resource://greeting, data://config, dynamic data://user/{user_id}) and two QA prompt templates (review_test_case, summarize_config).
Run it over stdio, connect MCP Inspector at localhost:6274, and exercise every tool, resource and prompt by hand.

06 Tech stack

Playwright MCPMCP protocol · stdioFastMCP (Python)MCP InspectorClaude Desktop / Cursor / Claude CodePlaywright TypeScriptTools · Resources · Prompts