I Built a Full-Featured AI Browser From Scratch - Here's How

SmitVanani — Tue, 31 Mar 2026 12:20:51 +0000

Why I Built a Browser

I wanted a browser that felt built for how I actually work — vertical tabs, workspaces, and a built-in AI that can actually do things, not just chat. Arc and Zen inspired me, but I wanted to go further with AI integration.

So I built Nova, an open-source desktop browser from scratch.

GitHub: https://github.com/smitvanani/browser

The Tech Stack

Layer	Technology
Runtime	Electron 41
UI	React 19 + TypeScript
Build	Vite 8
AI	Claude API (Anthropic)
Styling	CSS custom properties, glassmorphism, backdrop blur

What Can It Do?

Browser Basics (Done Right)

Vertical sidebar tabs with drag-and-drop
Spaces: color-coded workspaces (Personal, Work, Research)
Command Palette (Cmd + K): search tabs, bookmarks, run actions
Split View (Cmd + \): two pages side by side
Focus Mode: hide the sidebar for distraction-free browsing
Find in Page, Bookmarks, PDF Viewer, Screenshots

Nova AI: The Core Differentiator

Press Cmd + J and you get a full AI assistant powered by Claude.

It does not just answer questions — it controls the browser.

Browser control

Open YouTube in a new tab
Close this tab
Search for React tutorials

Page understanding

Summarize this page
What are the main points?

File system access

List files on my Desktop
Read ~/Documents/notes.txt
Save this to a file

System commands

What's my battery level?
Run git status in ~/Projects/myapp
Send a notification

The AI also has persistent memory. Tell it to remember something and it will recall it next session.

Under the hood, this uses Claude's tool-use API. The main process defines ~15 tools (open tab, read file, run command, etc.), and Claude decides which tool to call based on your message.

Privacy and Productivity

Ad and tracker blocker (shows per-site tracker counts)
Screen time tracking with bar chart per domain
Site notes (write notes attached to any website)
Pomodoro timer (built-in focus timer)
Reading mode and Picture-in-Picture
Custom CSS injection (restyle any site)

Customization

12 accent colors
Dark / Light mode
Custom quick links on the new tab page
Choice of search engine (Google, DuckDuckGo, Bing, Brave)

Architecture Overview

nova-browser/
├── index.js              # Main process (~1700 lines)
├── preload.js            # IPC bridge
├── ai-inject.js          # AI overlay injected into web pages
├── src/renderer/         # React UI (25+ components)
│   ├── components/
│   │   ├── Sidebar/      # Tabs, spaces, actions
│   │   ├── Panels/       # AI, settings, notes, screen time
│   │   ├── Widgets/      # Pomodoro, bookmarks, page insights
│   │   └── Overlays/     # Loading, toasts, zoom, screenshots
│   └── hooks/
│       └── useBrowser.tsx # Central state (React Context)
├── newtab.html           # New tab page
└── onboarding.html       # 8-step onboarding

The main process handles everything: window management, tab lifecycle, session restore, ad blocking, AI chat, file system access, and all IPC communication.

The renderer is pure React + TypeScript, communicating with the main process through a contextBridge preload script.

The Onboarding Experience

Nova has an 8-step onboarding flow:

Welcome — cinematic logo reveal with orbiting dots
Your Name — live preview of the new tab greeting
Pick Your Vibe — accent color with a live mini-browser preview
Search Engine — choose your default
Import — one-click import from Chrome, Firefox, Safari, Edge
Quick Links — pick your top 6 sites
Meet Nova AI — interactive demo that greets you by name
Ready — confetti and a personalized summary

Lessons Learned

Electron is powerful but heavy. Managing webviews, IPC channels, and security takes real effort.
Tool-use AI beats chat-only AI. Giving Claude tools makes it 10× more useful.
Onboarding matters. A polished first-run experience makes people actually want to use the app.
CSS can do a lot. Glassmorphism, backdrop blur, cubic-bezier animations — no animation library needed.

Try It Out

git clone https://github.com/smitvanani/browser.git
cd browser
npm install
cp .env.example .env
# Add your Anthropic API key
npm run build:renderer
npm start

You will need an Anthropic API key for the AI features.

What's Next

I am actively working on this and would love feedback.

What features would you want in a browser like this? Drop a comment or open an issue on GitHub.