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 research, structured note extraction, and headless browser rendering. You enter any topic or question, and a coordinated team of AI agents researches the concept, formats it into a notebook layout using Google handwriting fonts (Caveat), and captures a high-resolution .png notebook page screenshot.

Deployment & Repository Links:

• GitHub Repository:

  himanshuyeolecse-jpg / multi-agent-handwritten-notes

  An autonomous multi-agent system built with LangGraph, Tavily, and Playwright that researches complex topics and renders handwritten-style student study notes into PNG screenshots.

  multi-agent-handwritten-notes

  An autonomous multi-agent system built with LangGraph, Tavily, and Playwright that researches complex topics and renders handwritten-style student study notes into PNG screenshots.

  🎓 Multi-Agent Handwritten Notes Generator

  An autonomous multi-agent workflow built using LangGraph, LangChain, Tavily Search, and Playwright. The system researches complex technical concepts and dynamically compiles the findings into styled, handwritten-notebook PNG screenshots.

  ---

  🏗️ System Architecture

  [ User Input / Prompt ] │ ▼ [ Researcher Node ] ── (Tavily Web Search & Summarization) │ ▼ [ Note Renderer Node ] ── (HTML/CSS + Google Caveat Font + Playwright Screenshot) │ ▼ [ Critic Node ] ── (Validation Check: Is Output Complete?) │ Approved? ──► No ──► [ Researcher Node ] │ Yes ▼ [ PNG Screenshot Saved ]

  ⚡ Features

  • Autonomous Research: Uses Tavily API to fetch up-to-date technical context.
  • Dynamic HTML/CSS Rendering: Formats structured summaries into a paper-notebook layout utilizing…

  View on GitHub

Live Application: https://multi-agent-handwritten-notes-uyc8am8kwydzwgjufxo3tp.streamlit.app/

Your Agents

The system uses a stateful multi-agent graph with discrete responsibilities:

1. Researcher Agent (researcher_node):

   • Role: Queries the web via the Tavily API to gather technical context, then summarizes key concepts into structured bullet points, definitions, and exam tips.
   • Temperature: 0.0 for deterministic, accurate factual extraction.

2. Note Renderer Agent (note_renderer_node):

   • Role: Converts structured research text into styled HTML/CSS featuring lined notebook paper, margin lines, and Google's Caveat handwriting font. It then spins up a headless Playwright Chromium instance to capture a pixel-perfect .png screenshot.

3. Critic Agent (critic_node):

   • Role: Acts as a quality control guardrail. It checks that notes meet character thresholds and verifies the screenshot file was successfully generated before marking the loop as APPROVED. If validation fails, it routes back for reflection.

Agent Workflow Diagram

[ User Prompt ]
│
▼
[ Researcher Agent ] ──► (Tavily Search + Summarization)
│
▼
[ Note Renderer Agent ] ──► (HTML/CSS + Playwright Screenshot)
│
▼
[ Critic Agent ] ──► Approved? ──► [ Output PNG Saved ]
│                   │
└─────── No ────────┘

Key Learnings

• Headless Browsers for Generative UI: Using LLMs to produce structured HTML/CSS coupled with Playwright for rendering turned out to be far more reliable and controllable for generating handwritten documents than standard diffusion-based image models.
• Managing Dict vs Object State: Handling message structures across different agent frameworks taught me the value of creating fail-safe input extractors for state objects to avoid runtime key errors during agent transitions.
• Deployment System Dependencies: Deploying headless browsers in cloud environments requires careful management of Linux system dependencies (packages.txt with Chromium) alongside standard Python requirements.