Clair - Your Chrome Extension AI Assistant

Inspiration

The idea for Clair was born out of a desire to integrate AI capabilities seamlessly into everyday tasks without the need to switch between different applications or tabs. The inspiration struck during Google I/O 2024, where despite the extensive discussions on AI, there was a noticeable lack of focus on integrating AI within Chrome extensions. This realization drove us to create an AI assistant that is always available within the browser, providing instant responses and assistance. We aimed to leverage the power of Vertex AI and Google’s Gemini model to build a highly responsive and intelligent assistant that enhances productivity and convenience for users.

What It Does

Clair is a Chrome extension that acts as a general AI assistant. It provides real-time responses to user queries directly within the browser, eliminating the need to switch tabs or applications. Clair's features include:

  • Real-Time Assistance: Instant responses to a wide range of queries.
  • User-Friendly Interface: A clean and intuitive design for easy interaction.
  • Export to Google Sheets: Allows users to export chat history to Google Sheets with a single click, enabling easy data management and record-keeping.

How We Built It

Technology Stack

  • Backend:

    • Node.js and Express.js: For setting up the server and handling API requests.
    • Vertex AI and Google’s Gemini 1.5 Pro: For powering the AI assistant with advanced language models.
    • Google Sheets API: For exporting chat history to Google Sheets.
  • Frontend:

    • HTML, CSS, JavaScript: For building the Chrome extension interface.

Steps Involved

  1. Setting Up Vertex AI:

    • Utilized Google AI Studio, which made the setup process fast and straightforward.
    • Configured the Gemini 1.5 Pro model with appropriate API keys and environment variables.
    • Developed the backend to handle requests and interact with the Vertex AI model.
  2. Building the Chrome Extension:

    • Created the HTML, CSS, and JavaScript files for the extension interface.
    • Implemented features to handle user inputs and display responses from the AI model.
  3. Exporting to Google Sheets:

    • Integrated Google Sheets API to allow exporting chat history.
    • Ensured secure handling of data and smooth interaction with Google services.

Challenges We Faced

  1. Data Integration:

    • Ensuring smooth and secure data flow between the Chrome extension and the backend.
    • Handling API responses and managing data effectively.
  2. Model Training:

    • Optimizing the AI model for accuracy and efficiency required careful data preparation and training processes.
  3. User Interface Design:

    • Creating an intuitive and user-friendly interface within the constraints of a Chrome extension.
    • Ensuring the interface is responsive and easy to use.
  4. Export Functionality:

    • Implementing a seamless export feature to Google Sheets while ensuring data security and integrity.

What We Learned

  • AI Integration: Gained valuable experience in integrating advanced AI models into practical applications.
  • Chrome Extension Development: Learned the nuances of developing and deploying Chrome extensions.
  • API Management: Enhanced our skills in managing and interacting with various APIs, including Google Sheets and Vertex AI.
  • User-Centered Design: Understood the importance of creating user-friendly interfaces and seamless user experiences.
  • Google AI Studio: Discovered how user-friendly and efficient Google AI Studio is in setting up and managing APIs, making the development process much faster.

Future Enhancements

We have exciting plans for enhancing Clair with additional capabilities such as:

  • Gmail API Integration: To allow Clair to interact with emails, manage tasks, and provide email-based insights.
  • Google People API Integration: To help manage and utilize contact information efficiently.
  • Advanced AI Features: Incorporating additional AI capabilities such as context awareness and personalized responses.
  • Customization Options: Providing users with more control over the AI’s behavior and responses.
  • Mobile Compatibility: Exploring the development of a mobile version to complement the Chrome extension.

Conclusion

Clair represents a significant step towards integrating AI seamlessly into daily workflows. By providing an intelligent and responsive assistant within the browser, Clair aims to enhance productivity and convenience for users. The project has been an exciting journey of learning and innovation, and we look forward to continuing to enhance Clair's capabilities and features in the future. Thanks to Google AI Studio, the setup and management of APIs were efficient and smooth, enabling us to focus more on developing and refining Clair’s functionalities.

Built With

Share this project:

Updates

posted an update

https://github.com/Phil-Hills/Ai-extension Ai-extension Clairvoyant GenAI: The Anti-Disrupter The rise of big tech has disrupted countless industries, often prioritizing convenience over personal connection. Clairvoyant GenAI is the answer for businesses looking to build lasting customer relationships and regain a personal touch in their sales. It combines the power of AI with a human-centered approach, helping businesses build stronger, more meaningful customer relationships and retain clients for the long term. It’s designed for any business that wants to create lasting value through authentic connections.

The Importance of Consistent Effort Consistent effort over time is a fundamental truth in all aspects of life. Whether it’s maintaining a healthy diet to achieve a healthy body or smoking a cigarette daily leading to adverse health effects, the same principle applies to building customer relationships. Salespeople are human and can’t always maintain consistent effort on their own. Life gets in the way, and they can fall off, ultimately losing clients. This is where Clairvoyant GenAI steps in with a systematic, personalized approach that focuses on relationship building and trust consistently over time.

Clairvoyant GenAI: The Solution Clairvoyant GenAI helps you achieve consistency by:

Building a Quality Pipeline: Attracting high-potential leads and nurturing those relationships. Proactive Relationship Building: Anticipating customer needs and providing value before they even know they need it. Personalized Content & Outreach: Automating marketing tasks based on individual lead data, ensuring personalized and non-spammy communications. Effortless Lead Management: Providing a unified view of all leads and managing them seamlessly across devices and platforms. The Greatness Tracker: A systematic relationship-building guide that helps sales professionals prioritize long-term value creation and genuine interactions. It empowers them to focus on building trust, understanding their clients’ needs, and taking the right actions to cultivate lasting relationships. The Clairvoyant Advantage See Beyond the Sale: Gain a deeper understanding of your clients, anticipating their needs and providing value before they even know they need it. Build Lasting Relationships: Focus on building genuine connections that lead to increased customer loyalty and long-term success. Empower Your Sales Teams: Provide your team with the tools and insights they need to confidently build relationships, manage leads, and close deals effectively. Embrace the Future of Sales: Don’t just keep up with the disruption; lead it. Clairvoyant GenAI is the answer for businesses that want to thrive in a world where genuine connection matters more than ever. How It Works Chrome Extension (The Invisible Scout) The extension discreetly analyzes websites and extracts key information using Google’s Chrome Developer Tools, even from password-protected sites (with user authorization).

Google APIs for Seamless Integration Gmail API: Clairvoyant GenAI connects to Gmail (with permission) to access existing contacts, providing a complete view of current customer and prospect data. Google People API: Fetches all Google Contacts, ensuring the CRM is up-to-date. Apple Contacts/Android Contacts/Social Media: (Future Development) Clairvoyant GenAI will also integrate with other contact sources, including Apple and Android contact lists and potentially social media contacts. The CRM (Built with Google AppSheet) AppSheet & Google Sheets: Leverages the power of Google Sheets as the foundation for storing and managing lead data. Organized from the Start: Automatically creates dedicated folders in Google Drive for new contacts, ensuring all information is organized and accessible. Manages and Organizes Leads: Categorizes leads based on various criteria (location, industry, interest). Integrates with Google Keep: Captures notes and contact information seamlessly. Provides a Unified View: Combines leads from various sources into one central location, accessible via web and mobile. Enables Team Collaboration: Shares lead information and insights among team members. Clairvoyant Assistant (Powered by Gemini Pro 1.5) More Than Just Text: Uses Gemini Pro’s advanced capabilities, including computer vision, to create engaging content. Content Creation Engine: Analyzes Google Trends, Reddit, blogs, and other sources to suggest relevant content ideas and create drafts for: Blog Posts: Using Google Blogger API. Social Media Content: For platforms like TikTok. The Goal is Connection: Prioritizes long-term value creation and genuine interactions over closing deals. Flagship Products: Clair, Brad, and MUSEic Clair (Real Estate) An AI agent focused on optimizing real estate transactions and customer relationships using Gemini Pro 1.5 with a 1 million token context window. Clair can access data like:

Credit Scores: Understand a lead’s financial situation. Mortgage Balances: See if a lead has existing mortgage debt. Public Records: Learn more about a lead from property and court records. Job History: Understand a lead’s employment history from online resources like LinkedIn. Brad (Mortgage) An AI agent for mortgage brokers, also using Gemini Pro 1.5, tailored to help with:

Purchase Loans: Connecting with potential homebuyers. Refinancing: Identifying and recommending refinancing opportunities to homeowners. The “Same Page”: Provides a live, shared Google Sheet as a loan summary, promoting transparency and reducing confusion. Automates personalized monthly email updates to highlight refinancing opportunities and payoff strategies. MUSEic (Music) An AI agent designed to help musicians build and nurture their fan base using Gemini Pro 1.5. MUSEic will:

Analyze Fan Data: Build profiles based on listening habits and social media activity. Suggest Outreach Strategies: Recommend personalized content creation and marketing campaigns. Generate Engaging Content: Help musicians create compelling social media posts and newsletters. Virtual Tour Companion: Create a virtual tour schedule with shared access for fans. This feature allows fans to see where their favorite artists are performing, get concert updates, and access exclusive content related to the tour. Mobile App Invisible Organization: Automatically integrates with phone contacts, organizing and updating them with lead information. Always at Hand: Provides quick and easy access to lead details and notes from mobile devices. Key Benefits Organized from the Start: Creates structured folders and files in Google Drive for every new lead. Build a Quality Pipeline: Attract and nurture high-potential leads. Proactive Relationship Building: Anticipate customer needs and provide value. Personalized Content & Outreach: Automate marketing tasks based on individual lead data. Effortless Lead Management: Unified view of all leads across devices and platforms. The Greatness Tracker: Guides systematic relationship-building and long-term engagement. Clairvoyant GenAI: The Always-On Sales Assistant Clairvoyant GenAI is constantly working to help you succeed. It:

Builds Profiles: Analyzes data to create detailed lead profiles that evolve over time. Offers Insights: Provides information you need to understand your leads’ needs and preferences. Suggests Actions: Recommends personalized outreach strategies and helps you stay organized. Automates Tasks: Takes care of repetitive tasks like data entry, content creation, and scheduling. Filters Spam: Acts as a shield against unwanted messages and calls, keeping your focus on meaningful interactions. Adapt and Fine-Tune Clairvoyant GenAI is designed to be highly customizable. Sales professionals can easily tailor the platform to their exact preferences and specific business needs. This fine-tuning process is continuous, allowing the AI to adapt and improve over time, even after a sale is closed, ensuring long-term customer relationships.

The Future of Sales Clairvoyant GenAI addresses the disruption in industries like real estate, mortgage, and music. It brings back the human element, builds genuine relationships, and creates long-term value for clients, making customers feel valued and important.

What is GenAI? “GenAI” refers to the power of generative AI, a cutting-edge form of artificial intelligence capable of creating new content, including:

Text: Clairvoyant GenAI’s assistant can draft engaging blog posts and social media content. Images: The assistant can generate custom images for marketing materials. Virtual Humans: The AI can create lifelike virtual humans for video blogs and other communications. And More: The possibilities are endless. GenAI is revolutionizing how businesses interact with their customers. Clairvoyant GenAI is about seeing beyond the sale, understanding the customer, and building relationships that last.

Getting Started Clone the Repository git clone cd clairvoyant-genai Install Dependencies npm install # in the root directory cd Ai-extension && npm install cd ../clairvoyant-webapp && npm install cd ../backend && npm install Set up Firebase firebase init Follow the prompts to configure Firebase for your project.

Enable Google APIs Enable the required Google APIs (People API, Natural Language API, etc.) in the Google Cloud Console.

Train Sales Assistant Train your Gemini Pro 1.5 model in Google AI Studio and obtain the API endpoint.

Directory Structure clairvoyant-genai/ ├── Ai-extension/ │ ├── web/ │ │ ├── manifest.json │ │ ├── popup.html │ │ ├── popup.css │ │ ├── popup.tsx │ │ ├── background.ts │ │

├── devtools-panel.html │ │ └── icons/ │ │ ├── icon16.png │ │ ├── icon48.png │ │ ├── icon128.png │ └── src/ │ ├── components/ │ │ ├── Header.tsx │ │ ├── Header.module.css │ │ ├── Layout.tsx │ │ └── Layout.module.css │ ├── styles/ │ │ └── variables.css ├── backend/ │ ├── src/ │ │ ├── index.ts │ │ ├── ai.ts │ │ ├── crm.ts │ │ ├── analytics.ts │ │ ├── drive.ts │ │ ├── tasks.ts │ │ └── ... │ ├── node_modules/ │ ├── package-lock.json │ └── package.json ├── clairvoyant-webapp/ │ ├── public/ │ │ ├── index.html │ │ ├── favicon.ico │ │ ├── manifest.json │ │ └── robots.txt │ ├── src/ │ │ ├── App.tsx │ │ ├── index.tsx │ │ ├── components/ │ │ │ ├── Header.tsx │ │ │ ├── Header.module.css │ │ │ ├── Layout.tsx │ │ │ └── Layout.module.css │ │ ├── styles/ │ │ │ └── variables.css │ ├── node_modules/ │ ├── package-lock.json │ └── package.json ├── README.md ├── .env └── firebase.json Building and Deploying Chrome Extension cd Ai-extension npm run build Load the Ai-extension/web folder as an unpacked extension in your browser.

Firebase Functions cd ../backend firebase deploy --only functions AppSheet CRM Build and deploy the CRM using the AppSheet platform.

Web Application cd ../clairvoyant-webapp npm run build firebase deploy --only hosting Contributing We welcome contributions! Please see our Contributing Guidelines.

License MIT License

Disclaimer Clairvoyant GenAI is a work in progress.

This site is open source. Improve this page.

Log in or sign up for Devpost to join the conversation.

posted an update

Update: Rebranding and New Features

I'm excited to announce that "Clairvoyant Ai" is now rebranded to Clairvoyant GenAI!

Clairvoyant GenAI is the core invisible technology that powers a suite of specialized AI agents designed to enhance lead building and management, as well as client relationship management. The first agent in our suite is Clair, specifically tailored for real estate professionals.

About Clairvoyant GenAI I’m Phil Hills, Founder and CEO of Clairvoyant GenAI, where we transform how professionals manage their sales and client relationships through advanced generative AI and cloud technologies. With a strong background in sales, I am passionate about helping professionals build meaningful, lasting client relationships.

My career began in finance, honing my sales skills as a mortgage broker working with real estate agents. Ten years ago, I moved to Seattle and rebuilt my network from scratch, leading to the creation of the "Greatness Tracker." This tool focuses on meaningful interactions such as sit-down meetings, coffee appointments, and meals – "breaking bread." Using this approach, I held in-person meetings with over 100 real estate agents in Seattle within a year.

At Clairvoyant GenAI, we leverage Vertex AI agents to train advanced models. Our flagship product, Clair, is an integrated Chrome extension and CRM app designed to build and update lead lists daily. Operating invisibly in Chrome on PC and Mac, Clair continuously builds, sends, sorts, and communicates with the CRM app. It gathers data from any webpage the user visits and from Clairvoyant GenAI's suite of APIs to create the most valuable lead lists.

Clairvoyant GenAI's CRM app, powered by generative AI, is trained on my Greatness Tracker sales strategies, offering deep insights into how real estate agents work. Clair focuses on building strong, consistent relationships by keeping score, making predictions, and offering marketing strategy suggestions. It communicates with prospects, ensuring professionals remain top of mind when clients are ready to engage. By providing comprehensive insights and up-to-date information, Clair helps users offer knowledgeable and personalized service, strengthening client relationships and enhancing their competitive edge. Our aim is to maintain an elegant, meaningful way of staying in touch, helping professionals build real, lasting relationships that withstand disruptive technologies.

Key Enhancements: Rebranding: The new name reflects our advanced generative AI capabilities. Real Estate Focus: Clair is optimized for real estate agents, helping to build and maintain strong client relationships. Invisible Lead Building: The Chrome extension works in the background, continuously updating lead lists from any webpage visited and through our suite of APIs. Advanced AI: Powered by Vertex AI and Google’s Gemini 1.5 Pro model with 1 million tokens, ensuring precise and valuable insights. Seamless Data Management: Easily export chat history to Google Sheets with one click. Future Enhancements: Brad: Our next Gemini agent for residential mortgage brokers, focused on lead management and client relationship optimization. Gmail API Integration: Efficient email management. Google People API Integration: Better contact utilization. Advanced AI Features: Context-aware and personalized responses. Customization Options: Greater control over AI behavior. Mobile Compatibility: Complementary mobile app development. Stay tuned for more updates and enhancements as we continue to improve Clairvoyant GenAI and expand our suite of Gemini agents!

Phil Hills

https://github.com/Phil-Hills/Clairvoyant-ai-template

Log in or sign up for Devpost to join the conversation.