RivalQ
AI-powered competitive intelligence platform built for the n8n hackathon. Next.js dashboard with real-time SSE progress, competitor management, and an n8n workflow orchestrating 5 AI agents (Researcher, Pricing, Marketing, Strategy, Recommendation) using Firecrawl, OpenRouter, and callback APIs.
My Role
UI/UX Design + AI Engineering
Core Stack
Next.js, n8n, OpenRouter, Firecrawl, Server-Sent Events
Timeline
2026.02
Live Project
—
The Challenge
The core problem
Businesses need structured competitive intelligence without manual research. Scraping, comparing, and synthesizing competitor data is time-consuming and inconsistent.
Product vision
An end-to-end pipeline: create analyses, trigger a workflow that runs five specialized AI agents (product, pricing, marketing, strategy, recommendations), and see real-time progress in the UI.
What I owned
Full stack: Next.js app for analyses and competitor management, webhook-triggered n8n workflow orchestrating five AI agents, Firecrawl for competitor scraping, and Server-Sent Events for live progress. Designed dashboard UX, API contract, n8n node orchestration, and callback handling for async results.
Results
Structured competitive intelligence on demand. One click kicks off multi-agent research; the UI stays in sync via SSE. No manual scraping or stitching.
Design system & UI
Dashboard-focused UI with clear hierarchy for analyses, competitor lists, and real-time agent progress. Consistent spacing, status colors, and loading states for long-running n8n executions.
Typography
Inter Bold
Inter Medium
Inter Regular
Colors
Primary
#6C6FF2
Success
#10B981
Warning
#F59E0B
Neutral
#6B7280
Background
#F9FAFB
System architecture
Next.js app triggers n8n via webhook; n8n runs 5 agents in parallel then sequence, calls back to the app with progress and final results; frontend consumes SSE for live updates.
Frontend
- Next.js App Router, React Query, Server-Sent Events for real-time progress
- Dashboard: new analysis, analyses list, analysis detail with live agent status
- Competitor CRUD, report export (JSON); input validation and toast feedback
n8n & AI agents
- Webhook trigger → parse input → split competitors → 3 parallel branches (Researcher, Pricing, Marketing)
- Firecrawl scrape per competitor; OpenRouter LLM per agent; merge → Agent 4 (Strategy) → Agent 5 (Recommendations)
- Progress callbacks at each stage; final callback with full results; respond to webhook
Integrations
- Firecrawl API for competitor and pricing page scraping
- OpenRouter for Researcher, Pricing, Marketing, Strategy, Recommendation agents
- Next.js API routes: analysis, callback, stream; file-based storage for analyses and competitors
Dashboard & real-time analysis
Create analyses with competitor list and optional focus areas; track progress via SSE as each agent completes. View results per competitor (research, pricing, marketing) plus strategy and recommendations in one place.
n8n workflow & 5 AI agents
Single n8n workflow: webhook receives analysis_id, competitors, callback_url; splits into parallel Researcher, Pricing, and Marketing agents; merges and runs Strategy then Recommendation agents; sends progress and final payload to your app.
Project impact
Unified competitive intelligence pipeline from UI to AI: one dashboard to run analyses and consume results, one n8n workflow to orchestrate scraping and LLM agents with clear progress and error handling.
5
AI agents in workflow
3
Parallel research branches
SSE
Real-time progress
n8n
Workflow orchestration
Reflection
I’d add retries and partial-result persistence so failed agents don’t lose the whole run, and richer filters (date range, competitor subset) for the report. Orchestrating 5 agents in n8n with clean callbacks and SSE was a great learning experience.