About This App

A portfolio project showcasing AI agent & AI integration engineering, built on a production full-stack platform

System Architecture

The whole system at a glance: an AI chat agent and dashboard (Next.js), a custom MCP server that owns semantic search and the local embedding model, an event-driven background worker, and a PostgreSQL + pgvector / Redis data layer. Solid lines are synchronous request/response calls; dashed lines are asynchronous BullMQ jobs. Click the diagram to open it full size.

Overview

Price Monitor AI Agent is Eric Cheng's portfolio project, built first and foremost to demonstrate AI agent and AI integration engineering — and backed by production-grade full-stack product development.

The AI showcase is end to end: a streaming conversational agent that drives the app through a custom Model Context Protocol (MCP) server with typed tools (no raw SQL); RAG semantic search that finds products by meaning over a pgvector vector store powered by a locally-hosted MiniLM embedding model; and structured AI extraction used as a smart fallback for difficult pages rather than the default for every request.

The product itself tracks product prices from arbitrary URLs, stores historical records, and emails trend digests — a real, end-to-end application running on an event-driven Next.js 16 / React 19 platform with a Redis + BullMQ background worker, a typed PostgreSQL data layer, and a Dockerized, CI/CD-deployed architecture.

What This Project Demonstrates

AI Agent & Integration

Conversational AI agent with multi-step tool calling over a custom MCP server, streaming UI, multi-turn history, and clickable product cards wired back into the app
RAG semantic search — finds products by meaning, not keywords, over a pgvector vector store, powered by a locally-hosted MiniLM embedding model (all-MiniLM-L6-v2, 384-dim) that runs offline on the droplet
Single embedding authority — the MCP server is the only process that loads the model, owning both query-time (search) and write-time (reindex) embeddings, so its ~300 MB RAM cost is paid exactly once
Typed, Zod-validated MCP tools (keyword + semantic search, price history, trend summaries, add product) — the model has no direct SQL access, so every action is bounded by a validated tool schema
Structured AI extraction using the Vercel AI SDK (generateObject) with strict Zod schemas — used as a fallback for difficult pages, not the default for every request
Provider abstraction — OpenAI, Anthropic, and Google switchable through a single environment variable, for both extraction and chat
Production guardrails: per-turn step budget, turn timeout, structured error taxonomy, and a domain-restricted system prompt

Full-Stack Engineering

Event-driven architecture — BullMQ on Redis decouples the web app from a background worker (price checks, metadata enrichment, vector reindex, digests, and scheduler-managed repeatable jobs)
Modern full-stack with Next.js 16 App Router, React 19, TypeScript, TanStack Query, and Shadcn UI
Backend worker with a 2-tier extraction pipeline (Cheerio → Playwright + stealth) and a worker-managed scheduler — no external cron dependency
Typed persistence with a shared Drizzle ORM schema across web, worker, and MCP server over PostgreSQL 18 + pgvector, with versioned, auto-applied migrations
Production operations: three independent Dockerized services on one network, health endpoints, CI/CD via GitHub Actions, and self-hosted deployment

Tech Stack

Web app	Next.js 16 App Router, React 19, TypeScript
UI	Tailwind CSS v4, Shadcn UI, Radix primitives, Sonner, Lucide
Forms & validation	React Hook Form, Zod
Data access	Drizzle ORM, PostgreSQL 18, pgvector
Queue & background jobs	BullMQ, Redis 8
Extraction	Cheerio, Playwright, Playwright Extra, puppeteer-extra-plugin-stealth
AI	Vercel AI SDK, OpenAI, Anthropic, Google, @modelcontextprotocol/sdk, streamdown
Embeddings / RAG	Local all-MiniLM-L6-v2 via @huggingface/transformers, @langchain/textsplitters, pgvector (HNSW cosine)
Email	Resend, React Email
Testing	Vitest, Testing Library, jsdom
DevOps	Docker Compose, GitHub Actions, GHCR, Coolify

Source Code

The full source code, including the MCP server, extraction pipeline, and deployment workflows, is available at github.com/onlineeric/price-monitoring-agent.