Marketing App

From Infrastructure to Interface

You have a data lake with temporal metadata, an encoding pipeline with time-aware embeddings, a hybrid retrieval system with temporal reranking, and an AI gateway with brand guardrails. Now you need an interface that marketing teams actually want to use.

The Marketing Intelligence dashboard serves three primary workflows:

Dashboard Architecture

The app is a Next.js application with three main areas:

Competitor Comparison Cards

The landing view. Each card represents a competitor with:

Threat levels are computed by comparing competitor positioning embeddings against your own brand messaging pillars. High cosine similarity = high threat (they're targeting the same space).

Change detection compares the current competitor profile against the previous snapshot. Any field that differs gets flagged. This is why temporal metadata from Module 1 matters — without dated snapshots, you cannot detect changes.

Streaming Analysis Panel

A chat-like interface powered by the AI Gateway (Module 4). Users type questions and get streaming responses with:

The streaming implementation uses Server-Sent Events (SSE). The API route calls the LangGraph gateway, which streams tokens as they're generated. The frontend renders tokens incrementally for real-time feedback.

Trend Visualization

Charts and timelines that make patterns visible:

These visualizations use the temporal metadata baked into your chunks. Each data point is a chunk with an observation_date and time_period, aggregated and plotted.

Content Drafting Workspace

The content workspace is where the marketing intelligence system creates direct value. Instead of just analyzing data, it helps the team produce content.

Brand-Aware Drafting

The workspace loads brand guidelines as persistent context. When a user requests "Draft a blog post about industry trend X," the AI:

Side-by-Side View

The workspace shows the AI draft on the left and the brand guidelines reference on the right. This lets the writer:

Tone Scoring

A real-time tone checker that scores the draft against brand voice rules. The scorer looks for:

The score updates as the user edits, providing immediate feedback on brand alignment.

Technical Implementation

Streaming Chat API

The chat API route connects to the LangGraph gateway and streams responses:

Client → POST /api/chat { query, history }
       → SSE stream: data: { token, sources?, done? }

Each SSE event contains either a text token (for incremental rendering) or metadata (sources, confidence, suggestions). The stream terminates with a done: true event that includes the complete response and execution metadata.

Conversation Persistence

Conversations are stored in a marketing_conversations table:

This enables:

State Management

The dashboard uses React state for:

Competitor data and trend data are fetched on load and refreshed on a configurable interval. The chat is real-time via SSE.

Design Decisions

Why a dashboard, not just a chatbot? Chat is great for ad-hoc questions but bad for monitoring. Marketing teams need to glance at a dashboard and see "CompetitorX changed their pricing page yesterday" without asking. The dashboard provides ambient awareness; the chat provides deep analysis.

Why side-by-side brand guidelines? Brand compliance is easier to enforce when the rules are visible. Hiding guidelines behind a "check" button means writers only discover violations after writing. Side-by-side display makes brand-aware writing the default behavior.

Why streaming? Marketing analyses can take 5-15 seconds. Without streaming, users see a blank screen and wonder if the system is working. Streaming shows progress immediately and lets users start reading before the full response is ready.

What You'll Build

Glossary