# Chipter: A Self-Generating Content Engine for Chip Reviews > A chip-review platform that writes in its own voice and produces social-ready video — built on headless Sanity + Next.js with an automated Remotion pipeline. - Client: Chipter - Service: Web Development · Headless CMS · Video Automation - Date: January 2026 - Canonical: https://zephyrpixels.dev/case-studies/chipter Chipter is a chip-review website with the ambitions of a media company and the headcount of one. Editors write the review, and the platform generates the rest — articles, platform-sized videos, newsletters, and social posts. It doubles as our showcase for how far a modern Sanity + Next.js build can be pushed when video, AI, and delivery are treated as first-class parts of the CMS. --- ## Overview Chipter is a chip-review website with the ambitions of a media company and the headcount of one. Every review needs to ship as a polished article, as a set of social videos sized for every platform, and as email — all in a single, consistent brand voice. We built Chipter as a content engine: editors write the review, and the platform generates the rest. It's also our showcase for what a modern Sanity + Next.js build can do when video, AI, and delivery are treated as first-class parts of the CMS. The stack: **Next.js 16, React 19, Sanity, Remotion, Cloudinary, Resend, and Clerk** — built on partner-grade Sanity and Cloudinary infrastructure. --- ## The Challenge A review site lives or dies on its publishing cadence, and the work that usually slows that cadence isn't the writing — it's everything after. Each review wanted a square card for the feed, a vertical reel, a YouTube-ready cut, and an animated preview for Bluesky. That normally means a motion designer and a render farm. Chipter had neither. Voice was the second problem. A chip review, a blog post, a newsletter subject line, and a 30-second video caption all have to sound like the same opinionated narrator — across hundreds of pieces, written on different days. Consistency at that scale is not something a style guide alone delivers. And it all had to behave as one system: the CMS, the video renderer, the asset CDN, the email platform, and user accounts couldn't be four disconnected tools bolted together. --- ## The Solution **Automated video generation.** The centerpiece. Chipter ships **15 Remotion video templates** — compact review cards, dramatic score reveals, an oscilloscope-styled score trace, a terminal/ASCII cut, and long-form narrative pieces up to 75 seconds (a papercut "origin story" of the potato, a kinetic-typography brand manifesto). An editor picks a template inside Sanity Studio and the platform renders it on demand: serverless, in the cloud, no local tooling. The pipeline is idempotent — it never re-renders a video that already exists for a given review, template, format, and orientation — and it produces both MP4 and animated-GIF outputs, in portrait, landscape, or square. *[Image: A rendered Chipter review card — Cheetos Crunchy Flamin' Hot Dill Pickle, scored 7.2 "Seismic Snack"]* **AI that writes in the brand's voice.** Chipter encodes its editorial voice as structured context the AI actually reads. A **context agent**, connected over Sanity's MCP integration, drafts entire reviews and posts against a canonical voice document. Inside the Studio, **AI Assist field actions** handle the surgical edits: _Rewrite in Chipter voice_, a softer _laid-back_ register, _Generate verdict from review_, _Generate video copy_, and _Suggest section subheads_ — each governed by the same voice rules so a one-line verdict sounds like the 800-word review above it. **One asset and delivery pipeline.** Rendered videos land in **Cloudinary**, which derives every social variant — Instagram, TikTok, YouTube Shorts, square, vertical, thumbnail — from a single master file. **Resend** powers the newsletter and lifecycle email, authored as React components and sent in rate-safe batches straight from the Studio. **Clerk** handles accounts, syncing users into the CMS so readers can like and comment. Editors preview everything live against the real site before publishing. --- ## The Results Chipter turned a multi-tool, multi-specialist workflow into a single editorial surface. An editor can take a review from blank document to published article, a full set of platform-sized videos, a newsletter, and a social post — without leaving Sanity Studio and without a designer in the loop. The AI voice system keeps hundreds of pieces sounding like one narrator, and the render pipeline removes the production bottleneck that usually caps how often a small team can publish video. *[Image: The Chipter homepage manifesto section — a seismic-station video player rendered by the pipeline]* The same pipeline produces long-form narrative pieces — a papercut "origin story" of the potato and a chaptered history of the chip — rendered entirely in code, frame by frame. *[Image: Frame from "A Brief History of the Chip" — a papercut potato origin story]* *[Image: Frame from the chip history — the 1960s "flavor revolution" chapter]* Because it's built on partner-grade Sanity and Cloudinary infrastructure, Chipter doubles as a reference implementation: live visual editing, on-demand serverless video, AI-assisted authoring, and headless asset delivery, all working as one system. It's the clearest demonstration we have of how far a headless CMS build can be pushed. ## What We Did - Custom Sanity Studio - Remotion Video Pipeline - AI Voice System - Cloudinary Delivery - Resend Email - Clerk Auth - Next.js 16 - Designed and built a custom **Sanity Studio** — schema, live visual editing, and bespoke plugins for newsletters, contacts, and video rendering - Built a serverless **Remotion video pipeline** with 15 templates rendering to Cloudinary on demand - Implemented an **AI voice system** — an MCP context agent plus in-Studio AI Assist field actions - Integrated **Cloudinary, Resend, and Clerk** into a single CMS-driven workflow - Shipped a **Next.js 16** front end with live preview and reader engagement (likes, comments, submissions) --- # Under the Hood A deeper, more technical tour for readers who want the engineering. Everything below is drawn from the production codebase. ## Architecture Chipter is a **pnpm monorepo**: - `apps/web` — the Next.js 16 App Router front end and all API routes - `apps/studio` — the Sanity Studio (CMS) - `packages/video-core` — shared Remotion compositions, fonts, types, and the composition registry - `apps/video` / `apps/cloudinary` — auxiliary Sanity SDK apps for render UI and asset management The web app consumes `@chipter/video-core` as a workspace package, so the same composition definitions power both the Studio's render UI and the server-side renderer — no duplication between authoring and rendering. ## The Video Pipeline A single registry, `packages/video-core/src/registry.ts`, is the source of truth: it declares every composition (dimensions, fps, duration, Zod prop schema), every Cloudinary delivery **variant**, and any alternate-orientation **renditions**. Because it's pure metadata with no React imports, the Sanity schema layer can import it without pulling Remotion into the bundle. Rendering runs through `POST /api/video/render`: 1. Validates input props against the composition's Zod schema. 2. **Idempotency check** — queries Sanity for an existing `video` doc matching `(template, format, orientation, source)`; returns early if one is already `ready`, `rendering`, or `uploading`. 3. Creates a `video` document at `status: 'rendering'`. 4. Renders with `@remotion/renderer`, using `@sparticuz/chromium` on Vercel (system Chrome locally) in headless-shell mode. 5. **MP4** uploads to Cloudinary under `chipter/videos/`; **GIF** uploads to Sanity's asset store (so Bluesky can embed it as an image under its 1 MB animation cap). 6. Patches the doc to `status: 'ready'` with the Cloudinary URL/public ID, or `failed` with an error message. Long-form pieces (60s+) render at a reduced `renderScale` to stay inside Vercel's function timeout, then `upscaleDeliveryUrl()` injects a Cloudinary `c_scale` transform so consumers still receive full-resolution video — the upscale happens free, at the CDN edge. The Vercel deploy depends on a precise `next.config.ts` setup: `serverExternalPackages` keeps the native renderer and Chromium unbundled, and `outputFileTracingIncludes` explicitly ships the Remotion bundle plus the hoisted Chromium binaries (loaded at runtime via `fs`, which static tracing can't see on its own). ## The AI Voice System The voice is encoded as **three seeded `sanity.agentContext` documents**, generated from markdown sources by `apps/studio/scripts/seed-agent-context.ts`: - `chipter-voice` — the deep reference for the **MCP context agent** that drafts full documents - `chipter-voice-assist` — a leaner cut for in-Studio AI Assist field actions (the strict house voice) - `chipter-voice-laidback` — the same voice in a casual register The `agentContextPlugin()` exposes an MCP endpoint so a model can draft entire reviews against the canonical voice. For inline edits, the `@sanity/assist` plugin registers five custom field actions in `apps/studio/sanity.config.ts` — _Rewrite in Chipter voice_, _Rewrite in laid back voice_, _Generate verdict from review_, _Generate video copy in Chipter voice_, and _Suggest section subheads_ — each routing through the appropriate voice document via `instructionParams`. The markdown sources are the source of truth; editors never hand-edit the voice docs in the Studio. ## Cloudinary Delivery Every rendered master is uploaded once; Cloudinary derives the rest. The registry's variant catalog declares site-playback, per-platform social (Instagram/TikTok/YouTube/square/vertical), and thumbnail transforms. Variants marked `eager` are materialized at upload; the rest derive lazily. Helpers `variantUrl()` and `upscaleDeliveryUrl()` build the delivery URLs, and the `apps/cloudinary` Studio app provides browse/search/transform/sync tooling over the media library. The cloud is `fortivex-partner`. ## Resend Email Emails are **React Email** components rendered to HTML at send time. `/api/newsletter` handles signup with a dual-write — a `contact` document in Sanity and a contact in the Resend audience — and gracefully re-subscribes returning addresses. `/api/newsletter/send` reads draft content (so editors can send unpublished drafts), then dispatches in batches of 10 with a delay to respect Resend rate limits. A custom **newsletter builder** plugin replaces the Studio's publish button with Preview (desktop/mobile mockups) and Send actions; a **contact manager** tool provides full subscriber CRUD with stats. ## Auth & Engagement Clerk is the identity source of truth. A **Svix-verified webhook** at `/api/webhooks/clerk` syncs `user.created` / `updated` / `deleted` events into Sanity `userProfile` documents, so a reader is immediately available in the CMS for commenting. Engagement is privacy-conscious: likes are session-based with SHA-256-hashed IPs for rate limiting (never stored raw) and committed atomically with the parent's like count; comments require authentication with server-verified author identity; chip submissions run through banned-word moderation before emailing the team.