Viewpo

Provides an MCP server that enables AI agents to capture screenshots, extract DOM layouts, and compare responsive behavior via the Viewpo macOS app.

javascript

0

GitHub Stars

javascript

Language

3 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "littlebearapps-viewpo-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "viewpo-mcp"
      ],
      "env": {
        "VIEWPO_PORT": "9847",
        "VIEWPO_AUTH_TOKEN": "<paste token from Viewpo MCP Bridge>"
      }
    }
  }
}

You can run a dedicated MCP server that lets your AI coding assistant see how responsive UI renders. By connecting Viewpo’s macOS app through an MCP bridge, you can capture screenshots at multiple viewports, extract DOM layouts with bounding boxes and computed styles, and compare how layouts change across breakpoints. This closes the feedback loop between code and visuals, enabling faster frontend iteration with your AI assistant.

How to use

This MCP server is designed to be paired with an MCP client. Start the server, connect your AI assistant, and then use the provided tools to capture viewport screenshots, fetch layout trees, and compare layouts between viewports. The typical workflow involves taking screenshots for different widths, pulling layout data for a URL at a chosen width, and comparing two widths to identify responsive issues. Use the results to guide CSS fixes and re-test until the visuals align with expectations.

How to install

Prerequisites you need before installing and using this MCP server include Node.js version 20 or newer and a Viewpo macOS app with the MCP Bridge enabled.

# Install the MCP server globally
npm install -g viewpo-mcp

# Or run directly without installing
npx viewpo-mcp
```}],

Configuration and usage notes

To connect your AI assistant, you must enable the MCP Bridge in Viewpo and provide an authentication token to validate requests from the assistant.

# When using Claude Code or Cursor, the MCP command is typically:

npx -y viewpo-mcp
```}],

Environment and terminal configuration

The server relies on an authentication token provided by Viewpo for the MCP Bridge. You should pass this token to the MCP client via the VIEWPO_AUTH_TOKEN environment variable.

export VIEWPO_AUTH_TOKEN=<paste token from Viewpo MCP Bridge>
```}],

Security and access

The MCP server communicates locally with the Viewpo bridge. Ensure you keep your auth token secure and only expose the MCP bridge to trusted clients. The bridge uses standard token-based authentication to authorize requests from your AI assistants.

Troubleshooting

If you encounter connection issues, verify that the Viewpo MCP Bridge is running and that the VIEWPO_AUTH_TOKEN you provide matches the token shown in Viewpo. Check that the MCP server process is running and listening on the expected port.

Available tools

viewpo_screenshot

Capture screenshots of a URL at one or more viewport widths and return base64 JPEG images for visual inspection.

viewpo_get_layout_map

Extract the DOM layout tree for a URL at a given viewport width, returning element hierarchy with tags, classes, bounding rects, and computed styles.

viewpo_compare_viewports

Compare the layout of a URL between two viewport widths and report elements whose size or CSS differ between the viewports.