Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for ## Inspiration

Our team was inspired by the difficulty of sounding authentic and effective across the dozens of different online platforms we use every day. A message for LinkedIn is completely different from one on Tinder or Discord. We wanted to build a tool that enhances, not replaces, human conversation by providing context-aware, private, and instant AI assistance, making everyone a better digital communicator.

What We Learned

We learned the deep complexities of integrating on-device AI (Gemini Nano) directly into a Chrome extension for real-time, privacy-first processing. The biggest lesson was in DOM analysisβ€”learning to reliably extract conversation context from vastly different website structures (Facebook vs. LinkedIn vs. WhatsApp) was a major technical hurdle.

Challenges We Faced

Our biggest challenge was accurately detecting the conversation context and tone without an internet connection. We had to build a robust contextService.js that relies on keywords, site-specific DOM element selectors, and simple heuristics to classify a conversation. Getting this to work reliably and quickly on any site the user visits was incredibly difficult. Another challenge was managing the extension's UI, making it draggable and ensuring it didn't overlap or break the host page's content.


🎯 What Is This Project?

ConvoAI Pro is a Chrome extension that acts as your personal AI conversation assistant. It uses Chrome's built-in Gemini Nano AI (no internet required!) to help you write better messages across all social media platforms, dating apps, and professional networks.

🧠 The Core Innovation: Context-Aware AI

Unlike generic AI tools, ConvoAI automatically understands where you are and what kind of conversation you're having:

  • Platform Detection: Knows if you're on Facebook, Instagram, WhatsApp, Discord, Tinder, LinkedIn, etc.
  • Conversation Analysis: Identifies if it's a dating conversation, professional networking, casual chat, or business discussion.
  • Tone Matching: Adapts responses to match the conversation's tone (casual, formal, flirty, professional).
  • Smart Context: Reads recent messages to provide relevant, contextual suggestions.

πŸš€ Key Features

AI-Powered Writing Tools

  • 🎯 Icebreaker: Generates perfect opening messages based on platform and context
  • πŸ’¬ Reply: Suggests contextual responses to incoming messages
  • ✏️ Rewrite: Improves your drafted messages with better tone and clarity
  • βœ“ Review: Grammar checks with platform-specific tips

Smart Context Detection

  • Facebook/Messenger: Casual, friendly responses
  • LinkedIn: Professional, value-focused networking messages
  • Tinder/Dating Apps: Flirty, engaging conversation starters
  • Discord: Gaming and community-appropriate language
  • WhatsApp: Personal, conversational tone

Visual Intelligence

  • Platform Icons: Shows what platform/context was detected (πŸ“˜πŸ“·πŸ’ΌπŸ’•)
  • Smart Tooltips: Displays detected conversation type and participant count
  • Draggable Interface: Position the toolbar anywhere on screen

πŸ›  Technical ArchitectureConvo AI

πŸ“ Convo AI (Technical Architecture) β”œβ”€β”€ πŸ“ Inputs β”‚ └── πŸ“„ User Types (Message) β”œβ”€β”€ πŸ“ Core Engine β”‚ β”œβ”€β”€ πŸ“„ Context Engine (Analyzes Page) β”‚ └── πŸ“„ Gemini Nano (AI Processing) β”œβ”€β”€ πŸ“ Rules & Logic β”‚ └── πŸ“„ Platform Rules (Dating/Business) └── πŸ“ Outputs └── πŸ“„ Smart Response (Contextual AI)

Core Components

  • Content Script (main.jsx): Injects into web pages, detects context, manages the UI.
  • AI Service (aiApiService.js): Interfaces with Gemini Nano (Prompt, Writer, Rewriter, Proofreader APIs).
  • Context Service (contextService.js): Handles platform detection, tone analysis, and prompt generation.
  • WingmanToolbar (WingmanToolbar.jsx): The main React UI component.

🎯 Real-World Use Cases

  • Dating Apps: (Input: Tinder chat) β†’ Detection: "dating", "flirty" β†’ Output: "I noticed you're into hiking too! What's your favorite trail?"
  • LinkedIn Networking: (Input: LinkedIn message) β†’ Detection: "linkedin", "professional" β†’ Output: "I'd love to connect and discuss our shared interest in [industry]."
  • Facebook Social: (Input: Facebook comment) β†’ Detection: "facebook", "social" β†’ Output: "That's awesome! How did you get into that?"

πŸ† Why This Project Matters

ConvoAI Pro enhances human conversation by:

  • Reducing social anxiety in online interactions.
  • Improving professional networking effectiveness.
  • Making AI accessible without internet dependency.
  • Preserving privacy with local AI processing.

This isn't just an extensionβ€”it's a conversation intelligence platform that makes everyone a better communicator.

πŸš€ Future Roadmap

  • Multi-language Support
  • Custom Personas & Styles
  • Advanced Conversation Analytics
  • Voice Integration

Built With

  • 16+
  • 18.3.1
  • 5.4.20
  • analysis
  • api
  • chrome
  • component
  • content
  • context
  • css
  • css3
  • dom
  • error
  • es6+
  • eslint
  • extension
  • flexbox
  • gemini
  • grid
  • javascript
  • jsx
  • layer
  • manifest
  • modern
  • modules
  • nano
  • node.js
  • npm
  • observer
  • pattern
  • postcss
  • prettier
  • processing
  • prompt
  • proofreader
  • react
  • rewriter
  • rollup
  • runtime
  • scripts
  • sentiment
  • service
  • singleton
  • storage
  • text
  • v3
  • vite
  • writer
Share this project:

Updates