Brief - Article Summarizer

Brief is an open-source article summarizer that turns lengthy articles into crisp, concise summaries using AI.

Features

• 🔗 Extract and summarize articles from URLs
• 💾 Save your article history in localStorage
• 📋 Copy summaries and URLs with one click
• 🎨 Beautiful, modern UI with orange/amber theme

Setup

1. Install dependencies:

   pnpm install

2. Set up RapidAPI:

   • Sign up or log in to RapidAPI
   • Subscribe to the Article Extractor and Summarizer API
   • Get your API key from the RapidAPI dashboard

3. Create a .env file in the root directory:

   Copy the example file:

   cp .env.example .env

   Then edit .env and add your RapidAPI key:

   # Your RapidAPI Key (REQUIRED)
   # Get it from: https://rapidapi.com/restyler/api/article-extractor-and-summarizer
   # 1. Sign up/login to RapidAPI
   # 2. Subscribe to "Article Extractor and Summarizer" API
   # 3. Go to your dashboard and copy your API key
   VITE_RAPID_API_KEY=YOUR_RAIPID_API_KEY
   
   # These usually don't need to change:
   VITE_RAPID_API_HOST=article-extractor-and-summarizer.p.rapidapi.com
   VITE_RAPID_API_BASE_URL=https://article-extractor-and-summarizer.p.rapidapi.com

   Important: Replace the example key above with your actual RapidAPI key!

4. Start the development server:

   pnpm dev

5. Build for production:

   pnpm build

Tech Stack

• React 19 with TypeScript
• Vite for build tooling
• Tailwind CSS v4 for styling
• Redux Toolkit for state management
• RapidAPI for article extraction and summarization

Usage

1. Enter an article URL in the input field
2. Click the submit button (or press Enter)
3. View the AI-generated summary
4. Copy the summary or URL using the copy buttons
5. Access your recent articles from the history section

Deployment to Vercel

The original SumZ app is hosted on Vercel (sumz.fardeen.tech). To deploy Brief to Vercel:

Option 1: Using Vercel CLI

1. Install Vercel CLI:

   npm i -g vercel

2. Login to Vercel:

   vercel login

3. Deploy:

   vercel

4. Add environment variables in Vercel Dashboard:

   After deploying, go to your project settings:

   • Navigate to Settings → Environment Variables
   • Add these three variables:

   Variable Name	Value	Description
   VITE_RAPID_API_KEY	your_rapidapi_key_here	Your RapidAPI key (REQUIRED)
   VITE_RAPID_API_HOST	article-extractor-and-summarizer.p.rapidapi.com	API host (usually default)
   VITE_RAPID_API_BASE_URL	https://article-extractor-and-summarizer.p.rapidapi.com	API base URL (usually default)

   Example values:

   VITE_RAPID_API_KEY=54c0eebd5emsh121094ab66d0934p1399e8jsn79edcb68c436
   VITE_RAPID_API_HOST=article-extractor-and-summarizer.p.rapidapi.com
   VITE_RAPID_API_BASE_URL=https://article-extractor-and-summarizer.p.rapidapi.com
   

   ⚠️ Important: After adding environment variables, you must redeploy for them to take effect!

Option 2: Using GitHub Integration

1. Push your code to GitHub:

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/yourusername/brief.git
   git push -u origin main

2. Import to Vercel:

   • Go to vercel.com
   • Click "New Project"
   • Import your GitHub repository
   • Vercel will auto-detect Vite settings
   • Add environment variables in the project settings
   • Click "Deploy"

3. Configure custom domain (optional):

   • In Vercel project settings, go to "Domains"
   • Add your custom domain

Environment Variables in Vercel

Step-by-step:

1. Go to your Vercel project dashboard

2. Click on Settings (gear icon)

3. Click on Environment Variables in the left sidebar

4. Click Add New and add each variable:

   Variable 1:

   • Name: VITE_RAPID_API_KEY
   • Value: your_rapidapi_key_here (get from RapidAPI dashboard)
   • Environments: Select all (Production, Preview, Development)

   Variable 2:

   • Name: VITE_RAPID_API_HOST
   • Value: article-extractor-and-summarizer.p.rapidapi.com
   • Environments: Select all

   Variable 3:

   • Name: VITE_RAPID_API_BASE_URL
   • Value: https://article-extractor-and-summarizer.p.rapidapi.com
   • Environments: Select all

5. Click Save for each variable

6. Go to Deployments tab and click Redeploy (or push a new commit)

Quick Reference Table:

Variable	Example Value	Where to Get It
VITE_RAPID_API_KEY	54c0eebd5emsh...	RapidAPI Dashboard → Your Apps → Default Application → API Key
VITE_RAPID_API_HOST	article-extractor-and-summarizer.p.rapidapi.com	From API documentation (usually doesn't change)
VITE_RAPID_API_BASE_URL	https://article-extractor-and-summarizer.p.rapidapi.com	From API documentation (usually doesn't change)

⚠️ Important Notes:

• The API key is sensitive - never commit it to Git (it's in .gitignore)
• After adding variables, redeploy is required for changes to take effect
• You can test locally with the .env file before deploying