The way developers build websites is changing fast. Instead of writing every line of code by hand, AI coding assistants like Cursor, Claude, ChatGPT, and Gemini can now generate entire components, write API integrations, and scaffold full applications in seconds.

This guide shows you how to combine Contentstack's powerful Headless CMS with an AI coding assistant to build a content-driven website from scratch, even if you're completely new to Contentstack.

• Developers who are new to Contentstack and want to use AI to accelerate setup
• Teams already using Contentstack who want to adopt AI-first workflows
• Anyone who uses Cursor, Claude, ChatGPT, Gemini, or GitHub Copilot for coding

By the end of this guide, you will have a working website connected to Contentstack. Content is managed in the CMS, and the front-end fetches and displays it automatically. Adding new pages, blog posts, or products in Contentstack will appear on the site without code changes.

• A Contentstack account: free trial at contentstack.com/try-for-free
• An AI coding tool: Cursor (recommended), VS Code with GitHub Copilot, or access to Claude or ChatGPT in the browser
• Node.js (v18+) installed on your machine
• Basic familiarity with HTML, JavaScript, and the terminal

This section covers the core concepts and terminology used throughout the guide. Using the correct terms in your AI prompts produces more accurate code.

Contentstack is a Headless CMS, a Content Management System that stores and delivers your content but has no built-in front-end. Unlike WordPress, which couples your content and your website theme together, Contentstack exposes all your content through APIs. Your front-end, built in any framework you like, such as Next.js, React, Vue, or plain HTML, calls those APIs to fetch and display content.

Tip Contentstack stores content as structured data and delivers it via API. The front-end is a separate layer that reads from that API and renders the content.

The following terms are used throughout this guide and in AI prompts.

Stack

A Stack is your project's container. Everything, including content types, entries, assets, and environments, lives inside a Stack. When you create a new project in Contentstack, you create a new Stack.

Content Types

A Content Type is a template that defines the structure of a piece of content. For example, a Blog Post content type might have fields for Title (text), Slug (text), Body (rich text), Cover Image (file), Author (reference), and Published Date (date). You design your Content Types in the Contentstack dashboard. Once defined, every blog post entry must follow that structure.

Entries

An Entry is a single piece of content based on a Content Type. If Blog Post is your content type, then each article you write is an Entry. Entries are created, edited, and published in the Contentstack dashboard.

Assets

Assets are files, such as images, PDFs, and videos, that you upload to Contentstack. They are stored on Contentstack's CDN and delivered via URL. You reference them in entries.

Environments

Environments represent deployment targets, typically development, staging, and production. When you publish an entry, you choose which environment(s) it goes live on. Your front-end fetches content from a specific environment.

APIs and Tokens

Contentstack has two main APIs: the Content Delivery API (CDA), which is read-only and used by your website front-end to fetch published content, and the Content Management API (CMA), which is read/write and used to create or update content programmatically. You authenticate with an Api Key and Delivery Tokens for the CDA, or Management Tokens for the CMA.

Here is the overall flow of a Contentstack-powered website:

1. You define Content Types in Contentstack, for example, Page, Blog Post, and Product.
2. Content editors create Entries for each content type and publish them to an Environment.
3. Your front-end website makes an API call to Contentstack's Content Delivery API.
4. Contentstack returns the published entries as JSON.
5. Your front-end renders the JSON data as HTML pages.

Tip When prompting an AI assistant, describe this flow. For example: 'I have content stored in Contentstack. I need you to write a Next.js page that fetches entries from a content type called Blog Post using the Content Delivery API.'

Complete the following setup steps in the Contentstack dashboard before writing any front-end code.

Log in to your Contentstack account or go to contentstack.com and sign up for a free account. Then perform the following steps:

1. Navigate to the organization where you want to create a stack.
2. Click + New Stack in the top right corner and select Create New.
3. In the Create New Stack modal, enter the following details:
   1. Name (required): Enter the name of your stack, for example, My Company Website.
   2. Description (optional): Provide a relevant description.
   3. Set Master Language (required): Select the primary language, for example, English - United States.
   4. Stack Color (optional): Choose a color to visually identify your stack.
4. Click Create.

Plan your content types before creating them. The following table shows a typical content model for a business website.

To create a content type in Contentstack, refer to the Create a Content Type documentation and perform the following steps:

1. Click the Content Models icon on the navigation panel.
2. Click + New Content Type and, from the dropdown, select Create New.
3. In the Create New Content Type form, perform the following steps:
   1. Name: Enter the name for the content type, for example, Blog Post. The Unique ID is auto-generated.
   2. Description: This is an optional step.
   3. Type: Select Single for creating a single page, or Multiple for creating multiple pages of the same structure.
4. Click Save and proceed.
5. In the Content Type Builder, click the + Insert a field icon to add fields. Available field types include Single Line Textbox, Multi Line Textbox, Rich Text Editor, File (for images), Date, Number, Boolean, and Reference (to link to another content type).
6. Configure each field's properties, such as required, unique, and validation rules.
7. Click Save or Save and Close when done.

Note Save your content type UIDs and field UIDs in a reference file. Including them in every prompt reduces errors in the generated code.

An Environment tells Contentstack where your published content will be available. Refer to the Add an Environment documentation for full details. To add an environment, perform the following steps:

1. Click the Settings icon in the navigation panel, or press S.
2. Navigate to Environments, or press Alt+E on Windows or Option+E on Mac.
3. Click + New Environment.
4. In the Create Environment modal, enter the following details:
   1. Name: Enter a name for the environment, for example, development.
   2. Environment Label Color: Select a color to represent the environment.
   3. Base URL: Enter the base URL, for example, http://localhost:3000.
   4. Language: Select the default language, for example, English - United States.
5. Click Create.

Your front-end website needs these tokens to fetch content from Contentstack. Refer to the Create a Delivery Token documentation for complete steps.

Find Your Stack Api Key

1. Click the Settings icon in the top navigation panel, or press S.
2. In the General section, scroll to API Credentials.
3. Copy your Api Key. It looks like: blt1a2b3c4d5e6f7890.

Note Only Developers, Admins, and Stack Owners can view the Api Key.

Create a Delivery Token

Refer to the About Delivery Tokens documentation for more information. To create a Delivery Token, perform the following steps:

1. Click the Settings icon in the navigation panel, or press S.
2. Click Tokens in the settings panel.
3. Click + Delivery Token to create a new token.
4. Enter a Name (required) and a Description (optional) for the Delivery Token.
5. In the Scope section, choose the Branches or Aliases you want to associate with this token.
6. Select the Publishing Environments for which you want to generate the Delivery Token, for example, development.
7. (Optional) Enable the Create Preview Token toggle to also generate a Preview Token.
8. Click Generate Token.

A new token appears in both the Delivery Token and Preview Token fields. Copy the token value using the Click to copy icon. The token looks like: cs5a6b7c8d9e0f.

Warning Never commit your Api Key or Delivery Token to a public GitHub repository. Always store them in environment variables in a .env file. LLMs can identify these variables and use them.

Before you write any code, create a couple of test entries so you have real data to work with. Refer to the Create an Entry documentation for full details. To create sample entries, perform the following steps:

1. Click the Entries icon in the navigation panel, or press E.
2. Click + New Entry and select your content type, for example, Blog Post.
3. Fill in the fields: give the post a title, write some body text, and upload an image.
4. Click Save, then Publish. In the Publish modal, select your environment, for example, development, and click Publish.
5. Repeat for two or three more entries.

The entries are now live and published. Proceed to Part 3 to build the front-end.

The following steps use an AI coding assistant to generate the front-end code. Provide accurate context in your prompts to get usable output.

Tip Use Cursor as your main code editor for this guide. It has the best AI integration and can read your project files for context.

This guide uses Next.js as the front-end framework. Run the following commands in your terminal:

npx create-next-app@latest my-contentstack-site
cd my-contentstack-site

Accept the default options when prompted. Then install the Contentstack JavaScript SDK.

npm install contentstack

Create a .env.local file in the root of your project and add your credentials:

CONTENTSTACK_API_KEY=blt1a2b3c4d5e6f7890
CONTENTSTACK_DELIVERY_TOKEN=cs5a6b7c8d9e0f
CONTENTSTACK_ENVIRONMENT=development

Use the following template as a starting point. Replace the field names and UIDs with your actual content type values.

I am building a website with Next.js and Contentstack Headless CMS. Contentstack uses a Content Delivery API at https://cdn.contentstack.io/v3/. My stack API key is stored in process.env.CONTENTSTACK_API_KEY. My Delivery Token is in process.env.CONTENTSTACK_DELIVERY_TOKEN. My environment is stored in process.env.CONTENTSTACK_ENVIRONMENT.
I have a content type with UID 'landing_page' that has these fields: page_title (text), slug (text), main_content (rich text), hero_image (file), service_price (number), and launch_date (date).
Write a Next.js page at /services/[slug] that fetches a single landing page entry by its slug using the Content Delivery API.

Expected Output: Provide the solution as a Next.js React component using Server-Side Rendering (getServerSideProps). The output should include the data fetching logic and a clean JSX structure that maps the API response to the UI elements (Title, Hero, Body, Price, and Date).

Prompt Requirements

• Tech stack: state the framework and version, for example, 'Next.js 14 with the App Router.'
• Content type UID: use the exact UID from the dashboard, for example, blog_post, not BlogPost or blog-post
• Field UIDs: list the fields the AI needs to fetch and display
• Environment variables: specify the variable names where credentials are stored
• Expected output: describe the format, for example, 'a React component', 'an HTML page', or 'a JSON response.'

Use the following prompt to generate a reusable SDK configuration file. Refer to the JavaScript SDK documentation for the full API reference.

Create a file at lib/contentstack.js that initializes the Contentstack JavaScript SDK.
<ol>
  <li>Use the following environment variables: <span class="code">CONTENTSTACK_API_KEY</span>, <span class="code">CONTENTSTACK_DELIVERY_TOKEN</span>, and <span class="code">CONTENTSTACK_ENVIRONMENT</span> (which is set to 'staging').</li>
  <li>Export a helper function called <span class="code">getLandingPage(slug)</span> that fetches a specific entry from the <strong>'landing_page'</strong> content type where the slug matches.</li>
  <li>Ensure the function returns the entry data, including the <strong>page_title</strong>, <strong>hero_image</strong>, and <strong>main_content</strong> fields.</li>
</ol>

The expected output is:

// lib/contentstack.js
import Contentstack from 'contentstack';

const Stack = Contentstack.Stack({
  api_key: process.env.CONTENTSTACK_API_KEY,
  delivery_token: process.env.CONTENTSTACK_DELIVERY_TOKEN,
  environment: process.env.CONTENTSTACK_ENVIRONMENT,
});

export async function getEntries(contentTypeUid) {
  const query = Stack.ContentType(contentTypeUid).Query();
  const result = await query.find();
  return result[0];
}

export default Stack;

Use the following prompts to generate each page type.

Landing Page

Using the getEntries helper from lib/contentstack.js, create a Next.js page at app/services/page.jsx that fetches all entries from the 'landing_page' content type.

1. Display them as a responsive grid of cards.
2. Each card should show the hero_image, page_title, and the service_price (formatted with a dollar sign).
3. Include a "View Details" link that points to /services/[slug].
4. Ensure the launch_date is formatted nicely (e.g., "Jan 2026").

Expected Output: Provide the solution as a Next.js Server Component (App Router). The output should include a clean Tailwind CSS or CSS Module styled grid that maps through the entries array.

Blog Post Detail Page

I am building a website with Next.js (App Router) and Contentstack. My stack credentials are in process.env.
Create a Next.js dynamic route at app/blog/[slug]/page.jsx. It should fetch a single 'blog_post' entry where the slug field matches the URL parameter.

  1. Display the blog_post_title field as an h1 (Note: the UID is blog_post_title).
  2. Display the cover_image as a full-width image.
  3. Display the published_date below the title.
  4. Render the body rich text field as HTML.
  5. Use generateStaticParams to pre-generate all blog post pages at build time using your getEntries helper.

Expected Output: Provide a Next.js Server Component that includes both the data fetching logic for a single entry and the generateStaticParams function for static site generation (SSG).

Homepage with Hero Section

I have a Contentstack content type with UID 'homepage' with fields: hero_title (text), hero_subtitle (text), hero_image (file), cta_text (text), and cta_link (text).
Create a Next.js page at app/page.jsx that fetches this single entry and renders a full-width hero section with the hero_image as a background, the hero_title and hero_subtitle overlaid, and a call-to-action button using cta_text and cta_link.

Expected Output: Provide the solution as a Next.js Server Component that fetches the single entry and renders a styled hero section with the background image and centered text overlay.

Contentstack's Rich Text Editor stores content as JSON. Use the following prompt to generate a renderer.

I am building a Next.js website with Contentstack. The content fields from my 'landing_page' and 'blog_post' content types are Rich Text Editor fields stored as JSON.

1. Install and configure @contentstack/utils (the modern replacement for the legacy serializer) to convert this JSON to HTML.
2. Create a React component called RichTextRenderer that accepts a JSON prop.
3. Use the jsonToHtml function from the SDK to convert the JSON and render it as sanitized HTML using dangerouslySetInnerHTML.

Expected Output: Provide a reusable React component in a file named components/RichTextRenderer.jsx. The output should include the necessary imports from the Contentstack Utility SDK and a clean implementation that handles empty or null JSON props gracefully.

Images from Contentstack are returned as objects with a url property. Use the following in your prompt:

The cover_image and hero_image fields from my Contentstack blog_post and landing_page content types return an object with a url property. Use this URL as the src for the Next.js Image component. Contentstack image URLs support query parameters for resizing. Add width=800 to optimize.

Expected Output: Provide a React component or code snippet that demonstrates how to implement the <Image /> component from next/image, ensuring the width, height, and src (with the optimization parameter) are handled correctly.

Run your development server and check your site:

npm run dev

Open http://localhost:3000 in your browser. If the setup is correct, the page displays content fetched from Contentstack.

Tip To debug build errors, paste the error message and the relevant file into your AI tool and ask it to identify the cause.

This section covers prompts and steps for extending your Contentstack and Next.js setup with additional features.

Create the content type in Contentstack before generating the front-end code. To add a new content type, perform the following steps:

1. In Contentstack, create the new content type and note its Unique ID and all field UIDs. Refer to Create a Content Type for details.
2. Open your AI tool and use the following prompt:
   1234567

   I added a new content type to Contentstack with UID 'team_member'. Fields: name (text), role (text), photo (file with url property), bio (multi-line text), and linkedin_url (text).
   Create a Next.js page at app/team/page.jsx that fetches all team members using the getEntries helper from lib/contentstack.js. Display them in a 3-column grid.
   
     1. Use the photo URL as the source for the Next.js Image component (optimized with width=400).
     2. Display the name as a heading and the role as a sub-heading.
     3. Show the bio text below the role.
     4. Add a link or button for the linkedin_url.

3. Review and test the generated code. Paste any errors back into the AI tool with the relevant file for debugging.

Create a search page at app/blog/search/page.jsx that accepts a 'q' query parameter.

1. Use the Contentstack Content Delivery API's query operators (such as .regex) to search the blog_post_title and body fields of the 'blog_post' content type.
2. The search should be case-insensitive.
3. Display matching results as a list of cards showing the blog_post_title, cover_image, and a link to the slug.
4. Use the Stack instance from lib/contentstack.js to perform the fetch.

Expected Output: Provide a Next.js Server Component that extracts the search term from the URL, executes the Contentstack query, and renders the results (or a "No results found" message).

My blog list page fetches all 'blog_post' entries using the getEntries helper.

1. Add pagination to show 9 posts per page.
2. Use Contentstack's .limit() and .skip() query methods in the API call.
3. Display the blog_post_title, cover_image, and slug for each post in a grid.
4. Add Previous and Next buttons at the bottom of the page that update the URL query parameters (e.g., ?page=2).

Expected Output: Provide an updated Next.js Server Component for app/blog/page.jsx that calculates the skip value based on the current page and renders the paginated navigation.

I have a Contentstack content type with UID 'navigation_item' with fields: label (text), link (text), and order (number).
Create a Next.js Root Layout (app/layout.jsx) that:

1. Fetches all navigation items using the Stack instance from lib/contentstack.js.
2. Sorts the items by the order field in ascending order.
3. Renders them as a horizontal navigation bar at the top of every page.
4. Wraps the {children} so the nav appears globally.

Expected Output: Provide the layout.jsx code using a Server Component to fetch the data, with a clean Tailwind-styled <nav> element.

Contentstack Launch is a front-end hosting and deployment platform built for Contentstack-powered websites. It lets you connect your GitHub repository and deploy your front-end instantly. For a step-by-step Next.js walkthrough, refer to the Launch Quick Start Guide with NextJS documentation.

Note Only the Organization Admin or Owner has the right to create projects in Launch.

Launch does not use your local .env.local file during the build, so all environment variables must be set directly in the Launch project’s environment variable settings. If they are missing at build time, Next.js fails during the “Collecting page data” step with a generic “Build failed” error. This commonly happens because the default SDK setup in lib/contentstack.js throws an error as soon as the module loads when credentials are not present.

To prevent this:

• Replace the standard initialization with a lazy getStack() function that returns null when CONTENTSTACK_API_KEY, CONTENTSTACK_DELIVERY_TOKEN, or CONTENTSTACK_ENVIRONMENT are not set.
• Update getEntries() and other data-fetching helpers to check for a null stack and return empty arrays or null, rather than calling the CDA.

This approach prevents build failures in Next.js and ensures the application does not crash when environment variables are not yet configured in Contentstack Launch.

Run the following prompt to let your AI do the above fix:

Update lib/contentstack.js to use a lazy getStack() function. It should return null if CONTENTSTACK_API_KEY, CONTENTSTACK_DELIVERY_TOKEN, or CONTENTSTACK_ENVIRONMENT are not set, instead of throwing on module load. Update getEntries() and any other data-fetching helpers to check for a null stack and return empty arrays or null instead of calling the CDA. This prevents the Next.js build from failing on Contentstack Launch when environment variables have not yet been configured.

The updated file should look like this:

// lib/contentstack.js
import Contentstack from 'contentstack';

function getStack() {
  const { CONTENTSTACK_API_KEY, CONTENTSTACK_DELIVERY_TOKEN, CONTENTSTACK_ENVIRONMENT } = process.env;
  if (!CONTENTSTACK_API_KEY || !CONTENTSTACK_DELIVERY_TOKEN || !CONTENTSTACK_ENVIRONMENT) {
    return null;
  }
  return Contentstack.Stack({
    api_key: CONTENTSTACK_API_KEY,
    delivery_token: CONTENTSTACK_DELIVERY_TOKEN,
    environment: CONTENTSTACK_ENVIRONMENT,
  });
}

export async function getEntries(contentTypeUid) {
  const stack = getStack();
  if (!stack) return [];
  const query = stack.ContentType(contentTypeUid).Query();
  const result = await query.find();
  return result[0];
}

In the Launch project, add the following variables under Environment Variables before deploying. These must be set for both the build and runtime. You can use the Import Variables option to auto-populate them from a linked Contentstack stack.

CONTENTSTACK_API_KEY=<your_api_key>
CONTENTSTACK_DELIVERY_TOKEN=<your_delivery_token>
CONTENTSTACK_ENVIRONMENT=<your_environment_name>
CONTENTSTACK_WEBHOOK_SECRET=<your_secret>   # required only if you use /api/revalidate

Tip If Launch offers a Connect and Import Variables option when creating your project, use it. It pulls your Contentstack credentials directly from the linked stack and saves you from entering them manually.

To deploy your site on Launch, perform the following steps:

1. Push your project to a GitHub repository.
2. Go to your stack and open Launch using the “App Switcher” icon.
3. On the Launch Projects screen, click + New Project.
4. From the Create New Project modal, click Import from a Git Repository.
5. Click GitHub. A new page opens. Sign in with your GitHub credentials.
6. In the Repository Access section, select All repositories or choose specific ones, and click Save. If this is your first time connecting, click Install & Authorize.
7. In the Create New Project modal, fill in the following details:
   1. Repository (mandatory): Select your Git repository.
   2. Git Branch (mandatory): Select the branch to deploy from, for example, main.
   3. Project Name (mandatory): This is auto-populated from your repository name.
   4. Environment Name (mandatory): Enter a name, for example, production.
   5. Build and Output Settings (mandatory): The build command should be npm run build, and the start command should be npm run start.
   6. Environment Variables: Click + Add Environment Variable and add all variables listed above.
8. Click Deploy to save and deploy the project.

The screen shows a Deploying status while the build is in progress. Upon successful deployment, your site is live at a unique URL shown in the Domains section. You can also set up custom domains for your Launch project.

Tip Auto-deploy is enabled by default. Any push to the connected Git branch will automatically trigger a new deployment.

To generate the required files, refer to the following prompt:

Generate a next.config.js file for a Next.js app that fetches content from Contentstack. Configure image domains to allow Contentstack's CDN (images.contentstack.io and eu-images.contentstack.com). Also, generate a .env example file documenting all required environment variables, including CONTENTSTACK_API_KEY, CONTENTSTACK_DELIVERY_TOKEN, CONTENTSTACK_ENVIRONMENT, and CONTENTSTACK_WEBHOOK_SECRET.

Use a webhook to trigger a cache revalidation each time an entry is published in Contentstack.

Create a Next.js API route at app/api/revalidate/route.js that listens for POST requests from Contentstack webhooks. When a blog_post entry is published, it should call Next.js's revalidatePath to purge the cached version of /blog and the specific post page. Verify the request using a secret token stored in CONTENTSTACK_WEBHOOK_SECRET.

Tips for Better AI Prompts

The following practices improve the accuracy of AI-generated code when working with Contentstack.

Contentstack content type UIDs are auto-generated from the name in snake_case. For example, 'Blog Post' becomes blog_post. Always use the exact UID from the dashboard, not a guess. You can find it in Settings > Content Models or in the URL when editing a content type.

Each field has a UID. The label 'Cover Image' might have a UID of cover_image or featured_image, depending on what was set when the field was created. Always check the actual field UID in the Content Type Builder.

Paste a real API response into the prompt. This gives the AI the exact field names and data structure to work from.

Here is a sample JSON response from my Contentstack blog_post content type: [paste JSON here]. Write a TypeScript type definition for this response and a React component that renders it.

In Cursor, prefix a filename with @ to include its contents in the prompt context. For example: @lib/contentstack.js Using the stack instance from this file, create a new helper function getEntryBySlug(contentTypeUid, slug) that fetches a single entry.

Include type generation in the prompt. For example: 'Also generate TypeScript interfaces for the API response.'

To correct AI output, paste the broken code back into the prompt and describe the problem. For example: 'This code has an issue: [describe the problem]. Fix it.'

Reference

The following endpoints are used to fetch content from the CDA. Refer to the Content Delivery API documentation for all available endpoints.

# Fetch all entries from a content type
GET https://cdn.contentstack.io/v3/content_types/{uid}/entries?environment=development

# Fetch a single entry by UID
GET https://cdn.contentstack.io/v3/content_types/{uid}/entries/{entry_uid}?environment=development

# Filter entries by field value
GET https://cdn.contentstack.io/v3/content_types/blog_post/entries?query={"slug":"my-post-slug"}&environment=development

# Required headers
api_key: your_stack_api_key
access_token: your_delivery_token
Content-Type: application/json

For the full JavaScript SDK reference, refer to the JavaScript Delivery SDK documentation.

• Quickstart in 5 Mins
• Content Delivery API
• JavaScript SDK Reference
• Create a Content Type
• Create a Delivery Token
• About Environments
• Create an Entry
• Contentstack Launch
• Launch Quick Start Guide with NextJS
• Contentstack CLI

Next Steps

Use the following resources to extend your Contentstack implementation beyond the basics covered in this guide.

1. Contentstack Personalize: Deliver content variants to specific audience segments.
2. Contentstack Automate: Automate content migration and cross-system syncing.
3. Visual Builder: Enable content editors to compose pages without code.
4. Marketplace: Integrate with translation, SEO, analytics, and e-commerce tools.
5. Contentstack Community: Ask questions and find examples from other developers.