Summary Search - AI-Powered Web Search

A production-ready Next.js application that combines web search with AI-powered content summarization. Built with the App Router, this application uses the Exa API for intelligent web search and Cohere's command-r-plus model for generating concise summaries.

✨ Features

Core Functionality

• Real-time Search: Query the web using Exa's advanced search API
• AI Summaries: Generate intelligent summaries using Cohere's command-r-plus model
• Rich Results: Each result includes title, URL, text snippet, and AI-generated summary
• Subpage Analysis: Discover and summarize related pages with horizontal carousel navigation
• Responsive Design: Beautiful, mobile-first design built with TailwindCSS

Technical Features

• Next.js App Router: Modern server-side rendering and API routes
• Rate Limiting: Built-in protection against API abuse
• Caching: Intelligent caching layer for improved performance
• Error Handling: Comprehensive error handling with retry logic
• Loading States: Beautiful loading animations and skeleton components
• TypeScript: Full type safety throughout the application

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Exa API key (Get one here)
• Cohere API key (Get one here)

Installation

1. Install dependencies

   pnpm install

2. Set up environment variables

   cp .env.example .env.local

   Edit .env.local and add your API keys:

   EXA_API_KEY=your_exa_api_key_here
   COHERE_API_KEY=your_cohere_api_key_here
   
   # Optional configurations
   RATE_LIMIT_REQUESTS_PER_MINUTE=60
   CACHE_TTL_SECONDS=300

3. Run the development server

   pnpm dev

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

🏗️ Architecture

API Routes

• /api/search (POST): Main search endpoint that orchestrates Exa search and Cohere summarization

Components Structure

components/
└── search/
    ├── SearchInput.tsx      # Search input with suggestions
    ├── SearchResults.tsx    # Results display with cards
    ├── LoadingState.tsx     # Loading animations
    └── ErrorState.tsx       # Error handling UI

Key Technologies

• Framework: Next.js 15.5.0 with App Router
• Styling: TailwindCSS v4 with custom design system
• APIs: Exa (search) + Cohere (AI summarization)
• Type Safety: TypeScript with strict mode
• Icons: Lucide React

🚀 Deployment

Deploy to Vercel (Recommended)

1. Push to GitHub

   git add .
   git commit -m "Initial commit"
   git push origin main

2. Deploy with Vercel

   • Visit vercel.com
   • Import your GitHub repository
   • Add environment variables in the dashboard
   • Deploy!

3. Environment Variables in Vercel

   • Go to your project dashboard
   • Navigate to Settings → Environment Variables
   • Add EXA_API_KEY and COHERE_API_KEY

🔍 Why Cohere's command-r-plus?

We chose Cohere's command-r-plus model for summarization because:

• Optimized for Reasoning: Excellent at understanding context and generating coherent summaries
• Production Stable: Reliable performance for production applications
• Nuanced Synthesis: Better at synthesizing information compared to other models like command-a-2025
• Consistent Quality: Generates high-quality, concise summaries consistently