Newsletter AI Agent

An End-to-End Autonomous & Human-in-the-Loop AI Agent Platform Powered by LangGraph, Google Gemini, Tavily Web Search & Next.js

---

🌟 Overview

The Newsletter Agent is a full-stack, monorepo-based autonomous AI agent application engineered to research, curate, summarize, evaluate, and publish weekly tech digests. Built with an 8-Node LangGraph Agent Graph, it transforms raw user topics or prompt goals into polished, publication-ready newsletters with live execution streaming over Server-Sent Events (SSE) and real email delivery via the Resend API.

---

✨ Key Features

• 🧠 Autonomous & Human-in-the-Loop Modes:
  • Autonomous: Executes all 8 graph nodes end-to-end automatically.
  • Human-in-the-Loop: Intercepts workflow execution at key stages, allowing users to review retrieved articles/summaries before proceeding.
• 📡 Real-Time SSE Execution Log Stream:
  • Live event-driven progress updates streamed directly from the backend LangGraph engine using Server-Sent Events (text/event-stream).
  • Expandable stage cards displaying retrieved web search results, top ranked stories, summary takeaways, quality critique scores, and raw JSON payload snapshots.
• ✉️ Resend API Email Dispatch:
  • Direct email sending integrated with Resend API using custom domain alerts@support.elitedev.space.
  • Recipient email address automatically prefilled from local user profile.
• 📖 Rich Markdown & Artifact Viewer:
  • Full structured Markdown parsing via react-markdown and remark-gfm.
  • Multi-tab rendering: Visual, Markdown, and HTML.
  • One-click downloads for .md and .html files.
• 🎨 Minimalist ERP 3-Way Split UI:
  • Sleek side navigation (Agent, Newsletters history, Profile, and GitHub/LinkedIn links).
  • Modern neutral design palette (slate/neutral) matching shadcn/ui aesthetic with dark mode support.
• 💾 Zustand State Persistence:
  • Local browser storage for user profile settings, saved newsletters, and active agent execution states.

---

🏗️ Backend Agent Architecture & Node Flow

The backend graph in apps/server/src/agent is orchestrated using LangGraph @langchain/langgraph and persistent MemorySaver checkpointer.

graph TD
    A[User Input / Goal] --> B[Intent Router Node]
    B -->|Greeting / Chat| C[Chat Response Node]
    B -->|Newsletter Intent| D[Planner Node]
    D --> E[Research Node - Tavily Web Search]
    E --> F[Rank Node - Gemini LLM Selection]
    F --> G[Summarizer Node]
    G --> H[Writer Node - Draft Generation]
    H --> I[Critique Node - Quality Assessment]
    I -->|Score < 8| J[Improvement Node]
    J --> H
    I -->|Score >= 8 / Approved| K[Export Node]
    K --> L[Final Newsletter Artifact & Email Dispatch]

Loading

🧩 LangGraph Node Descriptions

1. Intent Router Node: Classifies user prompts into conversational queries vs newsletter generation goals.
2. Planner Node: Translates newsletter goals into targeted search queries.
3. Research Node: Queries the Tavily Web Search API to fetch 8+ live news stories.
4. Rank Node: Uses Gemini LLM reasoning to evaluate and select the top 5 most impactful articles.
5. Summarizer Node: Formulates concise key takeaways and "Why it matters" context for each story.
6. Writer Node: Drafts complete newsletter copy formatted in structured Markdown and clean HTML.
7. Critique Node: Performs quality assessment (grammar, tone, completeness) and assigns a score out of 10.
8. Improvement Node: Re-drafts content if the quality score is below threshold.
9. Export Node: Prepares final download files and email dispatch payloads.

---

📁 Repository Directory Structure

Newsletter Agent/
├── apps/
│   ├── server/                   # Node.js Express & LangGraph Agent Backend
│   │   ├── src/
│   │   │   ├── agent/            # LangGraph 8-Node Agent Graph & Checkpointer
│   │   │   ├── controllers/      # REST & SSE Controllers (getNews, stream, sendEmail, download)
│   │   │   ├── routes/           # Express Route Definitions
│   │   │   └── index.ts          # Server Entry Point (Port 3001)
│   │   └── package.json
│   │
│   └── web/                      # Next.js 16 App Router & React 19 Frontend
│       ├── public/               # Static assets & logo.webp
│       ├── src/
│       │   ├── app/              # App Router Pages (/agent, /newsletters, /profile)
│       │   ├── components/       # Reusable UI & Logo Components
│       │   ├── hooks/            # Custom Hooks (useAgent, useProfile)
│       │   ├── pages_modules/    # Page-specific views (ChatBox, LogPanel, NewsletterArtifact)
│       │   ├── services/         # Axios API & SSE EventSource Clients
│       │   └── store/            # Zustand Persist Stores (useAgentStore, useProfileStore)
│       └── package.json
│
├── MILESTONES.md                 # Step-by-Step Project Roadmap & Completed Features
├── LAST_IMPROVEMENTS.md          # Architectural Refactoring Documentation
├── pnpm-workspace.yaml           # Monorepo Workspace Configuration
└── package.json                  # Root Monorepo Scripts

---

⚡ Quickstart & Setup Guide

1. Prerequisites

• Node.js: v20.0.0+
• Package Manager: pnpm (v10+)

2. Environment Configuration

Create a .env file in apps/server/.env:

# Google Gemini LLM API Key
GEMINI_API_KEY=your_gemini_api_key

# Tavily Web Search API Key
TAVILY_API_KEY=your_tavily_api_key

# Resend Email API Key
RESEND_API=your_resend_api_key

# LangSmith Observability (Optional)
LANGSMITH_TRACING=true
LANGSMITH_ENDPOINT=https://api.smith.langchain.com
LANGSMITH_API_KEY=your_langsmith_api_key
LANGSMITH_PROJECT=NewsletterAgent

Create a .env.local file in apps/web/.env.local:

NEXT_PUBLIC_BACKEND_URL=http://localhost:3001

3. Installation

From the root directory:

pnpm install

4. Running Development Servers

Start both apps/server (Express backend) and apps/web (Next.js frontend) concurrently:

pnpm dev

• Frontend: http://localhost:3000 (or current Next dev port)
• Backend API: http://localhost:3001

---

🔌 API Reference Endpoints

Method	Endpoint	Description
POST	/api/get-news	Triggers news research agent workflow (goal, mode, threadId).
GET	/api/newsletter/stream	Streams live SSE execution logs & stage snapshots.
POST	/api/newsletter/approve	Approves intermediate stage & resumes Human-in-the-Loop execution.
POST	/api/newsletter/send-email	Dispatches newsletter email via Resend API to target recipient.
GET	/api/newsletter/download	Serves .md or .html file downloads directly.

---

🛠️ Built With

• Framework: Next.js 16 (Turbopack), React 19, Express.js
• Agent Architecture: LangChain, LangGraph JS, Tavily Search SDK
• LLM Engine: Google Gemini 2.5 Flash
• Styling: Tailwind CSS v4, Lucide React, Framer Motion
• State & Theme: Zustand (Persist Middleware), Next-Themes
• Email Delivery: Resend API

---

_{Built with ❤️ for Autonomous Agent Orchestration.}