Coding agents are incredibly capable for many programming and ops tasks. However, in some cases you’ll need to extend their functionalities with MCP servers. For example, most agents don’t have a built-in feature for visiting web pages.
You may want to capture screenshots for your docs, or to manually validate each step of an automated test. With an agent, you can specify which app state/page/config you’d like to capture, and repeat this with several different combinations/conditions.
The Playwright MCP server is a huge productivity boost to agents like Claude Code and Gemini CLI because it allows them to visit your app, interact with it live, take screenshots, and more. Here’s how you can take and save screenshots using just your agent.
What is the Playwright MCP Server?
Playwright is the leading browser automation tool, and is often used for simulating user workflows in automated testing. Playwright recently released an MCP (model context protocol) server for AI agents, which has been really popular for testing and QAing features within agentic workflows.
Playwright’s MCP server gives agents the capability to access live URLs. From here, agents can use Playwright’s accessibility tree to understand the true structure of a page. This structured and semantic format is much more digestible to LLMs (vs. sending them a screenshot), and is the fastest/most efficient way for them to ingest frontend layouts.
Taking screenshots with Claude Code
To get the Playwright MCP installed for Claude Code, run this command in your terminal:
claude mcp add playwright npx @playwright/mcp@latest
Now you can launch a Claude Code session to start using it. To verify it installed correctly, run the /mcp slash command from the session.
The config is saved to .claude/settings.json in your project directory by default, and is persisted across sessions for that directory. You can also add it globally with the --scope global flag, which writes to ~/.claude.json.
To take a screenshot, you can simply prompt Claude to go to a webpage using the Playwright MCP server and grab one. For example:
Go to localhost:1313 and click the "login" button. Take a screenshot using the Playwright MCP of the modal box that pops up.
That’s it. Once configured, you can prompt Claude naturally, e.g. take a screenshot of xyz.com, and it’ll use the Playwright MCP server automatically.
Taking screenshots with Gemini CLI
Gemini CLI doesn’t yet have a one-command setup like Claude Code does. You’ll need to manually create the configuration in your settings file.
Go to your project folder and create a .gemini directory (if it doesn’t already exist), then add a settings.json file, or edit the existing one to include:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Start a new Gemini CLI session to load the new config. You can verify it worked by running the /mcp command to see your installed servers.
Test it out with a natural prompt like go to https://google.com, search for Gemini CLI, and take a screenshot. Gemini will automatically select the Playwright MCP as needed.
Where are my Playwright MCP screenshots?
Across all agent clients, screenshots are saved to the .playwright-mcp/ directory by default, but you can change that in your config JSON:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--output-dir",
"path/to/output/"
]
}
}
}
Take screenshots via CLI
Just as you can automate dev workflows with agents, the Playwright MCP server makes it easy to automatically capture screenshots. This is a huge convenience for generating docs ("hey Claude, take screenshots of my login form flow with regular sign in, then with GitHub, and another with Google OAuth"). Your agent can stage screenshots exactly as you want them ("Gemini, take a screenshot of my profile page with the current header, and another with the dark mode theme").
Of all the MCP tools we’ve tried, the Playwright MCP has been the biggest productivity unblocker, and taking quick screenshots is just the tip of the iceberg. Stay tuned, we’ll be writing more posts on other cool things you can do with it.
Using Claude Code? Give your agents ephemeral environments. They can deploy the code they write, pull logs, find + fix bugs, all with little-to-no human intervention. Try it free for 30 days.
