AI Marketing Automation in Practice: An Intelligent Ad Pipeline System Based on Next.js and Claude Code

This article provides an in-depth analysis of the VoxHorizon Marketing Dashboard project, which aims to address the pain points of fragmented creative content production processes and low collaboration efficiency faced by modern marketing teams. It builds an end-to-end AI-driven ad production pipeline based on Next.js and Claude Code, integrating Kanban boards, intelligent agent loops, and automated review and publishing processes to improve ad material production efficiency and brand consistency.

Modern marketing teams face issues of fragmented creative production processes and low collaboration efficiency: traditional ad production relies on Slack, emails, and scattered documents, leading to information silos, version confusion, and opaque progress. Ekko, the AI division of VoxHorizon, developed this system with the goal of replacing loose workflows with a structured web application, establishing an end-to-end pipeline from creative brief to publication, improving efficiency while maintaining creative quality and brand consistency.

The project uses a mainstream tech stack: Next.js (React framework with server-side rendering + static generation, SEO-friendly) + TypeScript (error catching during development); Supabase (open-source BaaS providing PostgreSQL, real-time subscriptions, identity authentication, etc., suitable for CRUD-intensive applications); Tailscale (zero-configuration VPN based on WireGuard, solving secure access issues for remote teams).

The core of the system is a state-driven pipeline divided into five stages: 1. Briefing: Marketing managers create projects, define audiences, information, styles, etc., and convert them into structured data; 2. Generation: Integrate image APIs (e.g., DALL-E) to generate materials through multi-round iterations of the Claude Code agent loop; 3. Review: Kanban interface visualizes materials pending review, supporting comments and drag-and-drop progress; 4. Publication; 5. Audit. Each stage has clear input/output and state rules.

The project's highlight is the Claude Code agent loop running on a local Python Worker: the agent performs multi-step operations (analyze brief → generate prompt → call image API → evaluate results → iterate and optimize), reducing manual intervention; local deployment allows control over data privacy (marketing materials are sensitive) and avoids API latency/quota limits; Tailscale ensures secure communication between the local Worker and cloud applications.

The system uses a 'Kanban + Funnel' hybrid interface: horizontally displays task flow (briefing → generation → review → publication), and vertically filters and groups by marketing funnel levels (Awareness → Interest → Decision → Action). The 2D view not only focuses on the progress of individual materials but also provides a macro view of material coverage for marketing campaigns, helping to identify content gaps (e.g., insufficient materials in the decision stage).

This project demonstrates the evolution direction of marketing tools in the AI era from auxiliary tools to human-machine collaboration systems: through structured pipelines, AI integration, and intuitive interfaces, it transforms loose creative processes into manageable workflows. In the future, video/audio generation may be integrated to achieve full automation, but the current 'AI-assisted + human oversight' model is more practical and controllable.