Tutorials

Headless CMS for Lovable and Bolt.new After Remote MCP: A Practical Next.js 16 Pattern

Jay Callicott··9 min read

If you are evaluating a headless CMS for Lovable or a bolt.new CMS in 2026, the architecture question changed again.

On February 26, 2026, Bolt introduced Connectors, letting projects use remote MCP servers directly. Lovable's current integrations docs now position personal connectors as a standard part of the workflow, and on March 16, 2026, Lovable added a Sanity personal connector to its changelog. On March 9, 2026, the MCP roadmap made it explicit that the protocol is moving toward transport scalability, governance, and enterprise readiness. In parallel, Next.js 16 shifted caching toward a more explicit model with Cache Components, cacheLife, and revalidateTag.

That combination is useful, but it creates a new mistake:

Teams let the AI builder read CMS context during development, then assume the shipped app is now "using a CMS."

Usually it is not.

If the published app is still rendering hardcoded content, exporting static JSON, or depending on one-time code generation from a connector session, you do not have a real headless CMS for AI apps. You have a builder that briefly looked at your content model.

What remote MCP actually improved

MCP is now much better for build-time context than it was a year ago.

With Lovable and Bolt, a remote MCP server can help the agent:

  • Read your CMS schema or sample content
  • Understand naming conventions and field structures
  • Scaffold components that match your content model
  • Generate admin helpers, migrations, or seed scripts
  • Pull design or product context from tools like Notion, Linear, or Miro

That is real progress. It removes a lot of prompt friction.

But this is still mostly a builder-time benefit, not a runtime content architecture.

Your marketers still need drafts, previews, scheduled publishing, reusable page sections, media handling, and a stable API that the live app can query long after the AI chat session is over.

The production gap: context is not delivery

This is the key distinction developers and marketers keep running into:

  • MCP connector: gives the agent access to tools and context while building
  • Headless CMS runtime: delivers published and draft content to the live app through APIs

Those are complementary layers, not competing ones.

If you skip the runtime CMS layer, you usually hit the same problems within a few weeks:

  • Marketing changes require a redeploy
  • Preview is missing or fake
  • Draft and published states are mixed together
  • Content gets copied into code instead of reused across pages
  • Next.js caches stale content because no revalidation flow exists
  • Non-developers can edit source content, but the app never fetches it at request time

This is why searches like lovable backend, bolt.new cms, and mcp cms are really asking two different questions:

  1. How does the builder understand my system while I am creating the app?
  2. Where does the live app get its content after launch?

Remote MCP helps with the first. A headless CMS solves the second.

The pattern that holds up in production

For content-heavy Lovable or Bolt projects, the reliable pattern now looks like this:

Lovable / Bolt.new
  -> uses remote MCP for schema and workflow context during build

Next.js 16 frontend
  -> fetches published or preview content from the CMS at runtime
  -> caches intentionally with Cache Components
  -> revalidates on publish via webhook

Headless CMS
  -> owns content types, drafts, publishing workflow, media, API, and editor UI

That separation keeps each tool doing the job it is actually good at.

The builder generates UI and application code. The CMS owns editorial state. Next.js handles delivery and caching. When those concerns are cleanly separated, you stop rebuilding content operations from scratch inside prompts.

A concrete Next.js 16 implementation

If you are using Next.js 16, the important shift is that caching is more explicit. That is good news for a headless CMS for Lovable setup, because you can now make content freshness a deliberate part of the architecture.

Here is a simple pattern:

// app/lib/cms.ts
import { cacheTag, cacheLife } from 'next/cache'

export async function getLandingPage(slug: string, preview = false) {
  'use cache'

  cacheTag(`page:${slug}`)
  cacheLife(preview ? 'minutes' : 'hours')

  const res = await fetch(
    `${process.env.CMS_URL}/api/pages/${slug}?preview=${preview}`,
    {
      headers: {
        Authorization: `Bearer ${process.env.CMS_TOKEN}`,
      },
    }
  )

  if (!res.ok) {
    throw new Error(`CMS request failed: ${res.status}`)
  }

  return res.json()
}

Then your route can fetch content from the CMS instead of from generated constants:

// app/[slug]/page.tsx
import { draftMode } from 'next/headers'
import { getLandingPage } from '@/app/lib/cms'

export default async function LandingPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const { isEnabled } = await draftMode()
  const page = await getLandingPage(slug, isEnabled)

  return <PageRenderer page={page} />
}

And when content is published, your CMS should trigger revalidation:

// app/api/revalidate/route.ts
import { revalidateTag } from 'next/cache'

export async function POST(req: Request) {
  const body = await req.json()
  revalidateTag(`page:${body.slug}`, 'max')

  return Response.json({ revalidated: true })
}

That is the operational difference between "the agent saw my CMS once" and "my app is actually backed by a CMS."

What marketers care about that builders still do not own

This is where teams often underestimate the problem.

An AI builder can generate a good landing page quickly. It does not automatically give a marketing team a sane operating model for the next six months.

A real visual editor headless CMS still matters when you need:

  • Reusable hero, testimonial, pricing, FAQ, and CTA sections
  • Draft and preview workflows before publishing
  • Structured SEO fields, redirects, and metadata management
  • Role-based editing for marketers, developers, and clients
  • API delivery to more than one frontend
  • Content updates that do not require an engineer in the loop

This is also where platforms like Decoupled.io fit naturally. The useful value is not "AI plus CMS" as a slogan. It is having a managed Drupal backend with structured content, visual editing, GraphQL and JSON:API delivery, and MCP-aware workflows in the same system. If you need the CMS to support both developers and marketers, that combination is much more practical than trying to stretch connectors into a publishing platform.

If you want the product details behind that stack, the docs on MCP tools, GraphQL delivery, and the visual editor are the right starting points.

When a connector-only setup is enough

To be fair, not every project needs a full CMS runtime on day one.

A connector-only workflow can be enough if:

  • The app is an internal tool
  • Content changes rarely
  • Only developers update copy
  • There is no draft or approval workflow
  • SEO landing pages are not part of the product
  • Reusing content across channels does not matter yet

That can be a valid early-stage decision.

But once the app has a blog, help center, campaign pages, localized copy, reusable sections, or weekly content changes from non-developers, the architecture usually tips hard toward a proper headless CMS.

The practical rule

Here is the simplest way to think about it:

Use remote MCP so Lovable or Bolt can understand your systems while building.

Use a headless CMS so your live app has a durable source of truth for content after launch.

If you collapse those into one layer, you usually end up with an app that demos well and ages badly.

Get Started

If you are building with Lovable, Bolt.new, or another AI app builder and need the content layer to survive past the first prompt session, start with the Decoupled.io docs:

That is the faster path to a real headless CMS for AI-built apps: builder context where MCP helps, and a runtime CMS where publishing, preview, and APIs actually belong.