DEV Community

Cover image for Give the Google Antigravity agent eyes: screenshots and page reading over MCP
Dennis
Dennis

Posted on Fully Autonomous

Give the Google Antigravity agent eyes: screenshots and page reading over MCP

Written by the SnapRender team. SnapRender is the screenshot API used in this guide; the setup works on its free plan.

Google Antigravity is good at writing front-end code. What it cannot do out of the box is look at the result. It edits a component, tells you it fixed the layout, and has no way to check what the page actually looks like on a phone.

MCP closes that gap. Antigravity can call tools from any MCP server you add, so if one of those tools returns a screenshot, the agent can open a URL, look at the rendered page and reason about what it sees. This guide adds one such server, explains the two Antigravity details that trip people up, and ends with prompts that are worth trying.

What you get

After the setup below, the Antigravity agent can:

  • take a screenshot of any public URL, full page or just the viewport, on desktop or on a phone profile (iPhone, Pixel, iPad)
  • render a PDF of a page
  • read a page as clean markdown, which is often more useful than the image when the agent needs the text of a docs page
  • capture up to 50 URLs in one batch

Cookie banners and ads are removed before the capture, so the agent sees the page the way a visitor does instead of a consent wall.

Step 1: add the server to mcp_config.json

Antigravity (the App, the IDE and the CLI) reads MCP servers from the same file:

  • ~/.gemini/config/mcp_config.json for all projects
  • .agents/mcp_config.json for one workspace

The quickest way to open it: in the App, go to Customizations, Installed, and click Copy Config File Path next to MCP Servers. In the IDE, open the "..." menu at the top of the agent panel, then MCP Servers, Manage MCP Servers, View raw config.

Add this:

{
  "mcpServers": {
    "snaprender": { "serverUrl": "https://app.snap-render.com/mcp" }
  }
}
Enter fullscreen mode Exit fullscreen mode

The first detail that trips people up: the field is serverUrl (url also works). Gemini CLI uses httpUrl for the same thing, and Antigravity does not accept it. If you copied a Gemini CLI snippet and the server never shows up, that is why.

Step 2: sign in

Under MCP Servers, click Authenticate next to snaprender. A browser window opens; sign in (a free account is enough) and click Allow. Antigravity then shows an authorization code. Copy it, paste it into "Enter authorization code" and click Submit.

If you would rather use an API key than the browser sign-in, send it as a header instead:

{
  "mcpServers": {
    "snaprender": {
      "serverUrl": "https://app.snap-render.com/mcp",
      "headers": { "Authorization": "Bearer YOUR_API_KEY" }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

The key sits in the file as plain text, so keep that file out of version control.

Step 3: the second detail, Ask mode

Until you allow them, MCP tools run in Ask mode: the agent stops and asks before every single call. That is a sensible default, but it gets old quickly when the agent wants to take six screenshots in a row.

You can allow the whole server with a policy of mcp(snaprender/*). If you also want the screenshot tool registered on every turn (Antigravity loads MCP tools lazily by default), add this inside the snaprender entry:

"tools": { "take_screenshot": { "eager": true } }
Enter fullscreen mode Exit fullscreen mode

Check that it works

snaprender should show as connected under MCP Servers (or in /mcp in the CLI). Then ask the agent something simple:

Take a screenshot of https://example.com and describe what you see.

If you get a description of the page back, you are done.

Prompts worth trying

Mobile check after a change.

Screenshot https://your-preview-url.vercel.app on desktop and on iPhone 15 Pro and list what breaks on mobile.

The agent gets two images and compares them. It is surprisingly good at spotting overflowing tables, buttons pushed off screen and text that wraps badly.

Design review against a description.

Take a full-page screenshot of the deployed preview and check it against the design I described earlier. List every difference.

Reading docs instead of guessing.

Read https://example.com/docs/api as markdown and write a typed client for the endpoints it documents.

This one does not need an image at all. Markdown extraction gives the agent the actual docs text instead of whatever it remembers from training.

Competitor or reference pages.

Screenshot the pricing pages of these three sites and summarize how each one structures its plans.

One limit to know about

The screenshots are taken on SnapRender's servers, not on your machine. That means localhost and private network addresses are out of reach. For local work, point the agent at a public preview deployment (Vercel, Netlify, Cloudflare Pages and similar all give you one per branch) or a tunnel.

Cost

The free plan includes 200 captures a month, which is plenty for checking your own work. Each screenshot or page read uses one capture; failed captures are not counted.

The full setup page, including the local npx option and an FAQ, is here: SnapRender for Google Antigravity.

Top comments (0)