Install the Delivery SDK

The Delivery SDK reads published content from Contentstack’s CDN. Studio doesn’t fetch content itself. It asks the Delivery SDK to do it. So this is the first install.

Do It With a Skill

install-studio installs this SDK, and it does not stop here: the same pass installs Live Preview and the Studio SDK, validates your credentials before writing anything, and wires the initializer.

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

There is no Delivery-SDK-only skill, because Studio needs all three packages. Follow the steps below if you are adding just this one to an app that already reads from Contentstack.

Install

npm install @contentstack/delivery-sdk
# or
yarn add @contentstack/delivery-sdk
# or
pnpm add @contentstack/delivery-sdk

Initialize

Create src/lib/contentstack.ts:

import Contentstack from "@contentstack/delivery-sdk";

export const stack = Contentstack.stack({
  apiKey:        process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY!,
  deliveryToken: process.env.NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN!,
  environment:   process.env.NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT!,
  region:        "us",
});

Env-var prefix depends on your framework:

Sample .env.local

NEXT_PUBLIC_CONTENTSTACK_API_KEY=blt7f2b3951e45bd591
NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=cs35707f72b9bd05b166345680
NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN=cs8082278c5fa3f3cdc063049a
NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=test
NEXT_PUBLIC_CONTENTSTACK_DEFAULT_LOCALE=en-us

Make sure .env.local is in .gitignore.

Verify the Connection

import { stack } from "@/lib/contentstack";

const { entries } = await stack
  .contentType("blog_post")
  .entry()
  .find();

console.log(entries);

If you get an array back (even empty), the SDK is wired correctly. If you get a 401, verify your credentials: in Contentstack, open your stack, go to Settings, then Tokens, click the Delivery Token edit drawer, and copy the Stack API Key and Delivery Token from there. Make sure you are using the Delivery Token, not the Management Token.

Security note: Environment variable prefixes like NEXT_PUBLIC_, VITE_, and REACT_APP_ expose values to the client-side bundle. Only use these prefixes for your Stack API Key and Delivery Token, both of which are safe to expose. Never use these prefixes for Management Tokens or other secret credentials, which must stay server-side only.

Non-US Regions

Use this section if your Contentstack stack is hosted in a region other than US.

Contentstack.stack({
  apiKey: …, deliveryToken: …, environment: …,
  region: "eu",                              // or "au", "azure-na", "azure-eu", "gcp-na", "gcp-eu"
  host: "eu-cdn.contentstack.com",
});

Next

Install Live Preview