How to Integrate Jasper with Your Headless CMS

What is Jasper?

Jasper is an AI content platform for marketing teams that need to create on-brand copy across campaigns, ads, emails, landing pages, and blog posts. It includes tools for Brand Voice, company knowledge, campaign workflows, collaboration, and content generation. Teams use Jasper when they want AI drafting inside a governed marketing process rather than one-off prompts in a generic chat tool.

Why integrate Jasper with a headless CMS?

Jasper works best when it has accurate context: current product names, approved messaging, target personas, launch dates, disclaimers, and examples of published copy. If that context lives in a headless CMS, the integration can pull structured fields directly into Jasper prompts or sync approved source material into Jasper workflows. That cuts out the common workaround: a marketer copies a product page, pastes it into Jasper, rewrites the prompt, and hopes the source facts weren't already out of date.

A structured back end matters because AI workflows are sensitive to messy inputs. A rendered HTML page might include navigation, cookie banners, related articles, and duplicated metadata. A structured entry can give Jasper only the fields it needs, such as product.shortDescription, audience.name, seo.primaryKeyword, and launch.region. With Sanity, GROQ can select those exact fields, join referenced documents, and keep the payload small enough for repeatable generation.

Real-time events are the other half. When a product brief is published or a campaign page changes, a webhook or Function can call Jasper right away to create variants, refresh company knowledge, or generate draft social copy. The trade-off is that you still need to design review rules. Most teams shouldn't publish Jasper output directly to production. A safer pattern is to write AI output back into draft fields in Sanity Studio, then let editors approve, comment, schedule, and publish.

Architecture overview

A typical Jasper integration starts with a publish event in Sanity. A webhook fires when a document such as product, campaign, article, or landingPage is created, updated, or published. The webhook calls a server route or a Sanity Function. That server-side code uses @sanity/client and a GROQ query to fetch the complete source document from the Content Lake, including referenced entities such as personas, categories, legal notes, and brand messaging. The handler then formats that structured JSON into a Jasper request. For generation workflows, it sends a HTTPS request to Jasper's API using Bearer token auth, usually with a template or instruction, inputs, and the number of outputs you want back. For knowledge workflows, the same pattern can sync approved source text into the Jasper workspace your team uses for Brand Voice and company knowledge. Jasper returns generated copy, draft variants, or a created resource identifier, depending on the endpoint enabled for your account. From there, you choose where the result goes. Many teams patch Jasper output back into Sanity as draft-only fields such as jasperMetaDescriptions, jasperAdVariants, or jasperEmailSubjectLines. Editors review those fields in Sanity Studio, accept or rewrite them, and publish when ready. The published content then powers the website, mobile app, campaign landing page, email tool, or AI agent from the same structured source.

Common use cases

Step-by-step integration

1. 1

   Set up Jasper access

   Create or choose the Jasper workspace your marketing team uses, confirm API access for the workspace, and generate an API key from Jasper's admin or developer settings. Jasper API availability and endpoint names can vary by plan, so check the current Jasper API docs for the generation or knowledge endpoint enabled for your account.

2. 2

   Install the server packages

   Use Node.js 18 or newer so you can call Jasper with the built-in fetch API. Install the Sanity client with npm install @sanity/client. If your Jasper workspace provides an official client package, you can use it in place of fetch while keeping the same data flow.

3. 3

   Model the source content in Sanity Studio

   Add fields Jasper can use without guessing: title, slug, excerpt, body, audience reference, product reference, primaryKeyword, campaignGoal, legalNotes, and jasperDrafts. Keep Jasper output in separate draft fields so editors can compare AI-generated options before publishing.

4. 4

   Create the trigger

   Create a Sanity webhook filtered to the document types you want, for example _type in ['product','campaign','post'] and only on publish events. Point it at a Next.js route, API service, or Sanity Function. If you use Functions, the sync logic runs on Sanity content events without separate server infrastructure.

5. 5

   Call Jasper with structured inputs

   In the handler, fetch the full document with GROQ, flatten Portable Text only where Jasper needs plain text, and send a concise payload to Jasper. Include brand, audience, format, and output count instead of sending an entire page.

6. 6

   Test the editorial loop

   Publish a test entry, confirm the webhook fires, inspect the Jasper response, and patch generated copy back into Sanity. Build the frontend so it renders only approved fields, not raw Jasper drafts, then test cache revalidation or live preview.

Code example

import { createClient } from '@sanity/client';
import { NextRequest, NextResponse } from 'next/server';

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: process.env.SANITY_DATASET!,
  apiVersion: '2025-02-19',
  token: process.env.SANITY_WRITE_TOKEN!,
  useCdn: false
});

const query = `*[_id == $id][0]{
  title, excerpt, "slug": slug.current,
  "audience": audience->name,
  "product": product->{name, shortDescription},
  body[]{_type, children[]{text}}
}`;

function blocksToText(blocks: any[] = []) {
  return blocks
    .filter((b) => b._type === 'block')
    .map((b) => (b.children || []).map((c: any) => c.text).join(''))
    .join('
');
}

export async function POST(req: NextRequest) {
  const { _id } = await req.json();
  const doc = await sanity.fetch(query, { id: _id });

  const jasperRes = await fetch('https://api.jasper.ai/v1/generations', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.JASPER_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      template: 'marketing_blog_summary',
      inputs: {
        title: doc.title,
        excerpt: doc.excerpt,
        audience: doc.audience,
        product: doc.product?.name,
        sourceText: blocksToText(doc.body)
      },
      output_count: 3
    })
  });

  if (!jasperRes.ok) {
    throw new Error(`Jasper request failed: ${jasperRes.status}`);
  }

  const jasper = await jasperRes.json();
  const drafts = (jasper.outputs || []).map((item: any) => item.text).filter(Boolean);

  await sanity
    .patch(_id)
    .set({ jasperSummaryDrafts: drafts, jasperSyncedAt: new Date().toISOString() })
    .commit();

  return NextResponse.json({ ok: true, drafts: drafts.length });
}

How Sanity + Jasper works

CMS approaches to Jasper

Keep building

Explore related integrations to complete your content stack.