Playground

Generic Playground

Generic Fetch + 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 Generic.

Open docs

Define a custom provider for any CMS or asset origin. Route both API requests and assets through one tenant domain.

Custom apiHosts and assetHostsWorks with any HTTPS originAPI + asset proxy combinedFull createGenericProvider control

Integration facts (verified against the SDK)

SDK module
@cachely-io/sdk (generic recipe)
Built-in provider id
No — must use createGenericProvider (provider: 'generic' would throw)
Real SDK exports used
createGenericProvidercreateCachelyFetch
CLI setup
Writes a generic createGenericProvider recipe with placeholder hosts.

Recommended: createGenericProvider + createCachelyFetch for any HTTPS origin

✓ Supported ◐ Partial — Not applicable
Generic Fetch + 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

    Not applicable
    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 Generic

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

CLI setup

Recommended

npx @cachely-io/sdk setup auto-detects your framework and writes a generic createGenericProvider recipe you can adjust.

Code changes
None by hand — the CLI generates them.
Cachely handles
Framework + CMS detection, a generic createGenericProvider recipe, env + proxy config.
Terminal
npx @cachely-io/sdk setup

Generic provider recipe

Recommended

Define any CMS or asset origin with createGenericProvider and route both API and assets through one tenant domain.

Code changes
Wrap your fetch with createCachelyFetch + createGenericProvider.
Cachely handles
API + asset proxying, edge caching, AI transforms.

Limitations: 'generic' is not a built-in provider id — pass a createGenericProvider definition, not a string (a bare string would throw "Unknown provider").

TypeScript
import { createGenericProvider, createCachelyFetch } from '@cachely-io/sdk'

// Only 'prismic' and 'contentful' are built-in ids — describe anything
// else with createGenericProvider.
const provider = createGenericProvider({
  id: 'generic',
  apiHosts: ['api.example.com'],
  assetHosts: ['cdn.example.com'],
})

const cachelyFetch = createCachelyFetch({
  tenant: 'my-project',
  provider,
})

// API + asset URLs are rewritten to the proxy domain.
const res = await cachelyFetch('https://api.example.com/content')
Mode:Standard proxied request with edge cache

Request controls

Preset:

Original

https://picsum.photos/v2/list?page=1&limit=8

Proxied (preview)

https://generic.cachely.io/~api/v2/list?page=1&limit=8

Sends this request through generic.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.

Integration: Uses createGenericProvider + createCachelyFetch from @cachely-io/sdk.

SDK Referenceupdates as you change modes
generic + @cachely-io/sdk
import { createGenericProvider, createCachelyFetch } from '@cachely-io/sdk'

// Only 'prismic' and 'contentful' are built-in ids — describe anything
// else with createGenericProvider.
const provider = createGenericProvider({
  id: 'generic',
  apiHosts: ['api.example.com'],
  assetHosts: ['cdn.example.com'],
})

const cachelyFetch = createCachelyFetch({
  tenant: 'my-project',
  provider,
})

// API + asset URLs are rewritten to the proxy domain.
const res = await cachelyFetch('https://api.example.com/content')
Generic — Generic provider — define your own apiHosts and assetHosts with createGenericProvider. The example uses Picsum Photos as a public API stand-in.

SDK snippets

Generic code examples

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

Define any CMS or asset origin and route it through the proxy.

createGenericProvider + createCachelyFetch
import { createGenericProvider, createCachelyFetch } from '@cachely-io/sdk'

// Only 'prismic' and 'contentful' are built-in ids — describe anything
// else with createGenericProvider.
const provider = createGenericProvider({
  id: 'generic',
  apiHosts: ['api.example.com'],
  assetHosts: ['cdn.example.com'],
})

const cachelyFetch = createCachelyFetch({
  tenant: 'my-project',
  provider,
})

// API + asset URLs are rewritten to the proxy domain.
const res = await cachelyFetch('https://api.example.com/content')