Demo Website Builder (Cursor Edition)

Build full Contentstack + Lytics demo websites for any industry, powered by Cursor AI.

Clone this repo, open it in Cursor, and tell the AI agent what you want. It handles everything — content models, realistic content, a polished frontend, analytics, Visual Builder, even personalization.

Getting Started

1. Clone and open in Cursor

git clone git@github.com:toddbelcher-contentstack/demo-website-builder-cursor.git my-demo
cd my-demo

Open the folder in Cursor (cursor . or File > Open Folder).

2. Tell the agent what to build

Open Composer (Cmd+I) or Chat (Cmd+L) and start talking:

Build a financial services demo website for a bank called "Apex Financial"

Create an e-commerce demo site for a luxury furniture company called "Evergreen Home"

Set up a healthcare demo website for a clinic network called "Meridian Health"

The agent will ask you for your credentials, research the industry, design the content model, create everything in your Contentstack stack, generate realistic content, and build the frontend. The whole thing.

Or set up credentials first

If you'd rather get credentials out of the way up front, copy the example env file and fill it in:

cp .env.example .env.local

You'll need these from your Contentstack stack (Settings > Tokens):

Credential	Where to find it
API Key	Stack Settings
Delivery Token	Settings > Tokens > Delivery
Management Token	Settings > Tokens > Management (starts with cs)
Preview Token	Settings > Tokens > Preview
Environment name	Settings > Environments (usually production or development)

And from Lytics:

Credential	Where to find it
Account ID	Data Pipeline > SDK > Web (JS) — it's the ID in the JS tag URL

Either way works. The agent will verify the connection before doing anything and will let you know if something's missing.

What's in the box

CLAUDE.md — Master Instructions

The architecture spec that drives everything. Cursor reads this automatically via the project rules. It covers:

• Content modeling — modular blocks, taxonomies, field metadata rules, Visual Builder requirements
• Visual Builder integration — field-level editing on every CMS element (not just wrapper divs)
• Three-layer data architecture — Components → DataService → ContentstackService → SDK
• Lytics analytics — event tracking standards, privacy rules, initialization patterns
• Contentstack Personalize — A/B tests, segmented experiences, entry variants with granular deltas
• 100% CMS-driven content — zero hardcoded copy in the frontend

You don't need to read it (the AI does), but it's there if you're curious about how the sausage gets made.

Cursor Rules (.cursor/rules/)

Five Cursor rule files that provide specialized context:

Rule	When it activates	What it does
project-instructions	Always	Points to CLAUDE.md, provides quick reference for build workflow
contentstack-dev	Working on tools/, src/lib/contentstack/, types	CMS architecture, content modeling, Management API
front-end-dev	Working on src/components/, src/app/, Tailwind	React/Next.js components, Visual Builder integration
lytics-engineer	Working on src/lib/lytics/, tracking, analytics	Event tracking, session management, Lytics tag
website-qa-master	Manually referenced for QA	End-to-end testing, accessibility, content integrity

Rules activate automatically based on the files you're working with. The main project instructions rule is always active.

CMS Automation Tools

17 Node.js scripts in tools/ that the agent runs in sequence to set up your stack:

Step	Script	What it does
1	test-connection.js	Verify API credentials and environment
2	create-taxonomies.js	Create blog categories, tags, product categories
3	create-global-fields.js	Create page_seo global field + 12+ universal modular blocks
4	create-content-types.js	Create page, component, and singleton content types
5	seed-content.js	Seed site settings, navigation, industry-specific entries
6	seed-pages.js	Seed pages with modular block compositions
7	seed-blog.js	Seed blog posts with JSON RTE bodies
8	add-design-tokens.js	Add CMS-driven theming tokens to site settings
9	publish-all.js	Bulk publish all entries
10	inventory.js	Audit content types and entry counts
11	test-delivery-api.js	Verify published content on CDN

The tools are idempotent — safe to re-run if something needs updating. The agent customizes the content each tool generates for your specific industry.

Shared utilities in tools/utils/:

• api-client.js — Management API wrapper with rate limiting, retry logic, and hardened content type helpers that enforce correct field metadata for Visual Builder
• json-rte-builders.js — JSON RTE node builders for structured blog content
• auth.js — Auto-login for Personalize tools (prompts for credentials when needed, saves token to .env.local)

Personalization (optional)

If you have Contentstack Personalize set up, there are additional tools for creating experiences with entry variants:

Script	What it does
setup-personalize.js	Create A/B test and segmented experiences with entry variants
add-page-variants.js	Extend variants to additional pages beyond the homepage
sync-variant-heroes.js	Sync hero images and styles across all variants

You'll need a Personalize Project UID from the Personalize dashboard. When the tools need to authenticate with the Personalize API, they'll prompt for your Contentstack email and password and handle the rest — no need to manually copy tokens around.

How the sites are built

Every piece of content lives in Contentstack — zero hardcoded copy in the frontend. This means:

• Content editors can change everything through the CMS
• Every field is individually editable in Visual Builder (headlines, images, CTAs, stats, testimonials — not just wrapper divs)
• Sites are localization-ready without code changes
• Personalized variants work through the same content pipeline

Pages are composed from reusable modular blocks, each defined as a Contentstack Global Field:

Hero, Stats, Features, Testimonials, CTA, Trust Badges, FAQ, Text Content, Pricing, Team Spotlight, Blog Highlights, How It Works — plus industry-specific blocks

The $ editable tag pattern is applied at the field level so Visual Builder can target individual elements:

// Every text field gets its own editable tag
<h1 {...($['headline'] || {})}>{block.headline}</h1>
<p {...($['description'] || {})}>{block.description}</p>

// Array items use indexed patterns
{block.stats?.map((stat, i) => (
  <span {...($[`stats__${i}__value`] || {})}>{stat.value}</span>
))}

// Images are editable too
<img src={block.hero_image.url} {...($['hero_image'] || {})} />

Differences from Claude Code version

This is the Cursor-adapted version of the demo-website-builder. Key differences:

Aspect	Claude Code version	Cursor version
AI instructions	CLAUDE.md (auto-loaded)	CLAUDE.md + .cursor/rules/ (auto-loaded via rules)
Specialized agents	.claude/agents/*.md (sub-agents)	.cursor/rules/*.mdc (context rules with file globs)
Permissions	.claude/settings.local.json	Not needed (Cursor handles permissions differently)
Tools	tools/ (identical)	tools/ (identical)
Usage	CLI-based (claude command)	IDE-based (Composer/Chat in Cursor)

The underlying architecture, tools, and content patterns are identical. Only the AI configuration layer differs.

Tech Stack

The frontend is built with:

• Next.js 14+ (App Router) with TypeScript
• Tailwind CSS with @tailwindcss/typography for blog rendering
• Contentstack SDK (contentstack, @contentstack/live-preview-utils v4+, @contentstack/utils)
• Lytics JavaScript Tag for behavioral analytics
• Lucide React for icons

License

Internal use — Contentstack demo purposes.