An AI agent cannot see or control your browser just because it is open on your desktop. The agent needs a browser connector that exposes navigation, page inspection, clicks, typing, screenshots, and tab management as tools. A practical way to provide that bridge is the Playwright MCP server.
MCP (Model Context Protocol) is the connection between an AI client and a tool server. In this setup, the AI client starts the Playwright MCP server, and the server gives the agent browser tools. The same arrangement works against different websites and web apps; only the browser actions and page selectors change.
Start with a browser managed by the agent
This is the simplest setup and keeps the agent’s browser profile separate from your everyday browser. The Playwright MCP quick start lists Node.js 20 or newer and an MCP-compatible AI client as prerequisites.
Add a server entry to the MCP configuration used by your AI client. The location and exact file format vary by client; this JSON shape is used by many clients:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Save the configuration and restart or reload the AI client so it starts the MCP server. The server launches a visible browser by default. To ask it to use Firefox instead, add "--browser=firefox" to the args array. This starts a Playwright-controlled Firefox; it does not attach to an arbitrary Firefox window that was already open.
For a repeatable team setup, pin a tested package version rather than relying on @latest, and record that version alongside the client configuration.
Check that the connection works
Ask the agent to list its browser tabs, open a harmless test page, and report the page title and headings. For example:
Open
https://demo.playwright.dev/todomvc, inspect the page, and tell me which controls are available. Do not submit anything.
The MCP server provides structured page snapshots based on accessibility information. The agent can use those roles, labels, and text to find controls, then click or fill them and take another snapshot to confirm what changed. Screenshots are useful when layout or visual state matters. Canvas games and remote desktops may need focused keyboard or pointer input because their interface is not represented as ordinary page controls.
If the client cannot see the tools, check that the MCP server entry is in the right configuration file, the client was restarted, and Node.js is available to the process running the client. If the agent has tools but sees the wrong site, have it list tabs and confirm the selected tab and URL before acting.
Use an existing signed-in browser
Sometimes the site is already signed in within your regular browser. A managed browser profile and your regular profile are separate: their cookies, tabs, and login state are not shared automatically.
For existing Chrome or Edge tabs, Playwright provides a browser extension mode. Install the Playwright extension in Chrome or Edge, add "--extension" to the MCP server’s args, restart the AI client, then approve the browser connection and select the tab the agent should control. The extension can reuse that profile’s logged-in state. Because this grants the connected agent access to pages in that browser, use a browser profile you are comfortable giving the agent access to.
Another Chromium option is to connect over Chrome DevTools Protocol (CDP). Start the supported browser with remote debugging enabled, then set the MCP server argument to a local endpoint such as "--cdp-endpoint=http://localhost:9222". Treat that endpoint as privileged browser access: keep it local and do not expose it to a network.
The documented existing-browser extension and CDP paths are for Chrome, Edge, or Chromium. Selecting Firefox with --browser=firefox means Playwright launches and controls Firefox itself. To attach to an already-running Firefox window, use a connector that explicitly supports Firefox’s remote-control protocol and start Firefox with that interface enabled. In one Firefox DevTools attempt, the connector expected Marionette on port 2828; it could not attach because no listener was running there.
Choose how browser state should persist
Playwright MCP uses a persistent profile by default, so cookies and login state can survive between runs for that client workspace. An isolated profile starts clean and loses its in-memory state when the session closes. Use isolated mode for repeatable tests; use a dedicated persistent profile when you need to sign in once and reuse it. Avoid sharing a persistent profile between concurrent browser sessions because profile locking can prevent one from starting.
Keep the agent’s access scoped
An attached browser can contain private email, admin pages, payment details, and authenticated sessions. Connect only an agent you trust, choose the specific browser profile and tab deliberately, and disconnect the browser extension when the task is finished. Do not paste cookie values into chat or save a logged-in storage-state file in a project repository.
What this setup does and does not do
The MCP connection lets the agent operate the browser UI. It is separate from the web app’s own APIs, WebSockets, or multiplayer/network connections. In a real test, first confirm that the agent can reach the intended browser tab; then test the website’s behavior as a separate step. Two tabs in one browser context are two pages, but they are not equivalent to two independent browser profiles or two physical devices.