How to Integrate Mistral with Your Headless CMS

What is Mistral?

Mistral AI provides large language models through La Plateforme, including chat, code, vision, and embedding APIs. Teams use Mistral for multilingual generation, classification, summarization, semantic search, and internal AI workflows. The company is known for open-weight models as well as hosted commercial models like Mistral Large, Codestral, Pixtral, and Mistral Embed.

Why integrate Mistral with a headless CMS?

When content teams add AI to publishing workflows, the hard part usually isn't calling the model. It's getting the right content, at the right time, in the right shape. If an article lives as HTML, a page blob, or disconnected fields across systems, your Mistral prompt gets noisy fast. You end up stripping markup, guessing which title is canonical, and rerunning jobs because someone changed one paragraph after publish.

Connecting Mistral to a headless CMS works best when your content is structured. With Sanity's AI Content Operating System, content in the Content Lake is typed JSON, so a workflow can send Mistral exactly the fields it needs, such as title, excerpt, body, product specs, locale, author, and category. GROQ handles the selection and joins. Webhooks or Functions trigger when content is published, updated, or deleted, so summaries, translations, tags, moderation checks, or embeddings can run within seconds instead of in a nightly batch.

The alternative is manual copy and paste, scheduled exports, or a worker that polls for changes every 10 minutes. That can be fine for a prototype. It breaks down when you have 12 locales, 4 product lines, and editors publishing throughout the day. A real-time integration gives you repeatable AI content workflows, while still leaving humans in control of review, approval, and publishing.

Architecture overview

A typical Sanity and Mistral integration starts when an editor publishes content in Sanity Studio. A Sanity webhook fires on the publish event, or a Function runs directly in response to the content mutation. The handler receives the document ID, then uses GROQ to fetch only the fields Mistral needs from the Content Lake, including referenced content like category names, related products, or author metadata. The server-side handler calls Mistral's API using the official SDK, usually `@mistralai/mistralai` for TypeScript apps or `mistralai` for Python workflows. For generation tasks, it sends a `chat.complete` request to a model such as `mistral-large-latest` with a prompt that includes the structured fields. For search workflows, it calls the embeddings endpoint with cleaned text and writes the resulting vectors to your search index. Mistral returns generated text, JSON, classifications, or embeddings. From there, the integration can patch the Sanity document with AI-generated fields, queue the result for editorial review, send it to a search index, or render it in a frontend. The important detail is that Mistral doesn't become your source of content. It processes the selected content and returns output. Sanity remains the structured back end for web, mobile, AI agents, and editorial workflows.

Common use cases

Step-by-step integration

1. 1

   Create a Mistral account and API key

   Sign in to Mistral La Plateforme, create an API key, and save it as `MISTRAL_API_KEY`. For a TypeScript app, install the SDK with `npm install @mistralai/mistralai`.

2. 2

   Model the AI fields in Sanity Studio

   Add fields such as `aiSummary`, `aiTags`, `translationDrafts`, or `embeddingUpdatedAt` to your schema. Keep generated fields separate from human-authored fields so editors can review output before it appears on production pages.

3. 3

   Create the trigger

   Use a Sanity webhook filtered to published document types, such as `article` or `product`, or create a Function that runs on content mutations. Include the document ID in the payload so the handler can fetch the current version.

4. 4

   Fetch structured content with GROQ

   Use `@sanity/client` and GROQ to select only the fields the prompt needs. For example, fetch `title`, `excerpt`, `body`, `language`, `category->title`, and `relatedProducts[]->name` instead of sending the entire document.

5. 5

   Call Mistral and write back the result

   Send the selected content to `mistral.chat.complete` for summaries, classifications, or translations. For embeddings, call the embeddings API and write vectors to your search system. Patch Sanity with reviewable output, status fields, and timestamps.

6. 6

   Test the editor and frontend flow

   Publish a test document, inspect the webhook or Function logs, verify the Mistral response, and confirm the frontend reads the reviewed fields. Add retry handling for rate limits, model timeouts, and malformed JSON.

Code example

A small Next.js webhook handler that receives a Sanity publish event, fetches the full article with GROQ, sends it to Mistral, and patches the document with reviewable AI fields.

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

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

const mistral = new Mistral({ apiKey: process.env.MISTRAL_API_KEY! });

export async function POST(req: NextRequest) {
  const { _id } = await req.json();

  const article = await sanity.fetch(
    `*[_id == $id][0]{title, excerpt, language, "category": category->title, body}`,
    { id: _id }
  );

  const completion = await mistral.chat.complete({
    model: 'mistral-large-latest',
    responseFormat: { type: 'json_object' },
    messages: [
      { role: 'system', content: 'Return JSON with summary and tags fields.' },
      { role: 'user', content: JSON.stringify(article).slice(0, 12000) }
    ],
  });

  const content = completion.choices?.[0]?.message?.content ?? '{}';
  const text = Array.isArray(content) ? content.map((c: any) => c.text ?? '').join('') : content;
  const ai = JSON.parse(text);

  await sanity.patch(_id).set({
    aiSummary: ai.summary,
    aiTags: ai.tags,
    aiGeneratedAt: new Date().toISOString(),
  }).commit();

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

How Sanity + Mistral works

CMS approaches to Mistral

Keep building

Explore related integrations to complete your content stack.