feat: complete marketing command center with pipeline, UI, and asset generation
- Dashboard with campaign management, asset gallery, and publishing queue - 7-agent pipeline: trend scout, research, scripts, ad creative, video, copy, distribution - Campaign form with screenshot upload, goal picker, platform selection - Campaign detail view with Details/Pipeline/Assets/Chat tabs - Two-set image generation: Gemini AI (NanoBanana MCP) + Canvas Design posters - Remotion video rendering with phone.png frame and real screenshot alignment - honeyDue branding: blue #0079FF, orange #FF9400, Inter font, warm off-white - Asset cards with source badges (Gemini/Canvas/Remotion/Playwright) - Markdown/JSON render endpoint for viewing pipeline outputs as HTML - Settings page with Tavily, Gemini, Postiz, Nextdoor integration management - Claude Chat for campaign feedback loop with streaming SSE - Postiz publishing modal with scheduling - Auth with NextAuth credentials + JWT sessions - SQLite via Prisma with better-sqlite3 adapter Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -0,0 +1,107 @@
|
||||
# Marketing Content Pipeline
|
||||
|
||||
This project implements an AI-powered Social Media Content Automation System.
|
||||
Seven specialized agents research, generate, render, and distribute marketing content.
|
||||
|
||||
# System Architecture
|
||||
Seven agents running in sequence:
|
||||
1. **Trend Scout** — trending content monitoring via Tavily
|
||||
2. **Marketing Research Agent** — deep market research via Tavily
|
||||
3. **Script Writer** — ad scripts from research output
|
||||
4. **Ad Creative Designer** — static ads via NanoBanana MCP + Playwright
|
||||
5. **Video Ad Producer** — video ads via Remotion
|
||||
6. **Copywriter Agent** — platform-specific copy
|
||||
7. **Distribution Agent** — publish manifest creation (gate-protected)
|
||||
|
||||
# Folder Structure
|
||||
- `assets/` — brand images, logos, product shots (mood board)
|
||||
- `knowledge/` — brand identity, platform guidelines, product/campaign info
|
||||
- `skills/` — all 7 agent skills (each has SKILL.md)
|
||||
- `outputs/` — generated content per campaign
|
||||
- `remotion-ad/` — Remotion video project with compositions
|
||||
|
||||
# Knowledge Files (READ FIRST)
|
||||
Every agent MUST read these before generating ANY content:
|
||||
- `knowledge/brand_identity.md` — tone, voice, personality, CTA patterns
|
||||
- `knowledge/platform_guidelines.md` — per-platform specs and formatting
|
||||
- `knowledge/product_campaign.md` — product details, features, campaign direction
|
||||
|
||||
# Available Tools
|
||||
|
||||
## Tavily (Web Research)
|
||||
Use `@tavily/core` npm package. Write a Node.js script to run searches:
|
||||
```javascript
|
||||
import { tavily } from "@tavily/core";
|
||||
const client = tavily({ apiKey: process.env.TAVILY_API_KEY });
|
||||
const result = await client.search("query", { maxResults: 10 });
|
||||
```
|
||||
The TAVILY_API_KEY is available in the environment.
|
||||
|
||||
## NanoBanana MCP (Image Generation)
|
||||
Available as MCP tool: `mcp__nanobanana__generate_image`
|
||||
Uses Google Gemini to generate images. Call it with a detailed prompt describing the desired image.
|
||||
The GEMINI_API_KEY is configured in .mcp.json.
|
||||
|
||||
## Playwright (HTML to PNG)
|
||||
Use Playwright to render HTML/CSS layouts to pixel-perfect PNG screenshots:
|
||||
```javascript
|
||||
import { chromium } from "playwright";
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
await page.setViewportSize({ width: 1080, height: 1080 });
|
||||
await page.setContent(htmlString);
|
||||
await page.screenshot({ path: "output.png" });
|
||||
await browser.close();
|
||||
```
|
||||
|
||||
## Remotion (Video Rendering)
|
||||
Video project is in `remotion-ad/`. Compositions are defined in `remotion-ad/src/`.
|
||||
To render a video:
|
||||
```bash
|
||||
cd remotion-ad && npx remotion render src/index.ts CompositionId --output ../outputs/campaign/video/filename.mp4
|
||||
```
|
||||
You can modify or create new compositions in `remotion-ad/src/` before rendering.
|
||||
|
||||
# Pipeline Execution Order
|
||||
trend-scout → research → script-writer → ad-creative → video-producer → copywriter → distribution
|
||||
|
||||
Each agent reads its SKILL.md from `skills/{agent-name}/SKILL.md` and follows it exactly.
|
||||
|
||||
# Output Convention
|
||||
```
|
||||
outputs/{task_name}_{YYYYMMDD}/
|
||||
├── trend_report.json
|
||||
├── research_results.json
|
||||
├── research_brief.md
|
||||
├── interactive_report.html
|
||||
├── ads/
|
||||
│ ├── instagram_feed_*.png (1080x1080)
|
||||
│ ├── instagram_stories_*.png (1080x1920)
|
||||
│ ├── nextdoor_spotlight_*.png (1200x1200)
|
||||
│ ├── nextdoor_display_*.png (1200x628)
|
||||
│ └── ad_manifest.json
|
||||
├── scripts/
|
||||
│ ├── scripts_all.json
|
||||
│ └── scripts_summary.md
|
||||
├── video/
|
||||
│ ├── instagram_reel_*.mp4 (1080x1920)
|
||||
│ ├── tiktok_ad_*.mp4 (1080x1920)
|
||||
│ ├── nextdoor_video_*.mp4 (1080x1080)
|
||||
│ └── scene_plans.json
|
||||
├── copy/
|
||||
│ ├── instagram_captions.json
|
||||
│ ├── tiktok_captions.json
|
||||
│ ├── nextdoor_posts.json
|
||||
│ └── copy_matrix.json
|
||||
└── Publish_manifest.md
|
||||
```
|
||||
|
||||
# File Naming Convention
|
||||
`{platform}_{format}_{hook_variant}_{dimensions}.{ext}`
|
||||
Example: `instagram_feed_hook_a_1080x1080.png`
|
||||
|
||||
# Safety Rules
|
||||
- No live API posting without explicit user approval
|
||||
- Distribution agent creates a publish manifest — NEVER auto-publishes
|
||||
- All media files must exist locally before creating the manifest
|
||||
- Always save outputs to the specified output directory
|
||||
Reference in New Issue
Block a user