npx skills add ...
npx skills add openai/plugins --skill cms
npx skills add openai/plugins --skill cms
Headless CMS integration guidance — Sanity (native Vercel Marketplace), Contentful, DatoCMS, Storyblok, and Builder.io. Covers studio setup, content modeling, preview mode, revalidation webhooks, and Visual Editing. Use when building content-driven sites with a headless CMS on Vercel.
You are an expert in integrating headless CMS platforms with Vercel-deployed applications — covering Sanity (native Vercel Marketplace), Contentful, DatoCMS, Storyblok, and Builder.io.
Sanity is the primary CMS integration on the Vercel Marketplace with first-class Visual Editing support.
Auto-provisioned environment variables:
SANITY_PROJECT_ID — Sanity project identifierSANITY_DATASET — dataset name (usually production)SANITY_API_TOKEN — read/write API tokenNEXT_PUBLIC_SANITY_PROJECT_ID — client-side project IDNEXT_PUBLIC_SANITY_DATASET — client-side dataset namedefineLive() (next-sanity v12)Use defineLive() for automatic real-time content updates without manual revalidation. In next-sanity v11+, defineLive must be imported from the next-sanity/live subpath:
Breaking change in v12:
defineLive({fetchOptions: {revalidate}})has been removed.defineLive({stega})is deprecated.
Sanity Visual Editing lets content editors click-to-edit content directly on the live site preview. Requires Sanity Studio v5+ (React 19.2) and @sanity/visual-editing v5+.
In next-sanity v11+, VisualEditing must be imported from the next-sanity/visual-editing subpath:
Configure the webhook in Sanity at Settings → API → Webhooks pointing to https://your-site.vercel.app/api/revalidate.
All CMS integrations should use Next.js Draft Mode for preview:
| Variable | Scope | CMS | Description |
|---|---|---|---|
SANITY_PROJECT_ID / NEXT_PUBLIC_SANITY_PROJECT_ID | Server / Client | Sanity | Project identifier |
SANITY_DATASET / NEXT_PUBLIC_SANITY_DATASET | Server / Client | Sanity | Dataset name |
SANITY_API_TOKEN | Server | Sanity | Read/write token |
SANITY_REVALIDATE_SECRET | Server | Sanity | Webhook secret for revalidation |
CONTENTFUL_SPACE_ID | Server | Contentful | Space identifier |
CONTENTFUL_ACCESS_TOKEN | Server | Contentful | Delivery API token |
CONTENTFUL_PREVIEW_TOKEN | Server | Contentful | Preview API token |
DATOCMS_API_TOKEN | Server | DatoCMS | Read-only API token |
⤳ skill: marketplace⤳ skill: runtime-cache⤳ skill: routing-middleware⤳ skill: env-vars⤳ skill: nextjs// lib/sanity.ts
import { createClient } from "next-sanity";
export const client = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
apiVersion: "2026-03-01",
useCdn: true,
});// schemas/post.ts
import { defineType, defineField } from "sanity";
export const post = defineType({
name: "post",
title: "Post",
type: "document",
fields: [
defineField({ name: "title", type: "string" }),
defineField({ name: "slug", type: "slug", options: { source: "title" } }),
defineField({ name: "body", type: "array", of: [{ type: "block" }] }),
defineField({ name: "mainImage", type: "image", options: { hotspot: true } }),
defineField({ name: "publishedAt", type: "datetime" }),
],
});// app/studio/[[...tool]]/page.tsx
"use client";
import { NextStudio } from "next-sanity/studio";
import config from "@/sanity.config";
export default function StudioPage() {
return <NextStudio config={config} />;
}// sanity.config.ts
import { defineConfig } from "sanity";
import { structureTool } from "sanity/structure";
import { visionTool } from "@sanity/vision";
import { post } from "./schemas/post";
export default defineConfig({
name: "default",
title: "My Studio",
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
plugins: [structureTool(), visionTool()],
schema: { types: [post] },
});// lib/sanity.ts
import { createClient } from "next-sanity";
import { defineLive } from "next-sanity/live";
const client = createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET!,
apiVersion: "2026-03-01",
useCdn: true,
});
export const { sanityFetch, SanityLive } = defineLive({
client,
// Required for draft content in Visual Editing — use a Viewer role token
serverToken: process.env.SANITY_API_TOKEN,
// Optional but recommended for faster live preview
browserToken: process.env.SANITY_BROWSER_TOKEN,
});// app/page.tsx
import { sanityFetch, SanityLive } from "@/lib/sanity";
export default async function Page() {
const { data: posts } = await sanityFetch({ query: `*[_type == "post"]` });
return (
<>
{posts.map((post) => <div key={post._id}>{post.title}</div>)}
<SanityLive />
</>
);
}npm install @sanity/visual-editing// app/layout.tsx
import { VisualEditing } from "next-sanity/visual-editing";
import { draftMode } from "next/headers";
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const { isEnabled } = await draftMode();
return (
<html>
<body>
{children}
{isEnabled && <VisualEditing />}
</body>
</html>
);
}// app/api/revalidate/route.ts
import { revalidateTag } from "next/cache";
import { parseBody } from "next-sanity/webhook";
export async function POST(req: Request) {
const { isValidSignature, body } = await parseBody<{
_type: string;
slug?: { current?: string };
}>(req, process.env.SANITY_REVALIDATE_SECRET);
if (!isValidSignature) {
return Response.json({ message: "Invalid signature" }, { status: 401 });
}
if (body?._type) {
revalidateTag(body._type);
}
return Response.json({ revalidated: true, now: Date.now() });
}npm install contentful// lib/contentful.ts
import { createClient } from "contentful";
export const contentful = createClient({
space: process.env.CONTENTFUL_SPACE_ID!,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN!,
});// app/page.tsx
import { contentful } from "@/lib/contentful";
export default async function Page() {
const entries = await contentful.getEntries({ content_type: "blogPost" });
return (
<ul>
{entries.items.map((entry) => (
<li key={entry.sys.id}>{entry.fields.title as string}</li>
))}
</ul>
);
}// app/api/draft/route.ts
import { draftMode } from "next/headers";
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const secret = searchParams.get("secret");
if (secret !== process.env.DRAFT_SECRET) {
return Response.json({ message: "Invalid token" }, { status: 401 });
}
const draft = await draftMode();
draft.enable();
const slug = searchParams.get("slug") ?? "/";
return Response.redirect(new URL(slug, req.url));
}