Frontend Design/AI Product Development
Your best AI powered contextual desktop companion
(for Google Chrome Built-in AI Challenge 2025)
VibeBuddy. exe
Inspiration
Modern workers and students need a low-intervention "cyber buddy" to balance intense focus with emotional support. Existing tools lack deep personalization and behavioral awareness. Our goal was to create a virtual companion that is uniquely tailored (via AI) and actively assists productivity through contextual sensing.
User Analysis
We focus on our target user group: students and workers who requires massive focused activities per day. Our VibeBuddy.exe focus on two main needs that we observed from our users, circular and non-intrusive. The main user flow begins a one-time AI generation (Onboarding), followed by a continuous background loop where the Service Worker monitors tab activity to update the pet's state in real-time. The flow culminates in daily "Focus Reports," converting passive browsing data into emotional value.
How might we transform the cold isolation of intense productivity into a sense of warm, shared presence during deep work or study?
user flow diagram
What it does
Vibe Buddy.exe is a Chrome Extension providing a personalized virtual pet with 4 core functions:
AI Customization: Generates a unique, static pet image for the user using a simple text prompt.
Contextual Matching: The pet's static image/action dynamically matches the user's current browsing context (e.g., changes from 'focused' on a work site to 'alert' on a social site).
Efficiency Tools: Offers a simple Focus Timer and generates a Behavior-Time Focus Report to help users visualize and optimize their time allocation across different contexts.
Dialogue: Provides simple, contextual dialogue interactions with the pet.
Front-end
Framework: React 19 + TypeScript 5
Build Tool: WXT (Web Extension Tools)
State Management: Zustand (lightweight, no Redux boilerplate)
Styling: Tailwind CSS (utility-first, pixel art theme)
Animation: Framer Motion
Storage: Chrome Storage API + IndexedDB
Testing: Vitest + React Testing Library
Backend (AWS)
API Gateway: REST + WebSocket for real-time updates
Compute: Lambda (Node.js 20 runtime)
Database: DynamoDB (single-table design)
Auth: Cognito + Google OAuth 2.0
Storage: S3 (pet images, static assets)
AI: Google Gemini Nano API (Banana) for image generation
IaC: AWS CDK (TypeScript)
Challenge We Run into
Behavioral Image Mapping: The technical challenge of seamlessly matching and displaying a set of pre-designed static behavior images (e.g., 'focus,' 'rest') with the AI-generated unique base pet image.
Cross-Component State Sync: Managing state and transmitting behavioral triggers between the Content Script (the pet renderer) and the Service Worker (the brain) within the extension's architecture.
What we learned
We successfully integrated the Google Gemini 2.5 Flash API for unique image generation, making every pet truly one-of-a-kind. We delivered a functional Behavior-Time Focus Report that gives users tangible data on their time spent across classified contexts, linking the virtual companion directly to real-world productivity.
We gained significant expertise in Chrome Extension development patterns, specifically mastering the Gemini-2.5-flash API for robust background-to-content script communication. We also developed strong skills in Prompt Engineering to optimize real-time text classification and accurate behavioral inference.
Next Steps
Technologies
Marketing
We will expand the library of behavior-matching images and enhancing the pet's dialogue system for more complex and engaging interactions, while also plan to integrate local data analysis to provide personalized focus recommendations
.
Finally, we look forward to completing our achievement system to offer more rewarding mechanisms that encourage users to continue using our products and develop better computer use routines.
We build up our freemium model where we implement monthly subscriptions for users to provide in-depth screening analysis based on user behaviors and more pet generation chances. By fully implement our extensions at google chrome store, we will further test on users’ preference and understand their willingness to pay on different functions.
