Building Parallax: The Vision-Powered UI Navigator Agent

Vani Chitkara — Sun, 15 Mar 2026 16:08:18 +0000

This piece of content was created specifically for the purposes of entering the Gemini Live Agent Challenge hackathon. #GeminiLiveAgentChallenge

Traditional automated testing is broken. It relies on "cheating" by looking at the underlying HTML code (the DOM) to find buttons and links. But humans don’t browse the web by reading code; we browse by seeing pixels.

When we (my teammate and I) set out to build Parallax, we wanted to create a truly human-centric testing agent. We didn't want a scraper; we wanted an agent with "eyes." To achieve this, we turned to the cutting-edge capabilities of Google Gemini 2.5 Flash and the Google Cloud ecosystem.

🧠 The Core: A Vision-to-Action Brain

At the heart of Parallax is the Gemini 2.5 Flash model. We chose this model specifically for its industry-leading multimodal performance and low latency.

In Parallax, we don't send a single line of HTML to the AI. Instead, our agent loop performs the following:

Capture: Using Playwright, we snap a high-resolution screenshot of the browser viewport.
Analyze: We send that raw image to gemini-2.5-flash with a specific user persona context (e.g., "You are Martha, a 72-year-old with low tech literacy").
Act: The model "sees" the UI elements and returns raw pixel coordinates for the next action—be it a click, a scroll, or a type. By using gemini-2.5-flash, the agent can identify UX friction that code-based tests ignore, such as poor color contrast, overlapping elements, or confusing visual hierarchies.

🛠️ Multi-Agent Orchestration with Google ADK

Parallax doesn't just run one test; it runs a "swarm" of diverse perspectives. We used the Google Agent Development Kit (ADK) to orchestrate these independent persona agents. The ADK allowed us to create distinct cognitive models for each persona, ensuring that "Martha" (our 72-year-old dear grandmother), "Raj" (our 28-year-old power user), and our 5 other agents with diverse personas can navigate the same site simultaneously, each reporting unique findings based on their specific technological background.

📈 Scaling on Google Cloud

To handle the intensive compute requirements of headless browsers and high-frequency AI calls, we built a serverless architecture on Google Cloud:

Google Cloud Run: Our FastAPI backend is fully containerized and deployed on Cloud Run. This allows us to scale horizontally as more agents are spawned, ensuring that the "Vision Loop" remains snappy and responsive.
Google Cloud Firestore: We use Firestore for real-time state management. As agents find issues, they are instantly streamed to a live dashboard, allowing developers to watch the "thinking process" of the AI in real-time.
Google Cloud Storage (GCS): Every multimodal artifact—every screenshot the agent "saw" is persisted in GCS. This creates a visual audit trail that is invaluable for debugging UX failures.

💡 Conclusion

Parallax represents a shift from "testing code" to "testing experiences." By combining the multimodal power of Gemini 2.5 Flash with the reliability of Google Cloud, we’ve built a tool that helps developers see their apps through the eyes of their most diverse users.

Check out the live project here: https://bit.ly/parallax-agent

Building PersonaPrep: An AI Personality Coach with Kiro

Vani Chitkara — Sat, 06 Sep 2025 10:02:14 +0000

In a world where social cues, confidence, and culture shape our day-to-day interactions, one thing remains clear: effective communication is a superpower.
Yet, for many people, initiating conversations, navigating interviews, or simply showing up confidently in new environments—like a first day at school, college, or job—can feel like climbing a mountain.

🧠 What is PersonaPrep?

PersonaPrep is an AI social coach that adapts to your personality type and helps you practice high-stakes or awkward social scenarios through interactive, real-time simulations.

Whether you're:

Interviewing for your dream job,
Speaking up in a meeting,
Making friends in a new country,
Or overcoming social anxiety,

PersonaPrep lets you rehearse, refine, and reflect—all in a judgment-free, deeply personalized way.

🧩 Why an AI Personality Coach?

PersonaPrep focuses on three big problems:

Social anxiety → Rehearsing workplace introductions, meetings, or even casual small talk.
Adaptive learning → Tailoring practice sessions based on user needs and past conversations.
Language barriers → Practicing common phrases in a new language or cultural context.

Instead of a static chatbot, PersonaPrep is like a personal coach that learns and guides you to drive conversations confidently in a new environment.

⚙️ The Tech Stack: Fast, Flexible & Real-Time

Layer	Stack
Backend	Spring Boot (Java 17) with REST APIs + WebSocket support
Frontend	React + Tailwind for snappy, intuitive UI
Database	MongoDB Atlas to persist sessions and coaching history
LLM	Gemini 2.0 Flash for AI-powered coaching

📊 How It Works: Flow from Personality to Mastery

PersonaPrep follows a step-by-step, coach-guided journey:

1️⃣ Practice Conversations

Simulate real conversations with diverse AI characters:

Interviewers
Classmates
Managers
Friends or strangers

AI agents are steered by personality context, dynamically adapting tone, topic depth, and challenge level.

2️⃣ Feedback & Growth

We log:

Confidence scores
Emotional intelligence traits
Communication effectiveness

Like Kiro’s auto-generated spec summaries, this feedback is contextualized and actionable—offering insights like “Try pausing before responding” or “This phrase could sound more confident.”

3️⃣ Mastery & Beyond
As users grow, they unlock:

Advanced role-plays
Peer coaching
Opportunities to help others—becoming mentors in their own right

🧬 How Kiro Inspired PersonaPrep’s Architecture

Kiro’s philosophy of spec-first, agent-powered development had a profound influence on our build.

✅ Spec-Driven Conversations

Just like you define a spec in Kiro before coding, our system defines interaction goals (e.g., “Nail a behavioral interview answer”) before launching a coaching session. This “spec” feeds into AI steering logic to ensure alignment.

🔁 Agent Hooks & Triggers

We use Kiro-style hooks to automate:

Feedback generation after a session
Session summarization
This enables an agentic feedback loop—users practice, reflect, and try again, with minimal friction.

🧭 Steering Personalities

Kiro uses project context and conventions to steer agents. We use personality styles (outgoing, introverted, anxious, task-oriented) to steer our coaches. This ensures communication feels natural and aligned to the user.

For example:

An anxious user might start with low-pressure scenarios.

A tool-oriented user gets measurable milestones and structure.

Benefit	Result
Backend	Practice interviews, presentations, and meetings
Social Comfort	Engage in small talk, new cultures, or dating
Emotional Intelligence	Understand how you sound, learn empathy
Personal Growth	Track progress, unlock badges, and celebrate milestones

📖 Lessons Learned

Kiro as a teammate: Beyond just code, Kiro gave us structure, specs, and clarity.
AI accelerates hackathons: With boilerplate handled, we spent time on features that mattered.
Scope discipline matters: Steering docs ensured we built something shippable, not just “cool demos.”

💬 Final Thoughts

PersonaPrep wasn’t just a hackathon project — it showed us the power of AI tools like Kiro to bridge the gap between ideas and production-ready code.

With Kiro’s spec mode and steering docs, we shipped a full-stack AI application in record time.

If you’re building at hackathons (or even production projects), Kiro isn’t just an AI assistant — it’s a project accelerator.

DEV Community: Vani Chitkara