Visual Explainer: The Open-Source Agent for Automated Visual Documentation
Ever get tired of manually taking screenshots for your documentation or trying to describe a UI bug in a pull request? Or maybe you've wished there was a way to automatically generate visual guides for your team's internal processes. That's where Visual Explainer comes in—it's an open-source agent designed to automate the tedious parts of visual documentation and code reviews.
Think of it as a helpful bot that can watch your application, understand what's happening on screen, and generate clear, annotated documentation. It turns workflows that usually require manual clicking and typing into something that can be automated and scaled.
What It Does
Visual Explainer is a Node.js-based tool that acts as an automated agent for your browser. You give it a starting URL and a set of instructions, and it navigates through your web application, taking screenshots at each step. It doesn't just capture images; it can generate descriptive captions and annotations, creating a full, step-by-step visual walkthrough automatically.
At its core, it uses Puppeteer for browser automation and can integrate with vision models (like OpenAI's GPT-4V) to analyze screenshots and describe what's happening. This means the documentation it creates isn't just a series of images—it's a coherent guide.
Why It's Cool
The clever part is how it combines several technologies into a single, focused workflow. Instead of just recording a video or taking random screenshots, it follows a logical path through your app. This makes it perfect for a few key use cases:
- Automated Tutorial Creation: Need to document a new feature for users? Point Visual Explainer at it and get a tutorial generated in minutes.
- Visual Regression Testing: You can script it to navigate to key application states and capture the UI. This creates a visual baseline that can be checked during future builds.
- Enhanced Code Reviews: For frontend PRs, you can generate a visual diff that shows not just code changes, but how those changes actually look in the browser. This provides crucial context that plain diffs can miss.
- Internal Process Documentation: Quickly create guides for onboarding, showing how to use internal admin panels or complex workflows.
It's open-source and modular, so you can tweak how it captures screens, what details it focuses on, and where it outputs the final documentation.
How to Try It
The project is hosted on GitHub and is set up to be run locally with Node.js. Here’s the quick start:
Clone the repo:
git clone https://github.com/nicobailon/visual-explainer.git cd vis