Playground

Prismic Playground

Native SDK + API Proxy

Run real requests through the Cachely edge proxy and see how server-side token injection, edge caching, asset URL rewriting, preview bypass, and AI transforms work for Prismic.

Open docs

Full API proxy demo — fetch Prismic content through your tenant domain with server-side token injection and automatic asset URL rewriting.

API requests proxied through /~apiAsset URLs rewritten in JSON responseServer-side token injectionEdge-cached API responses

Integration facts (verified against the SDK)

SDK module
@cachely-io/sdk/prismic
Built-in provider id
Yes — provider: 'prismic' is registered
Real SDK exports used
createCachelyPrismicClientcreateCachelyFetch
CLI setup
Wires the native Prismic integration (composable + client).

Recommended: createCachelyFetch with @prismicio/client (minimal), or createCachelyPrismicClient (fresh)

✓ Supported ◐ Partial — Not applicable
Native SDK + API Proxy
  • ✓

    API proxy

    Supported
    What it does
    Routes CMS API calls through the Cachely edge.
    Use it for
    Hiding tokens, caching CMS responses, using one tenant domain.
    Benefit
    Faster repeated reads, safer public apps, unified delivery.
  • ✓

    Server-side token injection

    Supported
    What it does
    Keeps CMS credentials on the edge/server side.
    Use it for
    APIs that normally require private tokens.
    Benefit
    The token never ships to the browser.
  • ✓

    Edge cache

    Supported
    What it does
    Caches CMS/API responses at the edge.
    Use it for
    Repeated content reads and high-traffic pages.
    Benefit
    Lower origin/CMS usage, faster responses, better resilience.
  • ✓

    Asset URL rewriting

    Supported
    What it does
    Rewrites CMS asset URLs inside JSON responses to your tenant domain.
    Use it for
    Serving images/assets from the same delivery layer.
    Benefit
    Fewer third-party domains, edge delivery, simpler security policy.
  • ✓

    Preview / bypass mode

    Supported
    What it does
    Skips the cache for fresh CMS/editor preview content.
    Use it for
    Preview flows, draft content, editor QA.
    Benefit
    Editors see fresh content without disabling production cache.
  • ✓

    AI transforms

    Supported
    What it does
    Applies a named AI transform profile to eligible JSON/text responses.
    Use it for
    Localization, summaries, formatting, content adaptation.
    Benefit
    Transform responses without changing the CMS or app code.
  • ✓

    Native SDK integration

    Supported
    What it does
    Wraps the provider SDK and automatically proxies its requests.
    Use it for
    Nuxt/Next apps that already use the CMS SDK.
    Benefit
    Minimal code changes, safer defaults.

Integration

Ways to connect Prismic

The recommended paths for Prismic are shown first. Less common options are tucked under “Other options”.

CLI setup

Recommended

Recommended for Nuxt/Next — npx @cachely-io/sdk setup auto-detects your framework and wires the native Prismic integration.

Code changes
None by hand — the CLI generates them.
Cachely handles
Framework + CMS detection, native client/composable wiring, env + proxy config.
Terminal
npx @cachely-io/sdk setup

Prismic client + Cachely fetch

Recommended

Smallest change when you already use @prismicio/client — keep createClient and provide createCachelyFetch.

Code changes
Pass fetch: createCachelyFetch(...) to your existing client.
Cachely handles
Proxying, server-side token injection, asset rewriting, AI transforms.
TypeScript
import { createClient } from "@prismicio/client"
import { repositoryName } from "~~/slicemachine.config.json"
import { createCachelyFetch } from "@cachely-io/sdk"

/**
 * Prismic client routed through the Cachely proxy.
 *
 * No `cachelyEndpoint` is passed: with `customDomain` omitted the SDK derives
 * `https://{tenant}.cachely.io/~api/...` from the tenant slug.
 * This works in SSR, Nitro server routes, and browser code without depending
 * on `process.env` or Nuxt runtime context.
 */
export default createClient(repositoryName, {
  fetch: createCachelyFetch({
    tenant: "elite-media",
    provider: "prismic"
  })
})

Cachely Prismic client

Recommended

Starting fresh, or you want one Cachely-owned client helper to import across the app.

Code changes
Replace createClient with createCachelyPrismicClient.
Cachely handles
The same edge behavior, wrapped in a dedicated client.
TypeScript
import { createCachelyPrismicClient } from "@cachely-io/sdk/prismic"
import { repositoryName } from "~~/slicemachine.config.json"

export const cachelyPrismicClient = createCachelyPrismicClient({
  repositoryName,
  tenant: "balkan-love",
  customDomain: true
})

export default cachelyPrismicClient
  • createCachelyFetch is best for a minimal migration from an existing Prismic client; createCachelyPrismicClient is best when starting fresh or when you want one Cachely-owned client helper.
  • customDomain: true routes requests through your configured custom domain. Omit it (or set false) and the SDK derives the default https://{tenant}.cachely.io/~api/… endpoint from the tenant slug.
Mode:Standard proxied request with edge cache

Prismic flow step

Server fetches /api/v2 for the master ref, then /documents/search?ref=… for content. AI transforms apply to the search response.

Original

https://cachely-io.cdn.prismic.io/api/v2/documents/search?ref=...

Proxied (preview)

https://prismic.cachely.io/~api/api/v2/documents/search?ref=...

Sends this request through prismic.cachely.io. Cachely injects the token server-side, rewrites eligible asset URLs, and returns cache debug headers.

Fetch modes

Direct

Standard proxied request. Best for production traffic — the edge cache serves repeat reads.

Bypass Cache

Adds ?preview=1 so the proxy returns fresh content. Use for CMS preview/editor flows.

AI Transform

Applies a named profile to eligible JSON/text content. Transformed responses are cached separately. Skipped for metadata endpoints. For Prismic this means /documents/search, not the /api/v2 metadata endpoint.

Integration: Uses @cachely-io/sdk/prismic. Requests are two-step: the SDK first fetches /api/v2 metadata to discover the master ref, then calls /documents/search for content. AI transforms only apply to the /documents/search response.

SDK Referenceupdates as you change modes
prismic + @cachely-io/sdk/prismic
import { createCachelyPrismicClient } from '@cachely-io/sdk/prismic'

const client = createCachelyPrismicClient({
  repositoryName: 'my-repo',
  tenant: 'my-project',
})

// All API requests are proxied — asset URLs rewritten automatically.
const page    = await client.getSingle('home')
const entries = await client.getAllByType('article')
Prismic — Prismic requests are two-step: the SDK first fetches /api/v2 metadata to discover the master ref, then calls /documents/search for content. AI transforms only apply to the /documents/search response.

SDK snippets

Prismic code examples

Copy-paste examples for Prismic. Pick a variant below.

Minimal change to an existing @prismicio/client setup — keep createClient, swap in createCachelyFetch.

createCachelyFetch
import { createClient } from "@prismicio/client"
import { repositoryName } from "~~/slicemachine.config.json"
import { createCachelyFetch } from "@cachely-io/sdk"

/**
 * Prismic client routed through the Cachely proxy.
 *
 * No `cachelyEndpoint` is passed: with `customDomain` omitted the SDK derives
 * `https://{tenant}.cachely.io/~api/...` from the tenant slug.
 * This works in SSR, Nitro server routes, and browser code without depending
 * on `process.env` or Nuxt runtime context.
 */
export default createClient(repositoryName, {
  fetch: createCachelyFetch({
    tenant: "elite-media",
    provider: "prismic"
  })
})