Keeping docs in sync with your UI using Claude Code and browser automation

Teams employing LLMs for coding are accelerating their shipping processes but encountering challenges with outdated documentation due to frequent UI changes. To address this, Logfire implemented a solution using a headless browser and Claude Code to automate the updating of documentation by capturing screenshots and inserting them into Markdown files in one terminal session. This process, which uses Vercel's agent-browser, allows for seamless integration of UI changes into documentation by navigating the UI, capturing relevant screenshots, and updating step descriptions. The workflow was turned into a reusable skill called docs-updater, enabling developers to update documentation concurrently with platform developments without needing to switch projects or relearn documentation conventions. This approach not only ensures that documentation remains current with UI refactors but also highlights the importance of using synthetic data to avoid capturing personally identifiable information in screenshots.