Post

Chris Nicholas
@chrisnicholas.dev

I've built an AI web browser! AI chats are way better with context—now you can see exactly where info comes from, trust it, and dig deeper. It'll auto-redirect, open tabs, and fetch pages for you. How it works + code ↓

Chris Nicholas
@chrisnicholas.dev

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.

0 reposts1 like

Chris Nicholas
@chrisnicholas.dev

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.

Chris Nicholas
@chrisnicholas.dev

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!