Serve agent markdown in front of a SPA

Agents fetch your pages the way curl does: one GET, no JavaScript. A client-rendered single-page app answers that request with an empty shell — a root <div> and a script tag — so every agent that lands on your site reads nothing. Agentify solves half of this on its own: when it converts a JavaScript-rendered page, it renders the page in a headless browser first, so the conversion carries your real content. The other half is serving that markdown from your domain. A SPA on a CDN — Cloudflare Pages, Vercel, Netlify, S3 behind CloudFront — has no server to mount the SDK middleware in. The fix is an edge function in front of the SPA that implements the same contract: detect agent traffic, serve Agentify markdown, and fall through to the app on everything else, including any Agentify failure. The snippets below are that function for the three common hosts.

You need an API key with the agentify:convert scope, minted in the dashboard under Settings → API keys (the Agentify group’s Convert toggle). Add it to your host as the secret ZEROCLICK_AGENTIFY_KEY. The edge function needs no signing secret — it verifies nothing, so the standalone SDK helpers are all it uses.

Deploy the edge function

Each snippet uses withAgentify from @zeroclickai/sellers — the SDK is web-native, so it runs unchanged in edge runtimes — with a one-line client that supplies the key. withAgentify handles the whole contract: GET-only, detection over Accept and User-Agent, forwarded cache headers plus Vary, and fall-through to your app on any failure.

// functions/_middleware.ts — runs in front of every Pages asset.
// Set ZEROCLICK_AGENTIFY_KEY as a production secret on the project.
import { fetchAgentifyMarkdown, withAgentify } from "@zeroclickai/sellers";

interface Env {
  ZEROCLICK_AGENTIFY_KEY: string;
}

export const onRequest: PagesFunction<Env> = (context) =>
  withAgentify(
    {
      fetchAgentifyMarkdown: (url) =>
        fetchAgentifyMarkdown(
          // Multi-seller organizations add: seller: "sel_…"
          { url },
          { apiKey: context.env.ZEROCLICK_AGENTIFY_KEY },
        ),
    },
    () => context.next(),
  )(context.request);

// middleware.ts at the project root. Set ZEROCLICK_AGENTIFY_KEY in the
// project's environment variables. In a Next.js app, return
// NextResponse.next() instead of @vercel/edge's next().
import { next } from "@vercel/edge";
import { fetchAgentifyMarkdown, withAgentify } from "@zeroclickai/sellers";

export default function middleware(request: Request): Promise<Response> {
  return withAgentify(
    {
      fetchAgentifyMarkdown: (url) =>
        fetchAgentifyMarkdown(
          // Multi-seller organizations add: seller: "sel_…"
          { url },
          { apiKey: process.env.ZEROCLICK_AGENTIFY_KEY! },
        ),
    },
    () => next(),
  )(request);
}

// netlify/edge-functions/agentify.ts. Set ZEROCLICK_AGENTIFY_KEY as an
// environment variable on the site.
import type { Context } from "@netlify/edge-functions";
import { fetchAgentifyMarkdown, withAgentify } from "@zeroclickai/sellers";

export default (request: Request, context: Context): Promise<Response> =>
  withAgentify(
    {
      fetchAgentifyMarkdown: (url) =>
        fetchAgentifyMarkdown(
          // Multi-seller organizations add: seller: "sel_…"
          { url },
          { apiKey: Netlify.env.get("ZEROCLICK_AGENTIFY_KEY")! },
        ),
    },
    () => context.next(),
  )(request);

export const config = { path: "/*" };

On another host, port the same shape to its edge runtime, or put a small server in front of the CDN and mount the SDK middleware there — the contract is identical. Detection only fires for markdown-preferring or AI-agent requests, so browsers, asset fetches, and search crawlers never touch the Agentify path; if your host supports path matchers, you can still scope the function to page routes and skip asset paths entirely.

Verify

# An agent's request gets markdown with your storefront inlined:
curl -s -H "Accept: text/markdown, text/html, */*" https://www.acme.com/ | head -20

# A browser Accept header gets the SPA shell, unchanged:
curl -s -H "Accept: text/html,application/xhtml+xml" https://www.acme.com/ | head -5

The first request of each page takes a few seconds while the conversion runs; repeats serve from cache. Remove the key from the environment and the markdown request serves the shell instead — that is the fail-open path working, not a deployment error.

If conversion answers `422 content_too_thin`

The error means the page yielded too little readable content even after rendering: the content appears only after user interaction, sits behind a bot wall, or never reaches the DOM at all. Two fixes, in order of preference:

Prerender or server-render your marketing pages. Most SPA frameworks can emit static HTML for public pages at build time. That helps every raw-text reader, not just Agentify.
Serve the content in the initial HTML. Agentify converts what a fetch (or a headless render of it) can see; content that only exists after a click cannot be converted.

Your billed API needs none of this — agents transact with it through your storefront, which is machine-readable by construction.

Get started

Concepts

Integrate your API

Your agent storefront

Agentify

Resources

Serve agent markdown in front of a SPA

Deploy the edge function

Verify

If conversion answers `422 content_too_thin`

Next steps

SDK middleware

REST quickstart

​Deploy the edge function

​Verify

​If conversion answers 422 content_too_thin

​Next steps

SDK middleware

REST quickstart

Deploy the edge function

Verify

If conversion answers `422 content_too_thin`

Next steps