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.
You can find the config in your current directory’s ~/.claude.json, and config is persisted across sessions for any given directory.
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. After specifying in the session to use the MCP for screenshots, Claude will remember this preference going forward. You can tell Claude take a screenshot of [xyz.com](http://xyz.com) and it’ll implicitly do that via Playwright.
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 or use the /mcp refresh slash command 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 prompt like @playwright "go to https://google.com, search for Gemini CLI, and take a screenshot". The @playwright prefix tells Gemini to use the MCP server instead of trying other methods.
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.
