Introducing Maple: The Frontend Review Toolkit

Description and use

Maple simplifies visual review by embedding comments in the preview, automatically handing them to agents, and gating merges until resolved.

Problem

Reviewing frontend changes is slow because comments arrive in separate threads and need manual translation into actionable tasks for coding agents.

Outcome

Maple streamlines visual feedback by embedding comments directly in the preview, automating context capture, and integrating with coding agents and CI to enforce merge gates.

Workflow

• 1. Reviewer points at a component or text in the preview URL using Maple overlay.
• 2. Maple records the element’s file, line, column, viewport, theme, and a screenshot.
• 3. The comment is sent to the MCP server via the Maple CLI.
• 4. The coding agent retrieves comments with list_comments, waits for new ones, and obtains full context with get_comment_context.
• 5. The agent applies fixes and resolves comments with resolve_comment, naming the commit.
• 6. CI checks maple/visual-review; merge is blocked until all comments are resolved.
• 7. Optional: use @maple-kit/mock to simulate any page state for review.
• 8. Optional: use @maple-kit/lint to auto‑check design‑system rules on every PR.

Evidence

Maple records where they pointed, what they were looking at and who they are, then hands it to a coding agent over MCP, anchored to file:line;

Source

CI blocks while a visual comment is open, and the check is real and named: maple/visual-review.

Source

@maple-kit/mock rewrites a page's API responses into a named state.

Source