How to Integrate LangChain with Your Headless CMS

What is LangChain?

LangChain is an open-source framework for building LLM applications with chains, agents, retrievers, document loaders, vector stores, and tool calling. Teams use it to build retrieval-augmented generation, chatbots, summarization flows, content classification, and agentic workflows across JavaScript, TypeScript, and Python. Its core value is orchestration: it connects models, prompts, data sources, tools, and memory into repeatable AI workflows.

Why integrate LangChain with a headless CMS?

LangChain gets much more useful when it can read the same approved content your editors publish. Without that connection, teams often copy product docs into prompt files, export CSVs once a week, or scrape rendered webpages into a vector database. That works for a demo. It breaks when a legal disclaimer changes at 4:00 PM and your support bot keeps citing the 9:00 AM version.

A headless CMS integration solves the content freshness problem, but the quality depends on the shape of the content. If the source is a page blob, LangChain has to split mixed navigation, body copy, scripts, and footer text. With Sanity as the AI Content Operating System, content is structured in the Content Lake as typed JSON. You can send LangChain a product name, warranty policy, availability note, region, locale, and related FAQ as separate fields instead of asking an LLM to guess what matters.

Real-time events matter too. Sanity webhooks can fire on publish, update, or delete, and GROQ can select only the fields your LangChain workflow needs. That means you can re-index one changed article instead of rebuilding 50,000 embeddings overnight. The trade-off is that LangChain doesn't host your content index by itself. You'll usually pair it with a vector database, a search service, or a custom retrieval layer, and you'll need to handle deletes, retries, and versioning.

Architecture overview

A typical Sanity and LangChain flow starts when an editor publishes or updates a document in Sanity Studio. The content mutation is written to the Content Lake. A Sanity webhook, filtered with GROQ to only fire for documents like article, product, faq, or policy, sends the document ID to an HTTPS endpoint. You can also run the same logic inside a Sanity Function, which keeps server-side processing close to the content event and avoids running a separate worker. The handler uses @sanity/client and GROQ to fetch the latest published document, including joined references such as categories, authors, related products, or localized fields. The handler then converts that structured JSON into LangChain Document objects, splits long fields with RecursiveCharacterTextSplitter, creates embeddings with a model provider through LangChain, and writes the chunks to a vector store through a LangChain vector store integration such as Pinecone, pgvector, Weaviate, or Elasticsearch. At request time, your app calls a LangChain retriever against that vector store, passes the matching chunks into a prompt, and returns the answer to the end user through a chat UI, support widget, internal editorial tool, or API. The same Content Lake entry can still power your website, mobile app, and AI agents, so you're not maintaining separate truth sources for people and models.

Common use cases

Step-by-step integration

1. 1

   Set up LangChain and model credentials

   Install the LangChain packages for your runtime. For a TypeScript app, start with langchain, @langchain/core, @langchain/openai, and the vector store package you plan to use. You'll also need a model provider key, such as OPENAI_API_KEY, and usually a vector database key. If you want traces and evaluation, create a LangSmith account and set LANGCHAIN_TRACING_V2=true.

2. 2

   Model AI-ready content in Sanity Studio

   Define schemas with fields LangChain can consume directly, such as title, summary, body, locale, audience, product references, category references, effectiveDate, and status. Avoid dumping everything into one rich text field when the AI workflow needs separate facts.

3. 3

   Create a GROQ query for indexing

   Write a query that fetches one published document by ID and joins the references your retrieval flow needs. For example, fetch an article with its category title, author name, slug, summary, and Portable Text body instead of sending the entire document.

4. 4

   Trigger sync on content events

   Create a Sanity webhook filtered to published document types, or use a Sanity Function to run server-side code when content changes. Send the document ID, document type, and revision ID to your sync handler so you can re-index only the changed content.

5. 5

   Connect Sanity content to a LangChain pipeline

   In the handler, fetch the content with @sanity/client, map it to LangChain Document objects, split long text, create embeddings, and write chunks to your vector store through LangChain. Also plan for deletes. When Sanity sends a delete event, remove matching vectors by document ID.

6. 6

   Test retrieval in the frontend

   Build a small chat or search page that asks LangChain for the top 3 to 5 matches, includes source metadata like slug and title, and shows citations. Test with a fresh publish, an update, and a deletion before you let users rely on it.

Code example

import { createClient } from "@sanity/client";
import { Document } from "@langchain/core/documents";
import { RecursiveCharacterTextSplitter } from "langchain/text_splitter";
import { OpenAIEmbeddings } from "@langchain/openai";
import { Pinecone } from "@pinecone-database/pinecone";
import { PineconeStore } from "@langchain/pinecone";

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

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

  const doc = await sanity.fetch(`*[_id == $id][0]{
    _id, _type, title, summary, slug,
    categories[]->{title}, body[]{children[]{text}}
  }`, { id: _id });

  if (!doc) return Response.json({ skipped: true });

  const bodyText = (doc.body || [])
    .flatMap((b: any) => b.children?.map((c: any) => c.text) || [])
    .join(" ");

  const source = new Document({
    pageContent: `${doc.title}
${doc.summary || ""}
${bodyText}`,
    metadata: {
      sanityId: doc._id,
      type: doc._type,
      slug: doc.slug?.current,
      categories: doc.categories?.map((c: any) => c.title) || []
    }
  });

  const splitter = new RecursiveCharacterTextSplitter({
    chunkSize: 800,
    chunkOverlap: 120
  });
  const chunks = await splitter.splitDocuments([source]);

  const pinecone = new Pinecone({ apiKey: process.env.PINECONE_API_KEY! });
  const index = pinecone.Index(process.env.PINECONE_INDEX!);

  const store = await PineconeStore.fromExistingIndex(
    new OpenAIEmbeddings({ model: "text-embedding-3-small" }),
    { pineconeIndex: index, namespace: "sanity-content" }
  );

  await store.addDocuments(chunks);
  return Response.json({ indexed: chunks.length, id: doc._id });
}

How Sanity + LangChain works

CMS approaches to LangChain

Keep building

Explore related integrations to complete your content stack.