Skip to content

README.md

Latest commit

 

History

History
95 lines (67 loc) · 3.93 KB

README.md

File metadata and controls

95 lines (67 loc) · 3.93 KB
Raw

Screenshot Generation

Automated screenshots of the McpMux desktop app for docs and marketing.

Quick Start

# 1. Build the desktop app (required — E2E runs against the release binary)
pnpm build

# 2. (Optional) Start the discover web UI for web screenshots
cd ../mcpmux.discover.ui && pnpm dev &

# 3. Run the screenshot capture spec
pnpm exec wdio run tests/e2e/wdio.conf.ts --spec tests/e2e/specs/capture-screenshots.manual.ts

What Gets Captured

Page Screenshots

Screenshot Page Type Content
dashboard.png Dashboard content area Gateway status, stats cards, client config snippet
servers.png My Servers content area Installed servers with connection states
discover.png Discover content area Server registry (mock bundle with 14 servers)
spaces.png Spaces content area Workspace cards (default + 5 additional)
featuresets.png FeatureSets content area Permission bundles
clients.png Clients full window OAuth consent modal over connected clients (Cursor, VS Code, Windsurf, Claude Code)
settings.png Settings content area App settings page

Detail Screenshots (modals, panels, focused views)

Screenshot Content
featureset-detail.png Feature set panel with permission checkboxes
client-detail.png Client detail panel with Permissions section (Quick Settings collapsed)
client-permissions.png Client panel with Effective Features section expanded (resolved tools/prompts/resources)
server-expanded.png Server card expanded showing tools, prompts, resources
space-switcher.png Sidebar with space switcher dropdown open (full window)
install-modal.png Server install modal from registry

Web Screenshots

Screenshot Content
discover-web.png Discover web UI (Next.js site — requires dev server on port 3000)

Output Locations

Screenshots are saved to two locations:

  • mcp-mux/docs/screenshots/ — Used by the project README
  • mcpmux.discover.ui/public/screenshots/ — Used by the discover website

Screenshot Strategy

  • Page screenshots capture the <main> content area only (excluding sidebar and titlebar) for maximum readability when displayed on the website
  • Detail screenshots capture specific elements (modals, panels) for feature-focused views
  • Full-window screenshots are used only when sidebar context is valuable (e.g., space switcher)
  • Window size is 1600×1000 — content area is ~1360×964

Editing Mock Data

All screenshot mock data lives in a single file:

tests/e2e/mocks/screenshot-preseed.ts

This controls:

  • Spaces created (name, icon)
  • Servers installed and enabled (by ID from fixtures.ts)
  • FeatureSets created (name, description)

OAuth client registrations are defined in capture-screenshots.manual.ts itself (the OAUTH_CLIENTS constant).

Server icons use real GitHub avatar URLs matching the production server definitions in mcp-servers/servers/*.json.

After editing, re-run the capture command above.

How It Works

  1. The E2E framework launches the Tauri app with a mock bundle API (port 8787)
  2. The before() hook seeds data via window.__TAURI_TEST_API__ (spaces, servers, feature sets)
  3. OAuth clients are registered via DCR POST to the gateway and then approved
  4. Each it() block navigates to a page, optionally opens a panel/modal, and saves a focused screenshot
  5. The discover-web screenshot navigates to localhost:3000 (Next.js dev server)

Notes

  • This spec uses .manual.ts (not .wdio.ts) so it is excluded from pnpm test:e2e — it only runs when invoked explicitly
  • Server definitions come from tests/e2e/mocks/mock-bundle-api/fixtures.ts
  • The app must be built before running (pnpm build) — the signing error is non-blocking
  • For discover-web screenshots, start the discover UI dev server first: cd ../mcpmux.discover.ui && pnpm dev