OpenCode does not replace a browser renderer. Use OpenCode to write and edit your HTML/CSS, then connect a browser MCP server—most clearly, Playwright MCP—to open your local app, inspect it and capture viewport, full-page or element screenshots. The practical loop is: run the site locally, render it in Chromium through MCP, inspect the result, compare it with your mockup or baseline, and ask OpenCode to refine the code.
What OpenCode does—and what the browser tool does
OpenCode is the coding loop: it creates files, edits styles, runs commands and responds to your feedback. The browser MCP server supplies the missing rendering and visual context. It can navigate to a URL, inspect the DOM and accessibility tree, evaluate JavaScript, expose console and network problems, and save screenshots.
That division matters. A screenshot is evidence of what a browser rendered at a particular viewport and state; it is not proof that the HTML is semantically correct or that an interaction works. Have OpenCode inspect the page as well as looking at the image.
Prerequisites and a safe project setup
- An OpenCode installation. It can run in a terminal, desktop application or web application. The CLI also provides
opencode runfor non-interactive prompts andopencode webfor a browser-accessible OpenCode server. - A local HTML/CSS project with a development server, such as
http://localhost:3000. Use the command your framework normally uses and record the exact port. - Node.js and a Chromium-capable environment for Playwright MCP.
OpenCode’s web server binds to 127.0.0.1 by default. Keep that default while developing. If you deliberately expose it to a network, set OPENCODE_SERVER_PASSWORD and configure CORS; leaving the password variable unset leaves an exposed server unsecured.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
Connect Playwright MCP to OpenCode
Start the MCP server
Run the documented local MCP command from a terminal:
npx -y @playwright/mcp@latest --browser chromiumConfigure that command as a local server in OpenCode’s mcp configuration object. The exact file location and UI vary by OpenCode release, so use the MCP settings exposed by your installation rather than copying an outdated path. Restart OpenCode after saving the entry, then verify that the server is available:
opencode mcp listOpenCode’s MCP integration makes configured tools available to the model alongside its built-in tools. In a new conversation, ask it to navigate to your local URL and confirm the page title or a distinctive heading before requesting a screenshot.
Start the page
Use the project’s normal development command, for example:
Recommended Free Tools
npm run devDo not assume the port. Copy the URL printed by the server, including any base path, and give it to OpenCode. If the app needs a login, seed data or a feature flag, make that state deterministic before capturing.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The repeatable screenshot workflow
- Implement. Ask OpenCode to create or modify the component and its HTML/CSS.
- Render locally. Prompt the Playwright tool to open the exact localhost route.
- Inspect. Ask for DOM and accessibility inspection, console errors, failed network requests and computed layout details. This catches clipped text, missing content and runtime failures that an image alone can hide.
- Capture the right scope. Save a viewport, full-page or element screenshot as appropriate.
- Compare. Put the screenshot beside your mockup, or compare it with a saved baseline. Describe concrete differences—spacing, type scale, color, alignment or responsive behavior.
- Refine. Have OpenCode change one coherent group of styles, then repeat the render and inspection steps.
Viewport screenshot
Use a viewport capture when you care about the visible fold, a responsive breakpoint or a hero section. Specify the viewport width and height before capture so later runs are comparable.
Full-page screenshot
Use full-page capture for a complete landing page or documentation route. Long pages often contain lazy-loaded images; wait until the relevant content has appeared, and verify the bottom of the image rather than assuming the browser captured every asset.
Element screenshot
Use an element capture for a card, component or isolated visual test. Select the element with a stable CSS selector, not a generated class name that changes between builds.
Visual-diff baseline
For regression checks, save a known-good baseline and compare future captures with a screenshot-diff routine. The browser-control package documents page.screenshot({ path: ..., scale: "css" }) and a diff result containing changed pixels and changed ratio. Treat the ratio as a review signal, not an automatic quality verdict: a font update or intentional content change can produce a large difference.
Prompts that produce useful OpenCode results
Give the agent an observable task and a stopping condition. For example:
Rank #3
Open http://localhost:3000/pricing in the browser. Set a 1440x900 viewport. Inspect the DOM, accessibility tree, console and failed requests. Capture a full-page screenshot at screenshots/pricing.webp. Compare it with mockups/pricing.png, list the five largest visual differences, then update only the CSS files and repeat the capture.For a responsive check:
Render http://localhost:3000/dashboard at 375x812, 768x1024 and 1440x900. Capture the main content element at each size. Report horizontal overflow, clipped text, breakpoint changes and any console errors before editing.For interaction state, tell the tool exactly what to click and what must be visible afterward:
Open http://localhost:3000/checkout, click the button with text "Show details", wait for the details panel, then capture the panel element. If the click fails, inspect the DOM and console instead of guessing a selector.Make captures reproducible
- Fix the viewport and scale. Use the same width, height and device-pixel or CSS scale for baseline and comparison runs.
- Control timing. Wait for a specific selector, a known delay or network activity to settle. Waiting for a selector is safer than an arbitrary long sleep when the page exposes a reliable readiness marker.
- Stabilize content. Freeze clocks, random data, rotating banners and personalized responses where possible. Use stable test fixtures.
- Load fonts and images. Confirm that web fonts have finished loading and that lazy images are in view or explicitly triggered before capture.
- Save explicit paths. Put screenshots and diff reports in versioned, predictable directories so a later run compares like with like.
- Check more than pixels. Pair the image with accessibility, DOM, JavaScript, console and network inspection.
Security when using OpenCode Web
Localhost-only access is the safest default. If teammates or a remote browser must reach the OpenCode server, choose the hostname deliberately, set OPENCODE_SERVER_PASSWORD, and restrict CORS to the origins that need it. Do not expose an unauthenticated development server containing source code, environment variables or authenticated browser state.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Common failures and fixes
The MCP server is not listed
Check that the command is configured under the mcp object, restart OpenCode, and run opencode mcp list. Confirm that Node.js can execute npx and that the command has not been changed to a package or flag unavailable in your installed version.
The browser cannot reach localhost
Make sure the development server is running and that the browser process can access the same host. Use the exact port and route printed by the server. A service bound only to an unexpected interface, a stopped process or a path-prefix mismatch commonly causes a navigation failure.
The screenshot is blank or incomplete
Inspect console and network output first. Wait for a readiness selector, fonts and images; scroll or otherwise trigger lazy content for a full-page capture. Check that a cookie or login gate is not covering the page and that the route does not require an unavailable environment variable.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Text or layout changes between runs
Use a fixed viewport and CSS scale, stable fixtures and deterministic fonts. Disable animations or wait for them to finish. Dynamic timestamps, randomized IDs, ads and rotating content should be replaced with fixed test values.
The element selector fails
Ask the browser tool to inspect the DOM and choose a stable attribute or semantic role. Verify that the element is present after navigation and that it is inside the current frame; do not rely on a selector copied from a transient generated class.
The visual diff is unexpectedly large
Compare the viewport, browser engine, device scale, font availability and data first. Then inspect changed pixels and the changed ratio. If the change is intentional, create a new baseline with a review note instead of weakening the comparison threshold blindly.
Native screenshot support: describe it carefully
The documented OpenCode material covers MCP integration rather than a first-party OpenCode screenshot command. An issue requesting screen vision and browser-control tools was opened on September 10, 2026; that request is not evidence that native capture is available in your installed release. Check the current release notes and use MCP when you need a documented browser workflow.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo provides a single-request screenshot API when you need a rendered URL without managing a browser locally. It accepts consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing state in X-Page-Verdict and X-Billed headers. Its MCP server exposes take_screenshot, get_page_info and capture_pdf to Claude, Cursor and other MCP clients.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsOne-call cURL example (see the ScreenshotNeo documentation for parameters):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);It also supports full-page and CSS-selector captures, dark mode, device presets and custom viewports, retina scale, PDF output, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, TTL caching, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Existing parameter names used by other screenshot APIs work as well.
Every feature is included on every plan: 1,000 shots per month free with no card, then Starter costs $5 for 3,000 shots, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000 and Business $249 for 1,000,000; yearly billing gives two months free. Sign up free to get the 1,000 monthly screenshots with no card.
OpenCode screenshot checklist
- Run the app locally and record the exact URL.
- Configure Playwright MCP and verify it with
opencode mcp list. - Set a fixed viewport, scale and deterministic data.
- Inspect DOM, accessibility, console and network output.
- Capture viewport, full-page or element scope deliberately.
- Compare with a baseline or mockup, then refine and repeat.
- Keep OpenCode on localhost, or password-protect and restrict CORS before exposing it.
Frequently Asked Questions
Can OpenCode take a screenshot without MCP?
The documented workflow uses MCP for browser navigation and capture; it does not establish a first-party screenshot command. Connect a browser MCP server such as Playwright MCP.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Which screenshot should I use for a responsive layout?
Capture the same route at each target viewport, using fixed dimensions and scale. Use element captures for component checks and full-page captures for scrollable-page coverage.
Why inspect the DOM if I already have an image?
DOM, accessibility, console and network inspection reveals missing text, failed requests, invalid interaction states and runtime errors that pixels alone cannot explain.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
