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.

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.

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.

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

• 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.