agentic website stack

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: Agentic Website Stack
description: >-
  Build websites with a full agentic layer — not just frontend, but autonomous
  content publishing, backend dashboard (Kanban CMS), brand corpus as AI brain,
  block-based generative UI, hero image generation, trend scanning, and Convex
  cron-driven agents that write + publish on autopilot. Use when the user says
  "build an agentic website", "website that publishes itself", "autonomous
  content site", "agentic stack", "website with AI agents", "self-publishing
  blog", "SEO autopilot site", or wants to add an agentic content layer to any
  web project.
version: 0.2.0
---

# Agentic Website Stack

Build websites that are more than frontend — they have an autonomous agentic layer that creates, manages, and publishes content without human intervention. The AI writes structured blocks from your brand corpus, generates hero images, scans trends, publishes on schedule, and the site grows on its own.

**Key distinction:** The agent writes *data* (structured content blocks), not *code*. The frontend is a template that renders blocks as real React components. The agent decides *what* content and *which* blocks to use — the frontend decides *how* they look.

---

## Architecture Overview

```
┌─────────────────────────────────────────────────┐
│                   FRONTEND                       │
│   Public site. Renders content blocks as React   │
│   components. Reads from Convex reactively.      │
└────────────────────┬────────────────────────────┘
                     │ reactive queries
┌────────────────────▼────────────────────────────┐
│                    CONVEX                        │
│     Database + Functions + Cron scheduler        │
│     Single source of truth. Everything here.     │
└──────┬─────────────────────────────┬────────────┘
       │ mutations/queries           │ actions (AI calls)
┌──────▼──────────┐          ┌──────▼──────────────┐
│    DASHBOARD    │          │      AGENTS          │
│  Kanban CMS.    │          │  articleWriter       │
│  Human control. │          │  trendScanner        │
│  Auth-gated.    │          │  heroImageGen        │
│  @dnd-kit board │          │  socialPoster        │
└─────────────────┘          └─────────────────────┘
```

**Why Convex (not Supabase + GitHub Actions):**
- Reactive queries = dashboard and frontend update in real-time when agents write. No polling, no refresh.
- Cron jobs are native — no external CI/CD needed for scheduling
- `internalAction` = server-side agent functions. No API auth, no HTTP hops between services.
- Schema is code-first, type-safe, version-controlled
- Single Convex project shared by frontend and dashboard. No sync issues.
- File storage built in — hero images stored alongside content

---

## Stack

| Layer | Tech | Purpose |
|-------|------|---------|
| Frontend + Dashboard | Next.js or Vite + React | Single app, `/admin` routes auth-gated |
| Database + agents | Convex | Shared DB, cron jobs, AI agent actions, file storage |
| AI writing | Anthropic SDK (Claude) | Article generation from brand corpus |
| Image generation | Nano Banana Pro / DALL-E / Flux | Hero images per article |
| Styling | Tailwind CSS | Both public and admin |
| Kanban DnD | `@dnd-kit/core` | Drag-and-drop content pipeline |

---

## Phase 1 — Schema & Database

### Convex Schema

```typescript
// convex/schema.ts
import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

// ── Block types for structured content ──
const blockValidator = v.union(
  v.object({ type: v.literal("paragraph"), content: v.string() }),
  v.object({ type: v.literal("heading"), level: v.union(v.literal(2), v.literal(3)), content: v.string() }),
  v.object({ type: v.literal("image"), src: v.string(), alt: v.string(), caption: v.optional(v.string()) }),
  v.object({ type: v.literal("callout"), variant: v.union(v.literal("tip"), v.literal("warning"), v.literal("note")), content: v.string() }),
  v.object({ type: v.l