Post

This is genuinely super helpful when it comes documentation sites. --- Okay, so how it works! First I set up Electron, which is a way to use Chrome as a desktop app. Tools like VS Code, Slack, Discord also use it, meaning they're essentially web apps in wrapper.

I added a map of Electron `WebContentsView`s inside it, each allowing you to display a web page. Next, I set up a Vite + React app that displays this view, and a list of tabs above it. I'm using `motion/react` for the animations.

The AI chat uses the @liveblocks.io pre-built <AiChat /> component. It's easy to add tools which the AI can call at any time. For example, one tool fetches a website, converts its contents to markdown, then feeds this back into the AI. This way, it can accurately redirect/answer!