Screenshot previews for GitHub PRs
Code review agent that takes screenshots of code diffs involving UI changes
Choose a repository
Select a Git provider to import a Git Repository
What is preview.new?
Computer use agent
An agent boots your dev server and captures screenshots of your UI on every PR.
GitHub comments
Screenshots are posted directly to your PR as comments for easy review.
Isolated dev servers
Each PR runs in a dedicated VM with your exact dev environment.
Configured repositories
No preview configs yet. Connect GitHub and import a repository to get started.
Want UI screenshots for your code reviews? Check out cmux - an open-source Claude Code/Codex manager with visual diffs!
reuse preview config component for step by step re 6k4tq#1124
Summary
This PR refactors the preview config component to be reusable in the step-by-step wizard flow. The same form components are now shared between the initial setup page and the sidebar wizard. Feel free to click around and explore. There may be some Easter eggs {-:
Changes
- Extract shared form components
- Add collapsible sections for wizard steps
- Sync state between views
Preview Screenshots
Captured 21 screenshots for commit ee59b00 (2025-12-03 06:56:40.263 UTC).
Full page view of the initial setup screen showing framework preset selector, maintenance/dev scripts, and environment variables sections all expanded
Header section showing 'Configure workspace' title
Framework preset selector showing 'Vite' selected with autofill hint
Maintenance and Dev Scripts section expanded showing script input fields
Environment Variables section expanded with name/value input fields and reveal/hide toggle
Full page view of workspace configuration showing sidebar with step-by-step wizard (step 3 active) and VS Code iframe embedded on the right
Back to project setup button in the sidebar
Sidebar header showing Configure workspace title and repository name
Step 1 (Maintenance and Dev Scripts) in collapsed state with checkmark badge
Step 2 (Environment Variables) in collapsed state with checkmark badge
Step 3 (Run scripts in VS Code terminal) expanded showing instructions and command block
Command block in step 3 showing combined maintenance and dev scripts with copy button
Full page view of workspace configuration at step 4 showing sidebar and browser VNC iframe on the right
Step 4 (Configure browser) expanded showing browser setup instructions
Step 3 (Run scripts) in collapsed state after moving to step 4
Save configuration button shown at the end of step 4
Step 1 scripts section re-expanded in sidebar showing compact form with script input fields
Step 2 environment variables section re-expanded in sidebar showing compact form with env var inputs
Full page view showing multiple steps expanded simultaneously in the sidebar demonstrating component reuse
Full page view after clicking back button, returning to the initial setup layout
Framework preset dropdown menu open showing all available options (Other, Next.js, Vite, Remix, Nuxt, SvelteKit, Angular, Create React App, Vue)
Generated by preview system
All checks have passed
1 neutral, 5 successful checks
No conflicts with base branch
Merging can be performed automatically.