๐ CollabAI
๐ฏ Problem
The information overload in academic settings can create significant challenges for students trying to get relevant concepts from lecture materials. As students, we experience firsthand the inefficiency of manually searching through lecture recordings, notes, and assignments to find specific information. Hence, we decided to develop CollabAI, which is an RAG-based solution that leverages modern tech to bridge the gap between educational content and accessible knowledge retrieval. ๐๐ก
๐ค What it does
CollabAI is a learning assistant that implements Retrieval-Augmented Generation to provide contextually relevant information from educational materials. Where the system:
- ๐ Upload content in any format - PDFs, diagrams, presentations - and our system automatically organizes and indexes with Unstructured ETL everything.
- ๐ Ask questions in natural language and receive relevant answers, eliminating manual searching.
- ๐งฉ Discover hidden relationships with visualization tools that map connections between documents and concepts, helping you identify patterns and generate new insights.
The application analyzes the semantic meaning of queries, retrieves the most relevant document chunks from AstraDB's vector store, and generates comprehensive responses grounded in the source material. ๐โจ
๐ ๏ธ How we built it
We implemented CollabAI using a modern tech stack designed for performance and scalability:
- ๐ฅ๏ธ Backend: Express.js with TypeScript for type-safe API development
- ๐จ Frontend: React with Next.js, Tailwind, ShadcnUI, and TypeScript for a robust component architecture
- ๐๏ธ UI Design: Wireframed and prototyped the UI/UX in Figma before implementation
- ๐ฆ Database: DataStax AstraDB for vector embeddings storage and semantic search
- ๐ RAG Pipeline: Langflow for designing the AI agent workflow to process your queries into responses
- ๐ Document Processing: Unstructured.io to vectorize different document formats, making all your content searchable regardless of format
- โ๏ธ File Storage: S3-compatible object storage to store the raw data of documents and efficiently deliver content to the frontend document viewer
๐ผ๏ธ Architecture Diagram โ View Here
โก Challenges we ran into
- ๐ Feature Prioritization: We faced difficult decisions about which features to implement first with our limited hackathon timeframe.
- ๐ Learning Curve: Our team needed to quickly master unfamiliar technologies including S3, AstraDB, Langflow, and Unstructured.
- โ ๏ธ Module Compatibility: We encountered integration issues between CommonJS and ES6 module systems when working with the Langflow client NPM Library.
- ๐ API Contract: Establishing and maintaining clear API specifications between frontend and backend required ongoing coordination.
- ๐จ UI/UX: Creating an intuitive interface that conceals the complex RAG architecture beneath was a significant design challenge.
- โณ Service Reliability: Langflowโs timeout issues forced us to develop lots of optimization strategies and fallback mechanisms.
- ๐ Pipeline Integration: Building a seamless data flow through the entire RAG system demanded careful attention to each component's interactions.
- ๐ Permission Management: Implementing secure file access control across multiple services required comprehensive security planning.
๐ Accomplishments that we're proud of
- ๐ป Frontend Implementation: We successfully created a user interface that closely matched our original UI/UX vision from Figma.
- ๐ฌ Team Communication: We established effective collaboration through dedicated Discord channels for sharing code, resources, and environment secrets.
- ๐๏ธ Architecture Design: We implemented a modular system architecture that allows independent scaling and future expansion.
- ๐ Versatile RAG Pipeline: Our system successfully processes multiple document formats beyond just text, making it more practical for real academic use.
- ๐ Scalable Performance: We built a solution that maintains responsiveness even as the document collection grows substantially.
๐ What we learned
- ๐ Vector Database & RAG: We gained practical experience with building AI agents with AstraDB and Langflow and learned how to create a system that utilizes external knowledge with language model capabilities.
- ๐ API Design: We learned to create robust API contracts and built the swagger page for our backend, ensuring seamless communication between frontend and backend.
- ๐ค AI Integration: We gained insights into prompt engineering and context management when working with large language models in production environments.
- ๐ค Team Workflow: We refined our collaborative development process, learning to divide tasks efficiently while maintaining system cohesion through our Discord server, separating different channels to different focuses.
- ๐จ UX Design: We improved our ability to translate complex technical capabilities into intuitive user experiences that non-technical users can navigate.
- โ๏ธ Cloud Services: We expanded our knowledge of cloud-based file storage systems like S3, PostgreSQL database hosted by Render, and their integration with web applications.
- โ ๏ธ Error Handling: We developed more sophisticated approaches to gracefully handling failures in the frontend.
๐ฎ What's Next
- ๐ค Collaborative Workspaces: We plan to implement shared project spaces where, for example, students and supervisors can collectively contribute and organize research materials for group accessibility.
- โ๏ธ Annotation Sharing: Our next feature will allow users to highlight important sections and add margin notes that are visible to all collaborators, enhancing collective understanding.
- ๐ Source Triangulation: We aim to develop functionality that cross-references information across multiple documents to verify accuracy and highlight different perspectives on the same concept.
- ๐ Targeted Resource Recommendations: Future versions will suggest additional papers based on user interactions, with approval workflows for supervisors to curate these recommendations.
- ๐ฌ Real-time Collaboration: We envision adding synchronous document viewing where multiple users can discuss and explore materials simultaneously with live chat integration.
- ๐ Citation Management: Future updates will include specific citations of the data sources that the AI used for the responses.
- ๐ฑ Mobile Experience: We plan to create a responsive mobile interface that maintains full functionality for on-the-go research and collaboration.
Built With
- amazon-web-services
- astradb
- css
- datastax
- figma
- html
- langflow
- postgresql
- prisma
- react
- render
- s3
- tailwind
- typescript
- unstructured
- vercel


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