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
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.
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.
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
Data Integration:
- Ensuring smooth and secure data flow between the Chrome extension and the backend.
- Handling API responses and managing data effectively.
Model Training:
- Optimizing the AI model for accuracy and efficiency required careful data preparation and training processes.
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.
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
- chrome
- chromeextensionframework
- googlesheets
- javascript
- vertexaiagent

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