Exa Browser

An AI-powered search interface that combines intelligent web search with an interactive assistant. Built with Next.js, Exa API, and Groq/Vercel AI SDK.

What is this?

Exa Browser merges a Google-like search interface with AI capabilities to provide an intuitive way to search, browse, and analyze web content. Start with natural language queries on the homepage, then explore results across multiple categories with an AI assistant ready to help you understand any page.

Intelligent Search Results

Enter any natural language query and get instant results organized by content type. Search results are automatically categorized into Videos, Social Media, and Articles, making it easy to find exactly what you're looking for.

Browse Articles with AI Assistance

Click on any article to view it in the integrated browser. The AI chat panel provides instant analysis of the page content - ask questions, get summaries, or extract specific information without waiting for the page to be processed.

Video Support with Smart Analysis

Watch videos directly in the browser while chatting with the AI about their content. The assistant can help explain complex topics, summarize key points, or answer questions about what you're watching.

Key Features

• Intelligent Search: Natural language search powered by Exa's AI-first search engine
• Categorized Results: Automatically organized results across Videos, Social Media, and Articles
• Integrated Browser: View webpages directly within the interface with proxy support for blocked sites
• AI Assistant: Chat panel with pre-crawled webpage content for instant analysis and responses
• Fast Content Access: Pages are pre-crawled using Exa for speed, eliminating wait times during conversations

Features

Search Interface

• Natural language search with typewriter effect suggestions
• Multi-category result organization (YouTube, Twitter, News, LinkedIn, Medium, Reddit, GitHub)
• Animated loading states and smooth transitions
• Favicon display for source identification
• Responsive grid layout with three columns

Browser View

• Embedded iframe viewing with proxy toggle
• Automatic proxy detection for sites that block iframes (BBC, LinkedIn, etc.)
• Browser navigation controls
• Direct link to open in external browser

AI Chat Panel

• Context-aware assistant using Groq's Llama 3.3 70B model
• Pre-crawled webpage content for instant responses without delays
• Streaming responses with real-time updates
• Copy and regenerate message functionality
• Visual indicators for current page context

Prerequisites

You'll need two free API keys:

1. Exa API Key: Get it at https://dashboard.exa.ai/api-keys
2. Groq API Key: Get it at https://console.groq.com/keys

Installation

1. Clone the repository:

git clone https://github.com/adisinghstudent/exa-browser
cd exa-browser

2. Install dependencies:

bun i

3. Configure environment variables:

cp .env.example .env

4. Add your API keys to .env:

# Exa.ai
EXA_API_KEY=your_exa_api_key_here

# Groq
GROQ_API_KEY=your_groq_api_key_here

5. Run the development server:

bun run dev

6. Open http://localhost:3000 in your browser.

Usage

Search

1. Enter a natural language query in the search bar
2. Results are automatically categorized into Videos, Social Media, and Articles
3. Click any result to view it in the integrated browser

Browser

• Use the back arrow to navigate within the browser
• Use the double arrow to return to search results
• Toggle proxy mode for sites that block iframe embedding
• Open any page in your default browser using the external link button

AI Assistant

1. Click "Ask Page" to open the chat panel
2. Ask questions about the currently open webpage
3. The page content is pre-crawled using Exa for instant responses
4. Get summaries, extract specific information, or have a conversation about the content without waiting

Tech Stack

• Framework: Next.js 16 with React 19
• AI/ML:
  • Vercel AI SDK for streaming responses
  • Groq (Llama 3.3 70B) for language model inference
  • Exa API for search and content extraction
• Styling: Tailwind CSS 4
• Animations: Framer Motion
• Visualizations: D3.js (globe component)
• Language: TypeScript
• Runtime: Bun

API Routes

• /api/exa - Handles search requests with multiple result type configurations
• /api/chat - Manages AI chat with pre-crawled webpage content for fast responses
• /api/proxy - Proxies webpage content for sites that block iframes

Optional Configuration

The .env.example file includes optional API keys for other AI providers:

# Optional - other OpenAI-compatible providers
CEREBRAS_API_KEY=
OPENAI_API_KEY=

These are not required for basic functionality but can be configured if needed.

Development

Built with:

• bun run dev - Start development server
• bun run build - Build for production
• bun run start - Start production server
• bun run lint - Run ESLint

Contributing

This is an open source project that needs your help and support. Contributions, improvements, and feedback are welcome and appreciated. Whether it's bug fixes, new features, documentation improvements, or suggestions, all contributions help make this project better.

Feel free to:

• Open issues for bugs or feature requests
• Submit pull requests with improvements
• Share your ideas and suggestions
• Help improve documentation