WZRD.work

• 

  Landing

• 

• 

Inspiration

The inspiration for WZRD.work came from the concept of "Work Paralysis"—that feeling of being overwhelmed by repetitive, high-friction tasks that distract creative professionals from their actual craft. We noticed that musicians, content creators, and brand managers spend 80% of their time on logistics (finding email addresses, researching competitors, scrubbing video timelines) and only 20% on creating.

We wanted to build a platform that didn't just "help" but actually did the work. Inspired by the transition from simple chatbots to autonomous agents, we envisioned a "KNWLG WRKR" that could take a high-level intent (e.g., "Book a tour for me") and autonomously browse the web, find venues, and draft emails, while the user watches it happen live.

What it does

WZRD.work is an autonomous agent dashboard powered by AGI Inc. (formerly Manus AI). It provides a suite of specialized "Agents" that execute complex workflows inside a cloud browser.

Key features include:

The Agent Studio: A glassmorphism-styled marketplace of pre-configured agents for specific verticals:

Create: "Short Form Factory" (turns Spotify tracks/YouTube videos into viral clips), "Viral Content Ideas."

Connect: "Podcast Guest Finder," "Niche Community Outreach."

Report: "Brand Audits," "YouTube Revenue Reports."

Plan: "Tour Planning Strategy," "Content Calendar Creator."

Live Session Monitor: Users can watch the AI agent working in real-time via an embedded VNC viewer, seeing the mouse move, click, and type on actual websites.

Short Form Factory: A specific workflow that analyzes music items, finds trending angles, and generates production-ready video concepts.

Natural Language Command: Users can bypass templates and simply chat with the AI to spin up custom browser sessions (e.g., "Find the cheapest iPhone 15 on Amazon and Best Buy").

How we built it

We built WZRD.work using a modern, reactive stack designed for real-time interaction:

Frontend: Built with React, TypeScript, and Vite. We utilized Tailwind CSS and Shadcn UI for a clean, professional aesthetic, and Framer Motion for complex cinematic animations (intro sequences, particle systems, and volumetric lighting effects).

Backend & Data: We used Supabase for authentication, PostgreSQL database, and real-time subscriptions. This allows the UI to update instantly when an agent finishes a task or encounters an error.

AI Core: The application integrates with the AGI Agent API via Supabase Edge Functions (agi-proxy). This acts as the bridge between our frontend and the autonomous browser sessions.

Workflow Engine: We implemented a SessionMonitor component that handles WebSocket/SSE streams to display the agent's status and VNC URL, allowing for the "Ghost in the Machine" viewing experience.

Challenges we ran into

Migration Complexity: Halfway through development, we migrated from a task-based API (Manus) to a session-based architecture (AGI). This required rewriting our core service layer (AGIAPIService.ts) and refactoring how we store state in the database (agi_sessions table).

Prompt Engineering for Browsers: Getting an LLM to successfully navigate the web requires very specific prompting. We had to refine our AgentConfigService to generate precise instructions (e.g., "Navigate to URL X, wait for selector Y, extract text Z") to prevent the agent from getting stuck in loops.

Real-time Synchronization: Keeping the frontend UI, the database state, and the actual browser session status in sync was difficult. We solved this using Supabase Realtime subscriptions to listen for database changes triggered by our Edge Functions.

CORS & VNC: Embedding the live VNC feed from the agent session into our secure dashboard presented cross-origin resource sharing (CORS) challenges that we had to handle via our proxy layer.

Accomplishments that we're proud of

The "Cinematic" Experience: We went beyond a standard SaaS dashboard. The app features a "Cinematic Intro Sequence" with volumetric lighting, kinetic typography, and procedural particle systems that creates an immersive "magical" feel before the user even logs in.

Live VNC Integration: Successfully embedding the live view of the AI agent browsing the web. Watching the AI actually do the work (scrolling, clicking) builds immense trust with the user compared to a simple loading spinner.

Extensive Agent Library: We successfully defined over 30 specialized agent configurations in AgentConfigService.ts, proving the architecture is scalable for any industry vertical.

Glassmorphism UI: The "Agents Interface" looks stunning, utilizing backdrop blurs and transparency to create a modern, high-end aesthetic.

What we learned

Context is King: Autonomous agents perform significantly better when given structured context (JSON schemas) rather than open-ended prompts.

User Trust: Users are hesitant to let AI "take the wheel" unless they can see what it's doing. The visual feedback of the VNC viewer transformed the user experience from "waiting" to "supervising."

Speed vs. Quality: We learned to toggle between agi-0-fast for quick queries (chat responses) and agi-0 (standard) for complex research tasks like tour planning, optimizing both cost and user experience.

What's next for WZRD.work

IMPLEMENT x402 to enable pay-per-usage for agents and for agent's to be monetized and used by other agents and clients

"Human-in-the-Loop" Checkpoints: Implementing the CheckpointDialog fully so agents pause at critical moments (e.g., "I found this venue, should I send the email?") to ask for user confirmation.

Session Pooling: To handle high traffic, we plan to implement session pooling to reduce the spin-up time for new agents.

Mobile App: Porting the SessionMonitor to a React Native app so users can get push notifications and watch their agents work from their phone.

Deep Integration: Finishing the "Booky" and "Short Form Factory" specialized integrations to allow direct API connections to Spotify and Venue booking platforms.

Built With

• agi
• lovable
• supabase
• typescript