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.
-
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.
-
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.
-
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.
- Users can type
-
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.
-
Progressive Web App (PWA):
- Installable on desktop and mobile devices for easy access.
- Works offline for previously summarized articles (cached data).
-
Rate Limiting:
- Implement rate limits to prevent abuse (e.g., 5 requests per hour per IP address).
-
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.
-
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.
-
Backend:
- Python (FastAPI): For handling article extraction, summarization, and chat interactions.
- OpenAI API: For generating summaries and powering the chat functionality.
-
PWA:
- Next.js PWA Plugin: For enabling Progressive Web App features (e.g., offline support, installability).
- Service Workers: For caching and offline functionality.
-
Web Share Target API:
- Manifest Configuration: To register the app as a share target.
- Dynamic Routing: To handle shared links and process them automatically.
-
Rate Limiting:
- Redis: For storing and tracking request counts per IP address.
- Middleware: Implement rate-limiting logic in the backend.
-
Deployment:
- Render: For deploying the Python backend and Next.js frontend.
-
AI-Powered:
- Leverages OpenAI's GPT to provide smart summarization and interactive chat, making it a cutting-edge application.
-
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.
-
Progressive Web App:
- Installable on devices and works offline for cached content.
- Provides a native app-like experience without requiring an app store.
-
Scalable:
- Built with modern frameworks and tools, making it easy to scale and add new features in the future.
-
Phase 1: MVP:
- Build the core functionality: article summarization and chat.
- Implement rate limiting to prevent abuse.
-
Phase 2: Ease of use:
- Add direct link access (
readgpt.news/<LINK>
). - Enable PWA features (offline support, installability).
- Integrate the Web Share Target API.
- Add direct link access (
-
Phase 3: Enhancements:
- Improve the UI with animations and better visual feedback.
- Add support for more article sources (e.g., PDFs, blogs).
-
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.
- 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.
- 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.
To prevent abuse, the app implements rate limiting by tracking requests by IP address. Here’s how it works:
-
Backend Logic:
- We se Redis to store request counts per IP address.
-
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.
To enable readgpt.news/<LINK>
, we use Next.js dynamic routing. Here’s how it works:
-
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.
- Through dynamic routing,
-
Backend Integration:
- The backend extracts the article content and generates a summary.
- The summary and chat interface are displayed on the frontend.
-
Example URL:
readgpt.news/https://example.com/article
will automatically summarize the article athttps://example.com/article
.
To enable link sharing with the app, we use the Web Share Target API. Here’s how it works:
-
Manifest Configuration:
- The
share_target
field inmanifest.json
registers the app as a share target. - Example:
{ "share_target": { "action": "/share", "method": "GET", "enctype": "application/x-www-form-urlencoded", "params": { "url": "link" } } }
- The
-
Dynamic Routing:
- The
/share
route handles shared links. - Extract the shared link and process it like a direct link.
- The
-
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.
To make the app a Progressive Web App (PWA), we use the following:
-
Next.js PWA Plugin:
- We use the
next-pwa
plugin to enable PWA features.
- We use the
-
Service Workers:
- Automatically generated by the
next-pwa
plugin for caching and offline support.
- Automatically generated by the
-
Manifest File:
manifest.json
defines app metadata (e.g., name, icons, theme color).
-
Installability:
- Users can install the app on their devices for easy access.
-
Offline Support:
- Cached summaries and chat sessions are available offline.
- Clone the Repository:
git clone https://github.com/your-username/readgpt-news.git cd readgpt-news
- 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)
- 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
This project is licensed under the CC BY-NC-ND. See the LICENSE file for details.