E2E Screenshot Live Hosting Pattern

When deploying web applications to a live URL (e.g., via Nginx) and you want to visually prove the deployment in chat using a markdown embed, you can capture and self-host the screenshot dynamically.

Procedure

1. Ensure the Webroot Exists Ensure your static build folder (e.g., build/ or public/) is being served by your web server (Nginx/Caddy).

2. Capture and Save Directly to Webroot Use the browser tool to navigate to the live URL, wait for network idle, and save the screenshot directly inside the served folder.

   // Inside browser(action="run")
   await page.screenshot({ 
       path: '/home/user/my-project/build/screenshot.png', 
       fullPage: true 
   });
   return { success: true, path: 'https://my-subdomain.com/screenshot.png' };
   

3. Share via Markdown Embed Because the screenshot was saved to the webroot, it is instantly publicly accessible. You can embed it directly in your chat response:

   ![Visual Confirmation](https://my-subdomain.com/screenshot.png)
   

Why this works: It bypasses the need for local file viewing capabilities in the chat frontend and provides undeniable proof that the live URL is correctly resolving and styling the assets.