Back to Projects

Formea AI Form Automation

Multi-Agent Chrome Extension for Intelligent Form Filling

Overview

Built Plasmo MV3 Chrome Extension with React, HeroUI, and Zustand state management via chrome.storage. Side Panel + Popup modes with content scripts for DOM interaction. Real-time agent progress UI via EventManager with Framer Motion animations.

Key Features

  • Plasmo MV3 Chrome Extension with React 18 and HeroUI component library
  • Zustand state management persisted via chrome.storage API
  • Side Panel + Popup modes with content scripts for DOM interaction
  • Real-time agent progress UI via EventManager event-driven updates
  • Framer Motion animations for form filling feedback
  • Clerk Chrome Extension SDK for seamless auth flow

Tech Stack

Frontend

Plasmo MV3ReactHeroUIZustandFramer MotionTailwind CSS

AI & Agents

LangChainZodNanoBrowserPuppeteer

Backend

Express.jsNode.jsMongoDBMongooseClerk Auth

LLM Providers

OpenAIAnthropicGoogleGroqDeepSeekOllama

Challenges & Solutions

Agent Coordination & State Management

Problem

Three agents need shared browser context, real-time UI updates from background worker, and graceful error handling across agent boundaries.

Solution

Shared AgentContext with BrowserContext, EventManager for real-time UI updates, and generic BaseAgent<T extends ZodType> enforcing type-safe structured outputs per agent.

Complex Government Forms (VBON)

Problem

Government forms (PrimeFaces/JSF) have 10K+ lines of HTML with repeated IDs, inline JavaScript handlers, and dynamic AJAX updates — traditional scraping approaches fail entirely.

Solution

Built VBON Form Explorer agent using stable hash-based IDs (XPath + role + label) that survive DOM changes, PrimeFaces AJAX completion detection, and deterministic DOM diffing to build field dependency graphs.

Models Without Structured Output Support

Problem

Not all LLM providers (DeepSeek Reasoner, Llama) support native JSON schema output — agents need consistent Zod-validated responses regardless of provider.

Solution

Automatic fallback pattern: detect provider capability, use native withStructuredOutput() when available, fall back to manual JSON extraction + Zod validation for unsupported models. Provider-agnostic agent code.

Key Achievements

Plasmo MV3
Modern Chrome Extension with React
Real-Time UI
EventManager-driven agent progress
HeroUI + Zustand
Component library with chrome.storage state
Side Panel
Dual mode: Side Panel + Popup