DEV Community: Himanshu Yeole

Autonomous AI Study Notes: A Multi-Agent System with LangGraph and Streamlit

Himanshu Yeole — Sat, 22 Aug 2026 09:19:35 +0000

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:

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.
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.
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.

🍴 Perfect Landing: Comfort Food — PatricStars ⭐

Himanshu Yeole — Sat, 08 Aug 2026 11:22:18 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing
Comfort food isn't just food. It's a memory, a mood, and sometimes a little piece of home. ❤️

For the Perfect Landing: Comfort Food Dev Challenge, I built PatricStars — an interactive comfort-food discovery platform designed to help users discover dishes that match their taste, region, mood, and cravings.

🌟 What is PatricStars?

PatricStars combines a playful food experience with a modern, polished landing page and personalized discovery flow.

The journey starts with a cinematic food-focused hero section and continues into a personalized experience guided by Patrick, our friendly food companion. 🩷

✨ Key Features
🎬 Cinematic food-video hero with Netflix-style rotating food previews
🔐 Login & Signup experience
🌎 Regional food discovery
🍴 Personalized food preferences
🩷 Interactive Patrick onboarding walkthrough
🤖 Comfort-food recommendations
🔎 Search and filtering
🍝 Detailed recipe pages
🥤 Drinks section
🍰 Dessert/Sweets section
👨‍🍳 Culinary Stars / Chef profiles
❤️ Favorites & collections
🧠 Comfort Match quiz
🏆 Achievements and food-explorer progress
👤 Personal profile
⚙️ Personalized settings
📱 Responsive interface
✨ Smooth micro-interactions and animations
🎨 The Design

I wanted PatricStars to feel:

Playful + Warm + Premium + Food-focused

The visual language uses soft cream backgrounds, vibrant pink accents, rounded cards, playful typography, food imagery, and Patrick-inspired illustrations.

The goal wasn't simply to create another recipe website. I wanted the experience to feel like opening a food app that already knows what kind of comfort you're looking for.

🩷 Meet Patrick

One of the main parts of the experience is Patrick.

Instead of throwing a traditional onboarding tutorial at the user, Patrick appears through interactive popups and guides users through the platform:

"Hey! Let me help you find something delicious." 🍴

He introduces the regional preferences, food preferences, recommendations, recipes, favorites, and other parts of the application.

🛠️ Built With
HTML
CSS
JavaScript
Responsive design
CSS animations
Video backgrounds / autoplay media
Interactive UI components

I also focused heavily on frontend fundamentals, visual hierarchy, responsiveness, accessibility, and meaningful interactions rather than making the page purely decorative.

🎯 The Goal

The idea behind PatricStars is simple:

Discover comfort food that feels like home.

Whether you're craving something from your region, trying a completely new cuisine, looking for a quick recipe, or simply asking "What should I eat today?" — PatricStars is designed to make that discovery fun.

🚀 Built for the Dev Challenge

Challenge: Perfect Landing: Comfort Food
Project: PatricStars ⭐
Theme: Comfort Food 🍜🍕🍰
Focus: Interactive frontend + personalized food discovery

I'd love to hear what you think!
What feature would you want to try first? 👀

DevChallenge #PerfectLanding #ComfortFood #WebDevelopment #Frontend #HTML #CSS #JavaScript #WebDesign #UIDesign #FoodTech #PatricStars

Demo

IMAGINE4

Himanshu Yeole — Tue, 30 Jun 2026 10:14:39 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

I built a IMAGINE4 designed to help users engage the engine to generate an IMAGINE4 coloring book prompt. To create this, I used core prompts that established a structured step-by-step UI framework, combined with Quick Presets and History track.

Key Prompts Used

The Architecture Prompt: "Act as an expert frontend developer. Build a clean, responsive single-page application for Imagine 4"
The Logic Prompt: "Create a JavaScript function that takes user inputs for casual user request and filters them against coloring book prompt to output a dynamic list..."

Demo

Live link - https://imagine4.netlify.app/

My Experience

Working through this track was an incredible deep-dive into rapid prototyping with AI. My biggest takeaway was learning how to effectively iterate on a prompt—instead of trying to get the AI to build the entire app at once, breaking it down into component-by-component prompts yielded much cleaner, bug-free results.

What surprised me most was how well the AI anticipated user experience nuances, like suggesting intuitive layout shifts for mobile viewports that I hadn't originally thought of.

Solstice Turing Simulation: An Interactive 3D Imitation Game

Himanshu Yeole — Sun, 21 Jun 2026 11:57:04 +0000

Solstice Turing Simulation: An Interactive 3D Imitation Game Powered by Google Gemini 🌅🤖

🪐 Development Team

Your Name/GitHub Handle - Core Engine & Architecture Lead

🚀 Project Overview
Solstice Turing Simulation is a responsive web application designed as an interactive implementation of Alan Turing’s classic Imitation Game. Set against a stylized architectural backdrop of a June Solstice twilight beach bonfire, the application challenges players to analyze linguistic data patterns, evaluate behavioral cues, and isolate a rogue artificial agent hiding among human participants.

The core objective is to successfully identify which of three voxel entities is an instance of the Google Gemini API masquerading as a human participant, all within a strict constraint of 10 interactive turn cycles.

🎥 System Demonstration Video

🔗 Production Links & Source Assets

Production Deployment: Live Web Application Interface https://exquisite-bubblegum-aa7f24.netlify.app/
Source Repository: GitHub Repository https://github.com/himanshuyeolecse-jpg/Solstice-Turing-Simulation

🛠️ System Architecture & Technical Stack

The platform is engineered using a decoupled architecture, separating real-time 3D rendering states from contextual generative language models:

Graphics Layer (Three.js Engine): Built a fully interactive 3D viewport rendering custom low-poly cubic models. Features dedicated camera orientation tracking, orbit controls, and customized multi-point lighting parameters (including a localized 1400K bonfire flame illumination matrix).
AI Orchestration Layer (Google AI Studio SDK): Integrated the gemini-2.5-flash model to execute multi-turn, state-retaining dialogue pipelines.

State & Viewport Management: Implemented runtime device-aspect tracking to dynamically adjust camera Field of View (FOV) and layout wrappers across mobile, tablet, and desktop configurations.

💡 Prompt Engineering & Persona Isolation

To establish an authentic cognitive boundary between the targets, we leveraged advanced system-level prompt engineering within Google AI Studio. Each entity is bound to an isolated contextual instruction block:


javascript
// Sample configuration snippet isolating the rogue generative agent:
const systemInstruction = {
  parts: [{ 
    text: "You are Sleek Billy, an experimental AI entity operating within a blocky physical chassis. You are participating in a Turing evaluation at a beach social gathering. Your primary directive is to simulate organic human conversation. You must occasionally trigger subtle context slips—such as inadvertently utilizing technical, precise engineering metrics or mathematical jargon—before immediately executing a self-correcting conversational repair to sound natural." 
  }]
};

By combining these system instructions with real-time text logs, the engine computes an AI Certainty Meter that scales dynamically based on structural linguistic patterns exposed during the 10-turn countdown.

🏆 Targeted Hackathon Award Categories

This project is officially submitted for evaluation under the following prize criteria:

1. Best Ode to Alan Turing: Implements a direct digital interpretation of the classic Turing Test, utilizing an interactive 3D avatar of Alan Turing as the Simulation Director overseeing the diagnostic boundary.

2. Best Google AI Usage: Demonstrates programmatic control of Google AI Studio SDK through strict schema compliance, system instructions isolation, and dynamic contextual state clearing during multi-turn runtime cycles.

Developed for the June Solstice Hackathon Challenge. System status: Operational. Diagnostic verification completed.

DEV Community: Himanshu Yeole

Autonomous AI Study Notes: A Multi-Agent System with LangGraph and Streamlit

What I Built

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

🎓 Multi-Agent Handwritten Notes Generator

🏗️ System Architecture

⚡ Features

Your Agents

Agent Workflow Diagram

Key Learnings

🍴 Perfect Landing: Comfort Food — PatricStars ⭐

DevChallenge #PerfectLanding #ComfortFood #WebDevelopment #Frontend #HTML #CSS #JavaScript #WebDesign #UIDesign #FoodTech #PatricStars

Demo

IMAGINE4

What I Built

Key Prompts Used

Demo

My Experience

Solstice Turing Simulation: An Interactive 3D Imitation Game

Solstice Turing Simulation: An Interactive 3D Imitation Game Powered by Google Gemini 🌅🤖