ClaudeMarketing/docs/reference/THE_COMPLETE_PICTURE.md

# The Complete Picture

---

## What You're Building

A self-hosted AI marketing engine that researches trends, writes scripts, generates images, produces videos, writes copy, and publishes to Instagram, TikTok, and Nextdoor — autonomously — with you as the only human in the loop approving what goes live.

No marketing team. No freelancers. No design tools. No video editors. One prompt per campaign. ~20 minutes of your time. 20-30 ad assets out the other end.

---

## Part 1: Setup (One Time)

### What You Need Before Starting

- A machine that runs Docker (Mac, Linux, or Windows with WSL)
- Claude Max subscription (already have it)
- Tavily AI free account (1,000 research credits/month)
- Self-hosted Postiz (included in your Docker stack)
- Instagram Business/Creator account connected to Postiz
- TikTok developer app connected to Postiz
- Nextdoor Ads API partnership (apply at developer.nextdoor.com)

### Step 1: Clone and Configure

```bash
git clone https://github.com/your-repo/marketing-command-center.git
cd marketing-command-center
cp .env.example .env
```

Edit `.env`:
```bash
# Research
TAVILY_API_KEY=tvly-your-key

# Publishing
POSTIZ_API_KEY=your-postiz-key
POSTGRES_PASSWORD=a-secure-password

# Nextdoor (direct API — Postiz doesn't support it)
NEXTDOOR_API_TOKEN=your-token
NEXTDOOR_ADVERTISER_ID=your-id

# Dashboard login
NEXTAUTH_SECRET=generate-random-string
ADMIN_EMAIL=you@yourdomain.com
ADMIN_PASSWORD=your-password
```

That's it. 5 keys. No Anthropic API key — your Max plan handles Claude.

### Step 2: Authenticate Claude Code

```bash
claude login
# Browser opens → log in with your Max plan → done
```

### Step 3: Launch Everything

```bash
docker compose up -d
```

This starts 4 containers:
| Container | What It Does |
|-----------|-------------|
| **app** | Your Next.js dashboard + Claude Code pipeline |
| **postiz** | Social scheduling + media hosting for IG/TikTok |
| **postiz-db** | Postgres for Postiz (you never touch this) |
| **redis** | Cache for Postiz (you never touch this) |

### Step 4: Initialize

```bash
docker compose exec app npx prisma db push     # Create database tables
docker compose exec app npx prisma db seed     # Create your admin account
```

### Step 5: Connect Social Accounts in Postiz

Open `http://localhost:5000` → Postiz dashboard:
1. Connect Instagram (OAuth login — Postiz handles tokens forever)
2. Connect TikTok (OAuth login — Postiz handles daily token refresh)

### Step 6: Write Your Brand Files

Open `http://localhost:3000` → your dashboard, or edit directly:

```
pipeline/knowledge/brand_identity.md      ← Who your brand is
pipeline/knowledge/platform_guidelines.md ← How content looks per platform
pipeline/knowledge/product_campaign.md    ← What you're selling
pipeline/assets/                          ← Drop your logos, product shots, screenshots
```

**You're live.**

---

## Part 2: Your Daily Process

### Morning (~5 minutes)

```
1. Open http://localhost:3000
2. Check the Trends page
   → Trend Scout ran overnight (automated cron)
   → You see: "POV hooks trending on TikTok this week"
   → You see: "Competitor X running UGC-style ads about [topic]"
   → You see: "Carousel posts outperforming single images on IG this week"
3. Decide: "I want to run a campaign around [feature/angle]"
```

### Campaign Creation (~2 minutes)

```
1. Click "New Campaign"
2. Fill in the form:
   - Name: "Snarky Competitor Takedown"
   - Platforms: ☑ Instagram  ☑ TikTok  ☐ Nextdoor
   - Goal: App downloads
   - Key message: "We do what [competitor] can't"
   - Social proof: "50K downloads, 4.8★"
   - Variations: 5 hooks per platform
   - Use latest trend report: ☑
3. Click "Launch Pipeline"
```

### Pipeline Runs (~15-20 minutes, you do nothing)

You watch the pipeline progress page update in real-time:

```
✅ Trend Scout        12s    Pulled 5 trending hooks from this week
✅ Research Agent      2m     Market report: competitor gaps, audience pain points
✅ Script Writer       3m     15 ad scripts (5 hooks × 3 platforms)
✅ Ad Creative         3m     8 static ad images across 3 sizes
✅ Video Producer      5m     6 video ads (3 IG polished + 3 TikTok raw)
✅ Copywriter          2m     Captions + hashtags for every asset
✅ Distribution        1m     Publish manifest ready for review
```

**What each agent actually did:**

| Agent | Input | What It Did | Output |
|-------|-------|-------------|--------|
| **Trend Scout** | Automated web scan | Searched TikTok/IG trends, competitor ads, viral hooks | `trend_report.json` |
| **Research Agent** | Your campaign brief + trend report | Ran 5 Tavily searches (market, competitors, pain points, hooks, viral) | `research_results.json` + `interactive_report.html` |
| **Script Writer** | Research output + brand voice | Wrote 15 ad scripts with timed Hook→Body→CTA structure | `scripts/` folder with 15 scripts |
| **Ad Creative** | Scripts + brand assets | Generated images via NanoBanana → built HTML layouts → Playwright screenshotted them | 8 PNGs at platform-exact dimensions |
| **Video Producer** | Scripts + brand assets | Built Remotion compositions → rendered frame-by-frame | 6 MP4s (polished IG + raw TikTok styles) |
| **Copywriter** | Research + scripts + brand voice | Wrote platform-tuned captions, hashtags, metadata | `instagram_captions.json`, `tiktok_captions.json` |
| **Distribution** | All of the above | Assembled the publish manifest | `Publish_campaign_date.md` |

### Review (~10-15 minutes)

```
1. Click the Assets tab
2. Browse the gallery:
   - 8 static ad images (IG feed 1080x1080, IG Stories 1080x1920, Nextdoor 1200x1200)
   - 6 video ads (IG Reels 1080x1920 polished, TikTok 1080x1920 raw/authentic)
   - Each card shows: preview, caption, hashtags, hook text, platform badge
3. Click to expand any asset → see full preview + all metadata
4. Approve the ones you like (green check)
5. Reject the ones you don't (red X)
```

### Give Feedback (Optional, ~5 minutes)

Switch to the Claude tab if anything needs tweaking:

```
You: "Hook B is too corporate, make it snarkier"
Claude: *rewrites script, re-renders video* → new asset appears in gallery

You: "The colors on the static ads feel off, use more contrast"
Claude: *updates HTML/CSS, re-screenshots* → updated PNGs in gallery

You: "Create one more ad that directly calls out [competitor] by name"
Claude: *writes script, generates image + video* → 3 new assets appear

You: "Here are our actual competitors for future research: [list]"
Claude: *updates knowledge/product_campaign.md* → all future campaigns reflect this
```

### Publish (~2 minutes)

```
1. Select approved assets
2. Click "Push to Postiz"
3. Modal shows:
   - Which platform each goes to
   - Caption preview
   - Suggested schedule time (from research data)
4. Adjust schedule if you want
5. Click "Confirm"
6. Postiz uploads media → schedules posts → handles publishing
```

### What Happens Behind the Scenes

```
Your approved static ad (PNG) for Instagram:
  → Your app uploads PNG to Postiz (/upload endpoint)
  → Postiz stores it, returns public URL
  → Postiz creates scheduled post with caption + image
  → At scheduled time: Postiz calls Instagram Graph API
  → Instagram creates container → processes → publishes
  → Post is live on your Instagram

Your approved video for TikTok:
  → Your app uploads MP4 to Postiz
  → Postiz stores it, returns public URL
  → Postiz creates scheduled post with caption + video
  → At scheduled time: Postiz calls TikTok Content Posting API
  → TikTok processes and publishes
  → Video is live on TikTok

Your approved ad for Nextdoor:
  → Your app calls Nextdoor Ads API directly (GraphQL)
  → Creates campaign → ad group → uploads creative → creates ad
  → Nextdoor reviews → approves → ad goes live
```

### Monitor

```
Queue page shows:
  ┌──────────────────────────────────────────────────┐
  │ Scheduled                                         │
  │  📷 IG Feed - "Still doing X?"      Tue 7:30 AM  │
  │  🎬 IG Reel - Hook A (polished)     Tue 12:00 PM │
  │  🎬 TikTok - Hook A (raw)           Tue 5:00 PM  │
  │  📷 IG Feed - "Your app sucks"      Wed 7:30 AM  │
  │                                                   │
  │ Published ✅                                       │
  │  📷 IG Feed - "Upgrade Your..."     Mon 7:30 AM  │
  │  🎬 TikTok - "POV: you found..."   Mon 5:00 PM  │
  └──────────────────────────────────────────────────┘
```

---

## Part 3: What You're Getting

### Per Campaign (from one prompt)

| Asset Type | Quantity | Details |
|-----------|----------|---------|
| Static image ads | 6-10 | IG Feed (1080x1080), IG Stories (1080x1920), Nextdoor (1200x1200, 1200x628) |
| Video ads (motion graphic) | 4-6 | IG Reels (polished), TikTok (raw/authentic) — 15-30s each |
| Ad scripts | 15+ | 5 hook variations × 3 platform styles |
| Captions | 1 per asset per platform | Platform-tuned tone, hashtags, CTAs |
| Research report | 1 | Interactive HTML dashboard with market data, competitor analysis, keywords |
| Trend report | 1 | What's working right now on each platform |
| Publish manifest | 1 | Complete publishing plan with schedule recommendations |

### Per Week (running 2-3 campaigns)

| Output | Quantity |
|--------|----------|
| Static ads | 15-30 |
| Video ads | 10-18 |
| Unique scripts | 30-45 |
| Published posts | 15-25 across platforms |
| Your time invested | ~1 hour total |

### Per Month

| Output | Quantity |
|--------|----------|
| Static ads | 60-120 |
| Video ads | 40-72 |
| Published posts | 60-100 |
| Research reports | 8-12 |
| Your time invested | ~4 hours total |

---

## Part 4: What This Is Supplying

### The Full Marketing Stack, Replaced

| Traditional Role | What They Cost | Your System Replaces It With |
|-----------------|----------------|------------------------------|
| Market Researcher | $60-100/hr | Trend Scout + Research Agent (Tavily, automated) |
| Creative Director | $80-150/hr | Script Writer agent (knowledge files drive brand decisions) |
| Graphic Designer | $50-100/hr | Ad Creative Designer (NanoBanana + Playwright) |
| Video Editor | $50-120/hr | Video Ad Producer (Remotion, auto-rendered) |
| Copywriter | $50-100/hr | Copywriter Agent (platform-tuned, brand-voiced) |
| Social Media Manager | $40-80/hr | Distribution Agent + Postiz (scheduling, publishing) |
| **Total team cost** | **$5,000-15,000/mo** | **~$50/mo** (Max plan + Tavily free + Postiz self-hosted) |

### What You're Actually Paying

| Service | Cost | What It Does |
|---------|------|-------------|
| Claude Max | $100/mo (or $200 for Max 5x) | Powers all 7 agents — research, writing, image gen, video gen, copy, distribution |
| Tavily AI | Free (1,000 credits/mo) | Web research for trends + market data |
| Postiz | Free (self-hosted) | Media hosting + scheduling + publishing to IG/TikTok |
| NanoBanana | ~$5-15/mo (image generation) | AI images for static ads |
| Docker hosting | Free (your machine) or ~$5-20/mo (VPS) | Runs everything |
| **Total** | **~$110-235/mo** | |

---

## Part 5: Your Competitive Advantage

### 1. Speed

A human marketing team takes **1-2 weeks** to go from brief to published campaign. You do it in **20 minutes**. That's not an incremental improvement — it's a category change. You can react to trends the same day they emerge.

### 2. Volume

Human teams produce 5-10 ad variations per campaign. You produce **20-30 per campaign, 2-3 campaigns per week**. More variations = more data on what works = faster optimization. The platforms reward volume — their algorithms need creative variety to test and optimize delivery.

### 3. Consistency

Every asset is generated through the same knowledge files. Brand voice never drifts. Platform specs are never wrong. CTAs always follow the rules. A human team has bad days, misremembers guidelines, and cuts corners under deadline pressure. Your system doesn't.

### 4. Cost Structure

Your competitors are paying $5,000-15,000/month for a marketing team or agency. You're paying ~$150/month for the same output volume. That's a **97% cost reduction**. That gap doesn't close as you scale — it widens. More campaigns cost you almost nothing extra.

### 5. Institutional Memory

Every trend report, every research finding, every winning hook gets captured. Your knowledge files accumulate intelligence over time. After 3 months, your system knows your market, competitors, and audience better than any new hire could learn in a year.

### 6. Test Everything

You can't afford to have a human team create 20 hook variations to find the one that converts. You can. The research says top-performing TikTok ads hit 40-45% hook rates, but finding those hooks requires testing 10-20 variations. Your system generates them in minutes.

### 7. Platform-Native at Scale

Each platform gets content optimized for how it actually works:
- **Instagram:** Polished, aspirational, branded motion graphics
- **TikTok:** Raw, authentic, trend-driven, sounds-on
- **Nextdoor:** Neighborly, local, community-first

A human team tends to create one asset and resize it. Your system creates genuinely different content per platform because each agent applies platform-specific rules from the knowledge files.

### 8. You Own Everything

No SaaS vendor lock-in. No monthly platform fees that increase. No API changes that break your workflow overnight. The dashboard is yours. The pipeline is yours. Postiz is self-hosted. The database is a SQLite file you can back up with `cp`. If Postiz dies, you swap in Buffer's API. If Tavily dies, you swap in Exa. The architecture is modular — every piece is replaceable.

---

## Part 6: The Architecture (Final State)

```
┌─────────────────────────────────────────────┐
│              YOUR BROWSER                    │
│                                              │
│  Dashboard → Campaigns → Assets → Claude     │
│              Gallery     Chat    Queue        │
└──────────────────┬──────────────────────────┘
                   │
                   ▼
┌──────────────────────────────────────────────┐
│     YOUR DOCKER HOST (single machine)        │
│                                              │
│  ┌────────────────────────────────────────┐  │
│  │  Next.js App (port 3000)               │  │
│  │  ├─ SQLite database (campaigns/assets) │  │
│  │  ├─ NextAuth (login)                   │  │
│  │  ├─ SSE (realtime pipeline progress)   │  │
│  │  ├─ File server (preview outputs)      │  │
│  │  └─ Claude subprocess spawner          │  │
│  └─────────────────┬──────────────────────┘  │
│                    │                          │
│     ┌──────────────┼──────────────┐          │
│     │              │              │          │
│     ▼              ▼              ▼          │
│  ┌──────┐   ┌───────────┐   ┌────────┐      │
│  │Claude│   │  Postiz   │   │Pipeline│      │
│  │Code  │   │  (5000)   │   │Outputs │      │
│  │(Max) │   │  ├─Postgres│   │(volume)│      │
│  │      │   │  └─Redis  │   │        │      │
│  └──┬───┘   └─────┬─────┘   └────────┘      │
│     │             │                          │
└─────┼─────────────┼──────────────────────────┘
      │             │
      │             ├──→ Instagram API (posts go live)
      │             └──→ TikTok API (videos go live)
      │
      ├──→ Tavily API (research)
      ├──→ NanoBanana/Gemini API (images)
      └──→ Nextdoor API (ads)
```

### Data Flow: Prompt to Post

```
You type a campaign prompt in the browser
  │
  ▼
Next.js API spawns Claude Code subprocess (uses Max plan)
  │
  ▼
Claude reads CLAUDE.md → loads skills → reads knowledge files
  │
  ├─→ Trend Scout: scans web via Tavily → trend_report.json
  ├─→ Research Agent: 5 Tavily queries → research_results.json + report.html
  ├─→ Script Writer: reads research → writes 15 scripts
  ├─→ Ad Creative: NanoBanana generates images → Claude builds HTML → Playwright screenshots → PNGs
  ├─→ Video Producer: Claude writes Remotion compositions → renders → MP4s
  ├─→ Copywriter: reads everything → writes platform-tuned captions
  └─→ Distribution: assembles publish manifest
  │
  ▼
All outputs saved to pipeline/outputs/{campaign}/
Next.js detects new files → creates asset records in SQLite
SSE pushes updates to your browser in real-time
  │
  ▼
You browse the asset gallery → approve what you like
  │
  ▼
Click "Push to Postiz" → Next.js uploads media to Postiz → schedules post
  │
  ▼
Postiz publishes at scheduled time → content is live on Instagram/TikTok
  │
  ▼
Person scrolling Instagram sees your ad → downloads your app
```

---

## Part 7: What's in Each File

Here's every document we've built and what to use it for:

| File | Use It For |
|------|-----------|
| `FULL_SYSTEM_ANALYSIS.md` | Reference if you want to see how the original AndyNoCode system worked |
| `BEST_PRACTICES_GUIDE.md` | Official Anthropic skill-writing guidelines, 60+ linked resources |
| `PLATFORM_SPECS.md` | Instagram, TikTok, Nextdoor API details, dimensions, creative specs |
| `AUTONOMOUS_MARKETING_PLAN.md` | 7-agent pipeline design, ad creative frameworks, what makes people download |
| `FRONTEND_ARCHITECTURE.md` | Next.js dashboard architecture, database schema, Docker Compose, Claude/Postiz integration code |
| `THE_COMPLETE_PICTURE.md` | This document — the executive overview of everything |
| `transcript_clean.txt` | Original video transcript for reference |