Home

BrainWave

An intelligent note-taking app with AI integration, built with OpenAI, Pinecone, Next.js, Shadcn UI, Clerk, and more.

The home page, featuring a brain half made off technology, symbolizing the blend of ai and human brain function.

Timeline
Feb 2024 - Mar 2024

Technologies
Next.js, Typescript, TailwindCSS, Prisma, MongoDB, Vercel AI, ChatGPT API, Pinecone

Tools
GitHub, Clerk, Shadcn UI

My Responsibilities as Full Stack Developer

  • Implementing an AI chat feature utilizing the Vercel AI SDK and API route handlers, ensuring seamless response streaming through technologies like useChat, StreamingTextResponse, and OpenAIStream.
  • Integrating intelligent document retrieval functionality by leveraging ChatGPT vector embeddings and Pinecone, enabling efficient information extraction.
  • Facilitated user interaction by implementing features such as light and dark theme toggling using next-themes, along with user authentication utilizing Clerk for secure access control.

Background

The project originated from the desire to enhance user engagement and accessibility by integrating cutting-edge AI technologies into a multifunctional web platform. Motivated by the potential to streamline interactions and offer intuitive features, the aim was to create a seamless and user-friendly experience for diverse audiences.

Problem Statement

The project aims to address the challenge of optimizing user interaction and information retrieval in web applications, particularly focusing on enhancing efficiency and engagement through the integration of advanced AI chat capabilities and intelligent document retrieval mechanisms. By tackling these issues, the project seeks to deliver a more intuitive and personalized user experience, ultimately improving overall satisfaction and usability.

Solution

The solution leverages state-of-the-art AI technologies such as the Vercel AI SDK, ChatGPT vector embeddings, and Pinecone to enable real-time chat interactions and intelligent document retrieval. Through seamless integration with modern web development tools like Next.js, TailwindCSS, and Prisma, the project delivers a robust and user-centric platform, ensuring efficient communication and streamlined access to relevant information.

Development Process

In the development process, I initiated by setting up the Next.js project, integrating Shadcn UI, configuring MongoDB Atlas, Prisma, and Clerk for efficient database management and user authentication.

Following setup, I focused on creating the layout and pages, implementing features like the navbar, note creation, and dark theme support.

Finally, I seamlessly integrated OpenAI and Pinecone, creating vector embeddings and leveraging the Vercel AI SDK to build the AI chat functionality for real-time interactions.

Here is what the homepage after login looks like with example notes. Each note has a title, date, and the content of the note, arranged in a grid.

Final Product

Here is a screen recording where I ask the AI Chat about a note that I wrote.

In this gif, I wrote a note about my plans for next Tuesday and the AI Chat gave me those plans in a list when I asked for what I had planned for next Tuesday.

Reflection

Through this project, I acquired proficiency in configuring complex tech stacks, including Next.js, Shadcn UI, MongoDB Atlas, Prisma, and Clerk for seamless application setup and management.

Reflecting upon the process, I recognize the need for clearer architecture planning upfront to minimize setup complexities and potential integration challenges.

Additionally, exploring optimization techniques for AI integration, such as fine-tuning vector embeddings and optimizing chat response handling, could enhance the overall performance and user experience of the application.

Source Code