Skip to content

Summarize and chat with any article using AI — paste a link, get insights, and interact seamlessly. Built with Next.js, FastAPI, and OpenAI APIs.

License

Notifications You must be signed in to change notification settings

thenameisflic/readgpt

Repository files navigation

ReadGPT.news

ReadGPT.news is a progressive web application that allows users to paste a link to an article, get an AI-generated summary of the content, and start an interactive chat session with the article. It’s designed to help users quickly understand and engage with long-form content using the power of AI.


Features

  1. Article Summarization:

    • Users paste a link to an article.
    • The app extracts the article content and generates a concise summary using OpenAI's GPT API.
    • We leverage WikiMedia's REST API to make some suggestions for first-time users.
  2. Interactive Chat:

    • Users can ask questions or discuss the article in a chat interface.
    • The app uses GPT to provide context-aware responses based on the article content.
  3. Direct Link Access:

    • Users can type readgpt.news/<LINK> in their browser, and the app will automatically process the article.
    • For example, readgpt.news/https://example.com/article will directly open and summarize the article.
  4. Web Share Target API:

    • Users can share links directly to the app from their browser or other apps.
    • The app will process the shared link and display the summary and chat interface.
  5. Progressive Web App (PWA):

    • Installable on desktop and mobile devices for easy access.
    • Works offline for previously summarized articles (cached data).
  6. Rate Limiting:

    • Implement rate limits to prevent abuse (e.g., 5 requests per hour per IP address).
  7. Responsive UI:

    • A clean, modern, and responsive user interface built with React and Next.js.
    • Easy-to-use forms for submitting links and chatting with articles.

Tech Stack

  1. Frontend:

    • Next.js: For server-side rendering, routing, and building a fast, scalable frontend.
    • React: For building interactive UI components (e.g., chat interface, forms).
    • Tailwind CSS: For styling and creating a modern, responsive design.
  2. Backend:

    • Python (FastAPI): For handling article extraction, summarization, and chat interactions.
    • OpenAI API: For generating summaries and powering the chat functionality.
  3. PWA:

    • Next.js PWA Plugin: For enabling Progressive Web App features (e.g., offline support, installability).
    • Service Workers: For caching and offline functionality.
  4. Web Share Target API:

    • Manifest Configuration: To register the app as a share target.
    • Dynamic Routing: To handle shared links and process them automatically.
  5. Rate Limiting:

    • Redis: For storing and tracking request counts per IP address.
    • Middleware: Implement rate-limiting logic in the backend.
  6. Deployment:

    • Render: For deploying the Python backend and Next.js frontend.

Why It’s Cool

  1. AI-Powered:

    • Leverages OpenAI's GPT to provide smart summarization and interactive chat, making it a cutting-edge application.
  2. User-Friendly:

    • No need for users to log in or generate API keys—everything works seamlessly.
    • Direct link access (readgpt.news/<LINK>) and Web Share Target API make it super easy to use.
  3. Progressive Web App:

    • Installable on devices and works offline for cached content.
    • Provides a native app-like experience without requiring an app store.
  4. Scalable:

    • Built with modern frameworks and tools, making it easy to scale and add new features in the future.

Roadmap

  1. Phase 1: MVP:

    • Build the core functionality: article summarization and chat.
    • Implement rate limiting to prevent abuse.
  2. Phase 2: Ease of use:

    • Add direct link access (readgpt.news/<LINK>).
    • Enable PWA features (offline support, installability).
    • Integrate the Web Share Target API.
  3. Phase 3: Enhancements:

    • Improve the UI with animations and better visual feedback.
    • Add support for more article sources (e.g., PDFs, blogs).
  4. Phase 4: Advanced Features:

    • Allow users to save and revisit past articles and chats (using local storage or cookies).
    • Add multi-language support for summarization and chat.

Target Audience

  • Busy Professionals who want to quickly understand articles without reading the full text.
  • Students who need to summarize and discuss academic papers or news articles.
  • Curious Readers who enjoy engaging with content in an interactive way.

Success Metrics

  • User Engagement: Number of articles summarized and chat interactions per session.
  • Traffic: Number of unique visitors and requests per day.
  • Retention: Percentage of users who return to the app after their first visit.

Rate Limiting Implementation

To prevent abuse, the app implements rate limiting by tracking requests by IP address. Here’s how it works:

  1. Backend Logic:

    • We se Redis to store request counts per IP address.
  2. Middleware:

    • We have a middleware function in the backend to check the request count for the user's IP address.
    • If the limit is exceeded, we return a 429 Too Many Requests response with a friendly message.

Direct Link Access Implementation

To enable readgpt.news/<LINK>, we use Next.js dynamic routing. Here’s how it works:

  1. Dynamic Route:

    • Through dynamic routing, pages/[...slug].js in the Next.js project extracts the link from the URL and pass it to the backend for processing.
  2. Backend Integration:

    • The backend extracts the article content and generates a summary.
    • The summary and chat interface are displayed on the frontend.
  3. Example URL:

    • readgpt.news/https://example.com/article will automatically summarize the article at https://example.com/article.

Web Share Target API Implementation

To enable link sharing with the app, we use the Web Share Target API. Here’s how it works:

  1. Manifest Configuration:

    • The share_target field in manifest.json registers the app as a share target.
    • Example:
      {
        "share_target": {
          "action": "/share",
          "method": "GET",
          "enctype": "application/x-www-form-urlencoded",
          "params": {
            "url": "link"
          }
        }
      }
  2. Dynamic Routing:

    • The /share route handles shared links.
    • Extract the shared link and process it like a direct link.
  3. User Experience:

    • Users can share links from their browser or other apps directly to ReadGPT.news.
    • The app will automatically process the shared link and display the summary and chat interface.

PWA Implementation

To make the app a Progressive Web App (PWA), we use the following:

  1. Next.js PWA Plugin:

    • We use the next-pwa plugin to enable PWA features.
  2. Service Workers:

    • Automatically generated by the next-pwa plugin for caching and offline support.
  3. Manifest File:

    • manifest.json defines app metadata (e.g., name, icons, theme color).
  4. Installability:

    • Users can install the app on their devices for easy access.
  5. Offline Support:

    • Cached summaries and chat sessions are available offline.

Getting Started

  1. Clone the Repository:
    git clone https://github.com/your-username/readgpt-news.git
    cd readgpt-news
    
  2. Set Up the Backend:
  • Install dependencies: poetry install
  • Set up Redis for rate limiting.
  • Update your environment variables with a .env file (check .env.example)
  1. Set Up the Frontend:
  • Update your environment variables with a .env file (check frontend/.env.example)

  • Install dependencies:

    cd frontend
    npm install
    
  • Run the development server: npm run dev

License

This project is licensed under the CC BY-NC-ND. See the LICENSE file for details.

About

Summarize and chat with any article using AI — paste a link, get insights, and interact seamlessly. Built with Next.js, FastAPI, and OpenAI APIs.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published