GIF
peer to peer local first sync

Bringing the Power of AI to the Browser with a Local-First PWA

Inspiration

As a certified nerd passionate about running things in the browser and local-first software, I was inspired to combine these interests when the Prompt API presented the perfect opportunity. The goal was to create a chat application that feels completely instant by leveraging local reads and writes to a SQLite database running in the browser via WebAssembly.

What it does

The app is essentially a local-first version of ChatGPT, built as a Progressive Web App (PWA). It delivers a seamless user experience by handling all reads and writes locally, resulting in near-instant responses. The chat data is stored in a SQLite database running in the browser through WebAssembly, ensuring fast and efficient data management.

To enable synchronization across devices, I integrated Powersync, which syncs the local database with a PostgreSQL database. The PostgreSQL database then pub/subs to other clients where the user is logged in, allowing for real-time updates across devices. While the sync feature is currently in early alpha and has some known bugs, the core chat functionality remains stable.

How I built it

The project was built using several key technologies:

VitePWA: Used for building the PWA, setting up the service worker, and enabling offline functionality through Workbox.
Summarization API: Utilized to generate titles for chats, enhancing the user experience.
Custom React Hooks: Developed and published on npm to handle the adapter layer for storing state in the local database and keeping it in sync with the Prompt API session.
Powersync: Integrated for client-to-client synchronization, although it currently has some known bugs.

Challenges I ran into

One of the biggest challenges was writing the adapter layer for storing state in the local database and keeping it in sync with the Prompt API session. This required developing custom React hooks, which I have since published on npm for others to utilize.

Implementing synchronization also presented its own set of challenges, as client-to-client sync involves complex synchronization rules. However, I was able to make progress on this feature, even though it is currently in early alpha.

Accomplishments that I'm proud of

As a solo developer, I am extremely proud of what I was able to accomplish within the given timeframe. The chat application offers a unique user experience that surpasses Claude and ChatGPT in certain aspects. The instant responses and offline accessibility, made possible by the local-first architecture, sets it apart from other chat applications.

What I learned

Throughout the development process, I gained valuable insights into building local-first applications and integrating them with powerful AI capabilities. I deepened my understanding of PWAs, WebAssembly, and client-to-client synchronization.

Moreover, I learned the importance of breaking down complex challenges into manageable tasks and leveraging existing tools and libraries to accelerate development. Publishing the custom React hooks on npm also taught me the value of sharing reusable components with the developer community.

What's next for the project

Moving forward, I plan to continue refining the synchronization feature to address the known bugs and improve its stability. I also intend to explore additional ways to enhance the user experience, such as incorporating voice input and output, and expanding the range of AI-powered features.

Furthermore, I aim to gather user feedback and iterate on the application based on their suggestions and needs. By continuously improving the app and adding new capabilities, I hope to make it an indispensable tool for users seeking a fast, reliable, and offline-accessible chat experience powered by cutting-edge AI technology.