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.
Top comments (0)