Explicit app opt-in.
The reviewed app must install or load the SDK in a preview or review environment before element comments are available.
Live Preview Reviews
Review the real thing.
Live Preview Reviews let teams use the actual preview app, select a UI element or cropped screenshot area, and leave feedback with route, viewport, and target context.
The reviewed app must be frameable by Commentary. The review SDK enables selector context; screenshot target mode stores only a bounded cropped area after explicit browser capture.
- Real preview app
- Selector or screenshot targets
- Bounded context
- Agent-ready handoff
Targeted feedback with a context packet.
Reviewers can use the app normally, switch into comment mode, select one UI element by SDK or capture a bounded screenshot area, and attach feedback to the target context.
SDK context packetBounded by the app
- Route
- /billing
- Element
- BillingSummary
- Selector
- [data-review-id="billing-summary"]
- Viewport
- 1440px
- Role
- Admin
The instrumented preview chooses what route, selector, viewport, role, and element metadata Commentary receives. This is not arbitrary website scraping.
How it works.
Live Preview Reviews start from explicit instrumentation and a review session created by someone who controls the app.
- 01
Instrument
Add the SDK to the preview app and configure the Commentary parent origin.
- 02
Create review
Start a review for a deployed preview or localhost URL you control.
- 03
Select element
Switch to comment mode and pick the UI element under discussion.
- 04
Resolve feedback
Use the structured context packet to guide developers and agents.
Security and opt-in are part of the product.
Live Preview Reviews rely on customer-owned frameable previews, exact iframe origins, bounded SDK messages for selector comments, and explicit browser capture for screenshot comments. They are not a way to inspect arbitrary websites.
Origin-bound messaging.
Commentary accepts SDK messages from the exact iframe origin and validates the review protocol for that review session.
Bounded screenshot fallback.
When SDK selector context is unavailable, screenshot comments store the cropped review area plus page and image cursor coordinates.
Security detail.
Read the security page for access boundaries, data handling, and preview-app review limits.
SecuritySDK, API, and MCP turn UI feedback into actionable context.
Developer surfaces support SDK setup, review creation, and agent follow-through while the product stays focused on the live interface.
Agent
Reviewer selects BillingSummary in the live app.
Commentary stores selector, route, viewport, and role context.
Developer or agent resolves feedback from the structured packet.
Reviewer
review: live-preview
route: /billing
selector: [data-review-id="billing-summary"]
viewport: 1440px
status: ready for agentCreate a review for an opted-in preview.
Use Live Preview Reviews when the real interface, route, and selected element matter.