Digital AI Agentic Office
AI / Full-Stack
A real-time animated demo of an AI organization where 5 autonomous agents collaborate to draft, review, and finalize legal documents. Built with the Agno framework, it showcases multi-agent orchestration across three pillars: Create, Review, and Ask.
Full-Stack Developer
Personal Project
2026 - Present
AI Agents
Agno Framework
Legal Tech
Multi-Agent Systems
Next.js
FastAPI
SSE
HTML5 Canvas
Introduction
A real-time animated demo of a fictional AI law firm where 5 autonomous agents collaborate to complete legal tasks. Built using the Agno framework, this project showcases multi-agent orchestration across three core pillars: Create, Review, and Ask. Users submit a legal task, and the agents animate across a 2D office canvas — walking, thinking, talking, and building a legal document collaboratively in real time.
The Agent Team
The system features five specialized agents, each with a distinct role in the legal document pipeline:
Alex Chen — Managing Partner: Orchestrates the team, delegates work to each agent, and produces the final consolidated output.
Casey Kim — Paralegal: Pulls templates and standard legal clauses from the knowledge base to kickstart the drafting process.
Sam Rivera — Document Architect: Drafts the full legal document based on the enriched task and templates provided.
Jordan Park — Risk Analyst: Reviews the draft and flags liability risks, potential loopholes, and areas of concern.
Riley Morgan — Legal Counsel: Checks jurisdiction and regulatory compliance, ensuring the document meets legal standards.
How It Works
- 1. User types a legal task (e.g. "Draft an NDA between Anique's Org and a partner company")
- 2. Alex opens a Q&A panel — GPT generates 3 context-specific questions, user answers them
- 3. Enriched task is submitted to the backend
- 4. Agents animate across the office canvas — walking to each other, showing speech bubbles for live conversation
- 5. Each agent calls GPT-4o-mini with a role-specific system prompt and produces their section
- 6. The document panel builds live (like Google Docs) as each agent contributes — Templates → Draft → Risk Review → Compliance → Final
- 7. Final deliverable surfaces in a modal
Technical Architecture
The system is built on a Python/FastAPI backend with async OpenAI GPT-4o-mini calls. Real-time communication between the backend and the Next.js 14 frontend is handled via Server-Sent Events (SSE), streaming agent events directly to the browser. The 2D office visualization uses HTML5 Canvas with a requestAnimationFrame render loop for smooth animations.
Backend: Python, FastAPI, async OpenAI (GPT-4o-mini)
Realtime: Server-Sent Events (SSE) for streaming agent events
Frontend: Next.js 14, TypeScript, Tailwind CSS
Canvas: HTML5 Canvas with requestAnimationFrame render loop
Framework: Agno for multi-agent orchestration
Database: Supabase (logs tasks and agent events)
Visual Design & Animations
The office features a 2D floor plan with rotated desks per side and personalized agent monitors. Agents breathe, blink, think (animated dots), talk (speech bubbles with ripple effects), and walk (smooth lerp interpolation). The document panel mimics Google Docs with a toolbar, active agent avatars, and a scan-line animation while an agent is actively writing. Full retina/HiDPI canvas rendering ensures crisp visuals on all displays.
Live GenieAI Portfolio
Explore the targeted portfolio page built for Genie AI's Agentic Engineer role — featuring an AI chat widget powered by OpenAI, real CV data, and a 90-day plan. Embedded live below:
Demo Video
Watch the full demo of the Digital AI Agentic Office in action — from task submission through agent collaboration to the final legal document output.
ma
Muhammad Anique
A passionate Full Stack Web Developer with expertise in modern web technologies, including Next.js ,React.js, Node.js , and Express.js.
Anique
anique.cs@gmail.com
©2024 Muhammad Anique. All rights reserved. Unauthorized reproduction or distribution of any content from this site is strictly prohibited.