Skip to content

feat(mcp): live page preview tool — render and screenshot agent-authored content #123

@perasperaactual

Description

@perasperaactual

Problem

The MCP server can write valid YAML (write_page) and show pre-canned component screenshots (preview_component), but an agent cannot see the rendered result of the content it actually wrote. The agent composes blind — it knows the schema is valid but can't verify visual correctness.

This is the gap between "schema-valid" and "looks right."

Why it matters

This is the single highest-leverage feature for a hackathon demo. It turns the story from "trust me, the schema validated" into "look at what the AI just built." It completes the AI authoring loop: introspect schema → write content → see rendered result → iterate.

Depends on

Proposed approach

Add a stackwright_preview_page MCP tool that:

  1. Accepts a slug parameter (page must already exist via write_page or add_page)
  2. Ensures the dev server is running (or starts one)
  3. Triggers a prebuild for the target page (or relies on the watcher from fix(build-scripts): hot recompilation on YAML and image content changes #122)
  4. Uses Playwright to navigate to the page URL and take a full-page screenshot
  5. Returns the screenshot as an MCP image content block

The infrastructure is 90% there:

  • Playwright is already a dev dependency (E2E + visual regression tests)
  • The screenshot pipeline exists in packages/e2e/
  • The prebuild system exists in @stackwright/build-scripts

Open questions

  • Should the tool manage its own dev server lifecycle, or require the user to have pnpm dev running?
  • Should it support inline YAML (write to a temp page, screenshot, clean up) for "what would this look like?" queries?
  • Desktop-only screenshot, or also mobile viewport?

Acceptance criteria

  • Agent calls write_page then preview_page and receives a screenshot of the rendered page
  • Screenshot reflects the actual YAML content, not stale/cached content
  • Works with co-located images
  • Returns useful error if dev server is not running or page doesn't exist
  • Response time under 10s for a single page preview

Metadata

Metadata

Assignees

No one assigned

    Labels

    priority:laterPlanned but not yet committed

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions