Built with Hyperbrowser

A powerful research assistant built with Next.js 15, React 19, and Hyperbrowser. It allows users to aggregate diverse sources (Web URLs, PDFs) and gain deep insights through interactive AI tools.

• Multi-Source Ingestion:
  • Scrape Web URLs: Instantly extract content from any website using Hyperbrowser.
  • PDF Uploads: Parse and analyze PDF documents client-side.
• Deep Research Analysis:
  • AI Research Summary: Generates comprehensive summaries with key insights
  • Interactive Mindmap: Visualizes relationships between concepts using React Flow.
  • Audio Overview: Generates a podcast-style audio summary (ElevenLabs).
  • Presentation Slides: Auto-generates slide decks from your sources
• Interactive Chat: Ask questions about your sources with streaming AI responses

• Framework: Next.js 15 (App Router)
• UI Library: React 19, Tailwind CSS, shadcn/ui, Framer Motion
• Web Scraping: Hyperbrowser SDK
• AI Models:
  • OpenAI: gpt-5-nano (Chat), gpt-4o-mini (Summary, Mindmap)
  • Google Gemini: gemini-3-pro-image-preview (Slides)
  • ElevenLabs: eleven_turbo_v2_5 (Audio)
• Visualization: React Flow (Mindmaps)
• PDF Processing: unpdf

You'll need API keys for the following services:

1. Hyperbrowser - Get API Key (Required for web scraping)
2. OpenAI - Get API Key (Required for Chat, Summary, Mindmap)
3. Google Gemini - Get API Key (Required for Slides)
4. ElevenLabs - Get API Key (Optional, for Audio)

1. Clone the repository:

   git clone https://github.com/yourusername/hyperbooklm.git
   cd hyperbooklm

2. Install dependencies:

   yarn
   # or
   npm install

3. Set up environment variables: Create a .env.local file in the root directory:

   cp .env.local.example .env.local

   Add your keys:

   # Hyperbrowser API Key
   HYPERBROWSER_API_KEY=your_hyperbrowser_key
   # OpenAI API Key
   OPENAI_API_KEY=your_openai_key
   # Google Gemini API Key
   GEMINI_API_KEY=your_gemini_key
   # ElevenLabs API Key (Optional)
   ELEVENLABS_API_KEY=your_elevenlabs_key

4. Run the development server:

   yarn dev

5. Open your browser: Navigate to http://localhost:3000

This project demonstrates how to build high-value growth tools using Hyperbrowser:

• Content Repurposing: Scrape blog posts and auto-generate LinkedIn carousels (Slides) or podcasts (Audio).
• Competitor Analysis: Ingest competitor landing pages to generate SWOT analysis mindmaps.
• Research Automation: aggregate whitepapers (PDFs) and documentation (URLs) into a single queryable knowledge base.

hyperbooklm/
├── app/
│ ├── api/ # Next.js API Routes (Server-side)
│ │ ├── audio/ # ElevenLabs integration
│ │ ├── chat/ # OpenAI Chat integration
│ │ ├── gemini/slides/ # Google Gemini Slides generation
│ │ ├── gpt/mindmap/ # OpenAI Mindmap generation
│ │ ├── scrape/ # Hyperbrowser Scraping
│ │ ├── summary/ # Research Summary generation
│ │ └── upload/ # PDF/TXT File processing
│ ├── page.tsx # Main application logic
│ └── globals.css # Global styles
├── components/
│ ├── ChatInterface.tsx # Chat UI
│ ├── MindMap.tsx # React Flow visualization
│ ├── Navbar.tsx # Navigation & Branding
│ ├── OutputsPanel.tsx # Right-side results panel
│ └── SourcesPanel.tsx # Left-side source management
└── lib/
 ├── api/ # API clients
 └── types.ts # TypeScript interfaces

MIT

Follow @hyperbrowser for updates.