Autonomous AI Study Notes: A Multi-Agent System with LangGraph and Streamlit
This post is my submission for DEV Education Track: Build Multi-Agent Systems with ADK . What I Built I built an Autonomous Multi-Agent Handwritten Notes Generator . Students and educators often need clean, visual study guides that resemble real handwritten notes, but manually summarizing technical subjects and formatting them takes hours. This system solves that by combining autonomous web…
This report details an Autonomous Multi-Agent system designed to generate handwritten-style study notes for complex technical topics. The system, built using LangGraph, Tavily Search, and Playwright, aims to automate the process of researching, formatting, and rendering notes into PNG screenshots. Students and educators often struggle with manually creating clean, visual study guides, as the process can be time-consuming.
This autonomous system streamlines the workflow by combining web research, structured note extraction, and headless browser rendering.
The user inputs a topic or question, and a coordinated team of AI agents handles the research, formatting, and screenshot generation. The system architecture consists of three primary agents: the Researcher Agent, the Note Renderer Agent, and the Critic Agent. Each agent has a specific role and operates within the autonomous workflow.
The Researcher Agent, responsible for querying the web and summarizing key concepts, uses the Tavily API to gather up-to-date technical context. It ensures accurate, deterministic extraction by setting a temperature of 0.0. The Note Renderer Agent converts the structured research text into styled HTML/CSS, incorporating lined notebook paper, margin lines, and Google's Caveat handwriting font. It then utilizes a headless Chromium instance running Playwright to capture a high-resolution .png screenshot of the rendered note.
The Critic Agent acts as a quality control measure, validating that the generated notes meet character thresholds and that the screenshot file has been successfully created. If validation fails, the Critic Agent routes the workflow back for refinement. The system's diagram illustrates the user prompt, the flow through each agent, and the approval process leading to the saved output PNG.
The report concludes with key learnings from the project, emphasizing the effectiveness of using headless browsers for generating structured UI elements. The integration of LLMs to produce HTML/CSS combined with Playwright for rendering proved to be a more reliable and controllable approach than standard diffusion-based image models.
Additionally, the report highlights the importance of managing state objects and dependency handling in a multi-agent system, particularly when deploying headless browsers in cloud environments.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
