How should viewpo-mcp be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this mcp.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

Crawler Summary

viewpo-mcp answer-first brief

MCP server for Viewpo — gives AI coding assistants eyes into responsive viewport rendering viewpo-mcp MCP server that gives AI coding assistants **eyes into responsive viewport rendering** via the $1 macOS app. Capture multi-viewport screenshots, extract DOM layout trees, and compare responsive behaviour across breakpoints — all from your AI assistant. What it does AI coding assistants (Claude Code, Cursor, Windsurf, etc.) are **blind** when working on frontend UI. They write CSS and HTML but can't see the Capability contract not published. No trust telemetry is available yet. Last updated 2/25/2026.

Freshness

Last checked 2/25/2026

Best For

viewpo-mcp is best for mcp, model-context-protocol, viewpo workflows where MCP compatibility matters.

Not Ideal For

Contract metadata is missing or unavailable for deterministic execution.

Evidence Sources Checked

editorial-content, GITHUB MCP, runtime-metrics, public facts pack

Card Facts Snapshot Contract Trust

Claim this agent

Agent DossierGitHubSafety: 89/100

viewpo-mcp

MCPself-declared

Public facts

Change events

Artifacts

Freshness

Feb 25, 2026

Verifiededitorial-contentNo verified compatibility signals

Capability contract not published. No trust telemetry is available yet. Last updated 2/25/2026.

Trust evidence available

Trust score

Unknown

Compatibility

MCP

Freshness

Feb 25, 2026

Vendor

Littlebearapps

Artifacts

Benchmarks

Last release

0.1.0

Executive Summary

Key links, install path, and a quick operational read before the deeper crawl record.

Verifiededitorial-content

Summary

Capability contract not published. No trust telemetry is available yet. Last updated 2/25/2026.

View Source

Setup snapshot

git clone https://github.com/littlebearapps/viewpo-mcp.git

1
Setup complexity is MEDIUM. Standard integration tests and API key provisioning are required before connecting this to production workloads.
2
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Evidence Ledger

Everything public we have scraped or crawled about this agent, grouped by evidence type with provenance.

Verifiededitorial-content

Vendor (1)

Vendor

Littlebearapps

profilemedium

Observed Feb 25, 2026Source link Provenance

Compatibility (1)

Protocol compatibility

MCP

contractmedium

Observed Feb 25, 2026Source link Provenance

Security (1)

Handshake status

UNKNOWN

trustmedium

Observed unknownSource link Provenance

Integration (1)

Crawlable docs

6 indexed pages on the official domain

search_documentmedium

Observed Apr 15, 2026Source link Provenance

Release & Crawl Timeline

Merged public release, docs, artifact, benchmark, pricing, and trust refresh events.

Self-declaredagent-index

Docs Update

Docs refreshed: Sign in to GitHub · GitHub

search_documentmedium

Fresh crawlable documentation was indexed for the official domain.

Observed Apr 15, 2026

Artifacts Archive

Extracted files, examples, snippets, parameters, dependencies, permissions, and artifact metadata.

Self-declaredGITHUB MCP

Extracted files

Examples

Snippets

Languages

typescript

Executable Examples

bash

npm install -g viewpo-mcp

bash

npx viewpo-mcp

json

{
  "mcpServers": {
    "viewpo": {
      "command": "npx",
      "args": ["-y", "viewpo-mcp"],
      "env": {
        "VIEWPO_AUTH_TOKEN": "<paste token from step 2>"
      }
    }
  }
}

json

{
  "mcpServers": {
    "viewpo": {
      "command": "npx",
      "args": ["-y", "viewpo-mcp"],
      "env": {
        "VIEWPO_AUTH_TOKEN": "<paste token from step 2>"
      }
    }
  }
}

text

url:       "https://example.com"           (required)
viewports: [{ width: 375, name: "phone" }, (optional, defaults to 1920px desktop)
            { width: 1920, name: "desktop" }]

text

url:      "https://example.com"    (required)
viewport: 1920                     (optional, default 1920)
selector: ".main-content"          (optional, scope to subtree)

Docs & README

Full documentation captured from public sources, including the complete README when available.

Self-declaredGITHUB MCP

Docs source

GITHUB MCP

Editorial quality

ready

Full README

viewpo-mcp

MCP server that gives AI coding assistants eyes into responsive viewport rendering via the Viewpo macOS app.

Capture multi-viewport screenshots, extract DOM layout trees, and compare responsive behaviour across breakpoints — all from your AI assistant.

What it does

AI coding assistants (Claude Code, Cursor, Windsurf, etc.) are blind when working on frontend UI. They write CSS and HTML but can't see the visual result. This creates a slow feedback loop:

AI writes code → you check → you describe what's wrong → AI fixes → repeat

viewpo-mcp closes that loop. The AI can now:

Screenshot a URL at multiple viewport widths simultaneously
Extract the DOM layout tree with bounding rects and computed styles
Compare layouts at two different viewport widths to find responsive issues

Requirements

Viewpo macOS app with MCP Bridge enabled (Settings → MCP Bridge → Start)
Node.js 20+

Setup

1. Install

npm install -g viewpo-mcp

Or run directly with npx (no install needed):

npx viewpo-mcp

2. Enable the MCP Bridge in Viewpo

Open Viewpo on your Mac
Go to Settings → MCP Bridge
Click Start to enable the bridge server
Copy the auth token (click the copy button next to the token)

3. Configure your AI assistant

Claude Code

Add to your MCP config (~/.claude/mcp.json or project .mcp.json):

{
  "mcpServers": {
    "viewpo": {
      "command": "npx",
      "args": ["-y", "viewpo-mcp"],
      "env": {
        "VIEWPO_AUTH_TOKEN": "<paste token from step 2>"
      }
    }
  }
}

Cursor

Add to your Cursor MCP settings (.cursor/mcp.json):

{
  "mcpServers": {
    "viewpo": {
      "command": "npx",
      "args": ["-y", "viewpo-mcp"],
      "env": {
        "VIEWPO_AUTH_TOKEN": "<paste token from step 2>"
      }
    }
  }
}

Other MCP-compatible assistants

Any assistant supporting the Model Context Protocol can use viewpo-mcp. Set the command to npx -y viewpo-mcp and provide the VIEWPO_AUTH_TOKEN environment variable.

Tools

`viewpo_screenshot`

Capture screenshots of a URL at one or more viewport widths. Returns base64 JPEG images.

url:       "https://example.com"           (required)
viewports: [{ width: 375, name: "phone" }, (optional, defaults to 1920px desktop)
            { width: 1920, name: "desktop" }]

Common widths: 375 (phone), 820 (tablet), 1920 (desktop).

`viewpo_get_layout_map`

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

url:      "https://example.com"    (required)
viewport: 1920                     (optional, default 1920)
selector: ".main-content"          (optional, scope to subtree)

`viewpo_compare_viewports`

Compare the layout of a URL at two different viewport widths. Returns elements whose size or CSS styles differ between the two viewports.

url:        "https://example.com"  (required)
viewport_a: 375                    (required)
viewport_b: 1920                   (required)
selector:   ".hero"                (optional, scope to subtree)

Environment variables

| Variable | Required | Default | Description | |----------|----------|---------|-------------| | VIEWPO_AUTH_TOKEN | Yes | — | Bearer token from Viewpo Settings → MCP Bridge | | VIEWPO_PORT | No | 9847 | Port the Viewpo bridge server listens on |

How it works

AI Assistant (Claude Code / Cursor / Windsurf)
    | stdio (MCP protocol)
    v
viewpo-mcp (this package)
    | HTTP localhost:9847
    v
Viewpo macOS app (NWListener)
    | WKWebView rendering
    v
Headless browser pool (off-screen, up to 4 concurrent pages)

The Viewpo app runs a local HTTP server on localhost:9847. This MCP server translates tool calls into HTTP requests to that bridge. The app loads pages in headless WKWebView instances with real CSS viewport simulation — media queries fire at the target width, not the physical screen width.

Key advantage: WKWebView bypasses X-Frame-Options entirely. Any website loads, regardless of security headers that would block iframe-based tools.

Example workflow

You: "The hero section looks broken on mobile"

AI:  1. viewpo_screenshot("https://preview.example.com", [{width: 375}, {width: 1920}])
        → Sees the layout at both sizes
     2. viewpo_compare_viewports("https://preview.example.com", 375, 1920)
        → Gets structured diff: ".hero img" is 1200px wide on mobile (overflowing)
     3. Fixes the CSS
     4. viewpo_screenshot("https://preview.example.com", [{width: 375}])
        → Verifies the fix

Development

git clone https://github.com/littlebearapps/viewpo-mcp.git
cd viewpo-mcp
npm install
npm run build     # compile TypeScript
npm run dev       # watch mode

Licence

MIT - see LICENSE.

Contract & API

Machine endpoints, protocol fit, contract coverage, invocation examples, and guardrails for agent-to-agent use.

MissingGITHUB MCP

Endpoints

Dossier API Snapshot API Contract API Trust API

Contract coverage

Status

missing

Auth

None

Streaming

Data region

Unspecified

Protocol support

MCP: self-declared

Requires: none

Forbidden: none

Guardrails

Operational confidence: low

No positive guardrails captured.

Invocation examples

curl -s "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/snapshot"

curl -s "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/contract"

curl -s "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/trust"

Reliability & Benchmarks

Trust and runtime signals, benchmark suites, failure patterns, and practical risk constraints.

Missingruntime-metrics

Trust signals

Handshake

UNKNOWN

Confidence

unknown

Attempts 30d

unknown

Fallback rate

unknown

Runtime metrics

Observed P50

unknown

Observed P95

unknown

Rate limit

unknown

Estimated cost

unknown

Do not use if

Contract metadata is missing or unavailable for deterministic execution.

No benchmark suites or observed failure patterns are available.

Media & Demo

Every public screenshot, visual asset, demo link, and owner-provided destination tied to this agent.

Missingno-media

No screenshots, media assets, or demo links are available.

Related Agents

Neighboring agents from the same protocol and source ecosystem for comparison and shortlist building.

Self-declaredprotocol-neighbors

GITLAB_AI_CATALOGgitlab-mcp

Rank

A Model Context Protocol (MCP) server for GitLab

Traction

No public download signal

Freshness

Updated 2d ago

MCP

GITLAB_PUBLIC_PROJECTSgitlab-mcp

Rank

A Model Context Protocol (MCP) server for GitLab

Traction

No public download signal

Freshness

Updated 2d ago

MCP

GITLAB_AI_CATALOGrmcp-openapi

Rank

Expose OpenAPI definition endpoints as MCP tools using the official Rust SDK for the Model Context Protocol (https://github.com/modelcontextprotocol/rust-sdk)

Traction

No public download signal

Freshness

Updated 2d ago

MCP

GITLAB_AI_CATALOGrmcp-actix-web

Rank

An actix_web backend for the official Rust SDK for the Model Context Protocol (https://github.com/modelcontextprotocol/rust-sdk)

Traction

No public download signal

Freshness

Updated 2d ago

MCP

Machine Appendix

Contract JSON

{
  "contractStatus": "missing",
  "authModes": [],
  "requires": [],
  "forbidden": [],
  "supportsMcp": false,
  "supportsA2a": false,
  "supportsStreaming": false,
  "inputSchemaRef": null,
  "outputSchemaRef": null,
  "dataRegion": null,
  "contractUpdatedAt": null,
  "sourceUpdatedAt": null,
  "freshnessSeconds": null
}

Invocation Guide

{
  "preferredApi": {
    "snapshotUrl": "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/snapshot",
    "contractUrl": "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/contract",
    "trustUrl": "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/trust"
  },
  "curlExamples": [
    "curl -s \"https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/snapshot\"",
    "curl -s \"https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/contract\"",
    "curl -s \"https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/trust\""
  ],
  "jsonRequestTemplate": {
    "query": "summarize this repo",
    "constraints": {
      "maxLatencyMs": 2000,
      "protocolPreference": [
        "MCP"
      ]
    }
  },
  "jsonResponseTemplate": {
    "ok": true,
    "result": {
      "summary": "...",
      "confidence": 0.9
    },
    "meta": {
      "source": "GITHUB_MCP",
      "generatedAt": "2026-04-17T05:22:06.872Z"
    }
  },
  "retryPolicy": {
    "maxAttempts": 3,
    "backoffMs": [
      500,
      1500,
      3500
    ],
    "retryableConditions": [
      "HTTP_429",
      "HTTP_503",
      "NETWORK_TIMEOUT"
    ]
  }
}

Trust JSON

{
  "status": "unavailable",
  "handshakeStatus": "UNKNOWN",
  "verificationFreshnessHours": null,
  "reputationScore": null,
  "p95LatencyMs": null,
  "successRate30d": null,
  "fallbackRate": null,
  "attempts30d": null,
  "trustUpdatedAt": null,
  "trustConfidence": "unknown",
  "sourceUpdatedAt": null,
  "freshnessSeconds": null
}

Capability Matrix

{
  "rows": [
    {
      "key": "MCP",
      "type": "protocol",
      "support": "unknown",
      "confidenceSource": "profile",
      "notes": "Listed on profile"
    },
    {
      "key": "mcp",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "model-context-protocol",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "viewpo",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "viewport",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "responsive",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "screenshot",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "ai",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "claude",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "cursor",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "webview",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "frontend",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "testing",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    },
    {
      "key": "cli",
      "type": "capability",
      "support": "supported",
      "confidenceSource": "profile",
      "notes": "Declared in agent profile metadata"
    }
  ],
  "flattenedTokens": "protocol:MCP|unknown|profile capability:mcp|supported|profile capability:model-context-protocol|supported|profile capability:viewpo|supported|profile capability:viewport|supported|profile capability:responsive|supported|profile capability:screenshot|supported|profile capability:ai|supported|profile capability:claude|supported|profile capability:cursor|supported|profile capability:webview|supported|profile capability:frontend|supported|profile capability:testing|supported|profile capability:cli|supported|profile"
}

Facts JSON

[
  {
    "factKey": "docs_crawl",
    "category": "integration",
    "label": "Crawlable docs",
    "value": "6 indexed pages on the official domain",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  },
  {
    "factKey": "vendor",
    "category": "vendor",
    "label": "Vendor",
    "value": "Littlebearapps",
    "href": "https://github.com/littlebearapps/viewpo-mcp#readme",
    "sourceUrl": "https://github.com/littlebearapps/viewpo-mcp#readme",
    "sourceType": "profile",
    "confidence": "medium",
    "observedAt": "2026-02-25T03:19:31.258Z",
    "isPublic": true
  },
  {
    "factKey": "protocols",
    "category": "compatibility",
    "label": "Protocol compatibility",
    "value": "MCP",
    "href": "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/contract",
    "sourceUrl": "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/contract",
    "sourceType": "contract",
    "confidence": "medium",
    "observedAt": "2026-02-25T03:19:31.258Z",
    "isPublic": true
  },
  {
    "factKey": "handshake_status",
    "category": "security",
    "label": "Handshake status",
    "value": "UNKNOWN",
    "href": "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/trust",
    "sourceUrl": "https://xpersona.co/api/v1/agents/mcp-littlebearapps-viewpo-mcp/trust",
    "sourceType": "trust",
    "confidence": "medium",
    "observedAt": null,
    "isPublic": true
  }
]

Change Events JSON

[
  {
    "eventType": "docs_update",
    "title": "Docs refreshed: Sign in to GitHub · GitHub",
    "description": "Fresh crawlable documentation was indexed for the official domain.",
    "href": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceUrl": "https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2Fopenclaw%2Fskills%2Ftree%2Fmain%2Fskills%2Fasleep123%2Fcaldav-calendar",
    "sourceType": "search_document",
    "confidence": "medium",
    "observedAt": "2026-04-15T05:03:46.393Z",
    "isPublic": true
  }
]

viewpo-mcp answer-first brief

Executive Summary

Evidence Ledger

Release & Crawl Timeline

Artifacts Archive

Docs & README

viewpo-mcp

What it does

Requirements

Setup

1. Install

2. Enable the MCP Bridge in Viewpo

3. Configure your AI assistant

Claude Code

Cursor

Other MCP-compatible assistants

Tools

viewpo_screenshot

viewpo_get_layout_map

viewpo_compare_viewports

Environment variables

How it works

Example workflow

Development

Licence

Links

Contract & API

Reliability & Benchmarks

Media & Demo

Related Agents

`viewpo_screenshot`

`viewpo_get_layout_map`

`viewpo_compare_viewports`