• Overview

• Technical Flow Chart
• Key Features
• Tech Stack
• Installation and Setup
  • Using Docker
  • Manual Installation
• Usage
• Contributions
• License

• Contact

The AI News Agent is an advanced AI-powered web application designed to fetch, summarize, and display the latest AI-related news articles in a visually engaging and user-friendly interface.

🚀 Powered by Multi-Agent Intelligence, this system integrates:

• 🤖 Large Language Models (LLMs) via Ollama and Camel AI for intelligent summarization of news articles.
• 📚 News API Integration for real-time retrieval of AI-related articles.
• 🌐 Interactive Frontend with a masonry grid layout, 3D hover effects, and a futuristic design using React, Radix UI, and Tailwind CSS.
• ⚡ Multi-Agent Orchestration with LangGraph for structured workflows managing news fetching and summarization.

🔹 👨‍💻 Multi-Agent Orchestration with LangGraph for efficient workflow management.
🔹 🔍 AI-Driven Summarization using LLMs to generate concise, accurate article summaries.
🔹 ⚡ Modern Frontend Design with React, Framer Motion animations, and responsive layouts.
🔹 🔒 Scalable Backend with FastAPI, MCP, and robust exception handling for production readiness.

📂 For learners: Refer to backend/main.py and frontend/src/App.jsx for detailed code comments explaining the agentic workflow and frontend design! 🎯

Flowchart: The system retrieves AI news via the News API, processes articles through a LangGraph workflow (fetch → summarize), and displays summarized content in a dynamic React frontend with a masonry grid layout.

• 🤖 Multi-Agent Architecture: Specialized agents for fetching news and summarizing articles, orchestrated by LangGraph.
• 📚 Real-Time News Retrieval: Integrates with News API to fetch the top 10 AI-related articles.
• 🧠 AI-Powered Summarization: Uses Ollama Llama 3.2 3B with a Camel AI fallback to generate 2-3 sentence summaries.
• 💻 Interactive Masonry Grid: Displays articles in a responsive masonry grid with 3D hover effects, source filtering, and fade-in animations, enhanced by a particle background.
• ⏳ Engaging Loading Animation: Custom SVG spinner with concentric rotating paths, centered on a blurred background with "Updating Latest AI News...".
• 🔄 Manual Refresh: Refresh button to re-fetch news, disabled during loading to prevent redundant calls.
• ⚔️ Robust Error Handling: Manages API failures, empty content, and summarization errors with graceful fallbacks.
• 🌐 CORS Support: FastAPI middleware ensures seamless frontend-backend communication.
• 📜 Minimal Logging: Backend logs only warnings by default, with a --verbose flag for detailed debugging.

Backend Dependencies (from requirements.txt):

• fastapi==0.115.12, mcp==1.9.0, fastmcp==2.3.4
• langgraph==0.3.34, langchain-core==0.3.56
• ollama==0.4.8, camel-ai==0.2.59
• requests==2.32.3, python-dotenv==1.1.0
• Full list in backend/requirements.txt.

Frontend Dependencies (from package.json):

• react==18.2.0, react-dom==18.2.0
• @radix-ui/themes==3.1.3, framer-motion==12.12.1
• axios==1.7.7, tailwindcss==3.4.10, react-masonry-css
• Full list in frontend/package.json.

• Docker installed
• News API key from newsapi.org
• Ollama running separately for LLM support

git clone https://github.com/TyrelM10/ai-news-agent.git
cd ai-news-agent

Create a .env file in backend/:

NEWS_API_KEY=your_news_api_key_here

Run Ollama in a separate terminal or as a service:

ollama serve
ollama pull llama3.2:3b

Verify:

ollama list

Ensure llama3.2:3b is listed.

docker build -t ai-news-agent .

docker run -d --name ai-news-agent -p 8000:8000 -p 5173:5173 --env-file backend/.env ai-news-agent

• Backend: http://127.0.0.1:8000
• Frontend: http://localhost:5173

docker stop ai-news-agent

docker start ai-news-agent

docker logs ai-news-agent

docker rm ai-news-agent

docker inspect --format='{{.State.Health.Status}}' ai-news-agent

Check logs for errors:

docker logs ai-news-agent

Ensure Ollama is running and the News API key is valid.

• Python 3.11+
• Node.js 18+, npm 9+
• Ollama for local LLM support
• News API key from newsapi.org

git clone https://github.com/TyrelM10/ai-news-agent.git
cd ai-news-agent

python -m venv venv
source venv/bin/activate  # Mac/Linux
venv\Scripts\activate     # Windows

cd backend
pip install -r requirements.txt

Create backend/.env:

NEWS_API_KEY=your_news_api_key_here

python main.py

Backend available at: http://127.0.0.1:8000

cd ../frontend

npm install

npm run dev

Frontend available at: http://localhost:5173

Follow instructions at ollama.ai.

ollama serve

ollama pull llama3.2:3b

ollama list

Ensure llama3.2:3b is listed.

• Open http://localhost:5173 to view AI news.
• Observe the SVG spinner with a blurred background during loading.
• Browse articles in a responsive masonry grid with 3D hover effects and fade-in animations.
• Filter articles by source using the filter bar at the top.
• Click Refresh News to fetch updated articles (disabled during loading).
• Click Read More to visit original article sources.

Contributions are welcome! Check the issues tab for feature requests and improvements.

To contribute:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/YourFeature).
3. Commit changes (git commit -m 'Add YourFeature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a Pull Request.

This project is licensed under the MIT License. See the LICENSE file for details.

For questions or collaboration inquiries, reach out to Tyrel Menezes on:

🔗 LinkedIn: https://www.linkedin.com/in/tyrel-menezes
🔗 GitHub: https://github.com/TyrelM10

🔝 Return