Skip to main content
Was this helpful?

MCP Screenshot Workflow

Use this workflow when updating screenshots for MCP, people groups, group-shared calendar documentation, and the enterprise reservation system.

Demo Account​

PrimeCal seeds a canonical documentation account:

  • username: mayblate
  • password: password123
  • timezone: Europe/Budapest
  • seeded calendars: Work, Personal, Side projects

Seed locally with:

npm --prefix backend-nestjs run seed

Runtime​

  1. Start the backend, normally on http://127.0.0.1:8081.
  2. Start the frontend, normally on http://127.0.0.1:4173.
  3. Sign in as mayblate.
  4. Use the Browser MCP Manual Checklist when full automation is unavailable.
  5. Follow the project Browser MCP Testing Protocol linked from MCP Server Architecture.

People-Group Screenshot Set​

Store people-group screenshots under docs/assets/user-guide/sharing/.

Recommended names:

  • people-groups-list.png
  • people-group-invite-form.png
  • group-invite-notification.png
  • share-calendar-with-people-group.png

Recommended flow:

  1. Open /app.
  2. Open the calendar workspace.
  3. Open People groups.
  4. Create a group named Family Planning.
  5. Invite a docs-safe address such as teammate@example.com.
  6. Attach Work or Personal to the group with read or write permission.
  7. Open the notification center for an account with a pending invite and capture the accept/decline state.

Keep screenshots focused on the workflow. Avoid exposing real email addresses, invite tokens, access tokens, or internal numeric IDs.

MCP Evidence Screenshots​

For MCP docs, capture:

  • tools/list showing primecal.calendar.userGroups.* tools.
  • resources/list showing primecal://calendar/user-groups.
  • A tools/call response for listing people groups.
  • A scoped denial example only if it helps explain permission boundaries.

For the general agent screenshot runbook, use docs/assets/agents/SCREENSHOT_CAPTURE.md.

For enterprise reservation and public booking screenshots, use:

For billing and paid-booking states specifically, combine the runbook with the local Playwright docs capture pass:

E2E_DOCS_SCREENSHOTS=true npm run test:e2e:web -- --grep "Docs screenshots"

That pass is the quickest way to refresh:

  • disconnected billing
  • connected billing
  • paid resource-type pricing state
  • customer payment-pending step

Maintenance Notes​

  • Update screenshots whenever people-group labels, notification invite actions, or MCP tool names change.
  • Keep the user guide screenshots under docs/assets/user-guide/....
  • Keep MCP and agent screenshots under docs/assets/agents/... unless a user-guide page needs the image directly.
  • Refresh enterprise reservation screenshots whenever active-organisation UI, public booking branding, payment-status messaging, or reservation MCP tool names change.
  • Refresh organisation billing screenshots whenever Stripe status labels, default currency controls, or paid-booking warnings change.
  • Re-run docs link and metadata checks after moving image files or pages.