v0-Website with Cockpit Data: A to Z Guide (Editorial)

New to the team?

First Website with v0 (Shortcut) — 8-step checklist. This page is the detailed follow-up thereafter.

This page is for everyone who has never programmed and still wants a modern web preview with real center data from the cockpit. You can work through everything at your own pace in small steps.

In the end, you will (typically) have a draft from v0 (code) and instructions for your IT / agency to get the page online. Without a technical person, the website will usually not run permanently under your real internet address — this is normal, not a mistake on your part.

The Essentials in 30 Seconds

Topic	This is how it is
Fetching Data (Reading)	The page that v0 builds can load from the cockpit: Shops, news, colors, hero/template texts (`templatePublicContent`), page contents — all without login via public API addresses. v0 uses the Instructions (Parts A–E) to ensure it does not mistakenly call protected URLs (401).
Writing Data / “if not present”	Do not invent in v0. If something is missing (e.g., no news entry), you need to create or approve it in the cockpit. v0 only shows what already exists in the database. “Automatically writes missing data into the cockpit” does not work from a normal v0 website — that would be insecure.
Code & Hosting (your standard)	Single Center: one GitHub repo and one Vercel project (Company: `sawmuedev`). Multi-Center: one repo + one Vercel project. v0 connection: Cockpit → Website Management → Frontend Channels (v0) — F3.
Who builds, who starts?	You: v0, texts, layout ideas, instructions. Tech (Vercel etc.): Deploy code live, environment variable for the API URL.

Once you have internalized that, it proceeds step by step.

A — Account and Access

Open v0 in your browser: v0.dev (or the product your company has licensed — it might have a different name in Cursor, the process is similar).
Log in with the account your organization uses.
Log into Cockpit in a second tab (dashboard.cockpit-os.de or your internal address if IT specified something else).

You're done when both sites are running. No stress if something looks different — the terms (Chat, Instructions, Export) are usually in the same place in every v0-like tool.

B — Terms You Must Have Seen Once

Center Slug: The short name in the address, e.g., palais-vest, without https:// and without spaces. You find it in the cockpit at the Center / in the website settings — if unsure, ask colleagues or IT.
API Base URL (Data Source): Usually https://dashboard.cockpit-os.de. Some operators use test servers — in that case, your IT will provide the exact address. Note down one line: Our API: …
Instructions (Settings in v0): Long texts with rules for v0 that define which cockpit URLs the project may use. Important: Read about public-visitor-surface (including templatePublicContent for Hero/Footer) — not website-config without login. Without the instructions, v0 "guesses" — then the data will not match your Center (or the page crashes).

C — Before v0: Briefly Check in the Cockpit (5 Minutes)

So that there are later no empty pages "without your fault":

Select your Shopping Center.
Website / Website is active (depending on your menu: "Website active", websiteEnabled, etc.). If deactivated, the public API will not deliver center data for external sites.
Write down the slug (see above) — preferably in a local note or your filing system.
If you want to see shops, news, events on the future page: Briefly check in the cockpit whether there are actually contents and active/published status that fit. Empty lists in v0 = often empty lists in the cockpit.

No dev background needed

If anything is missing in the lists, create it in the cockpit (or ask someone with rights). v0 does not replace central maintenance.

D — v0: Instructions (max. 10 × 5000 characters)

v0 allows max. 10 custom instructions, each with max. 5000 characters. The guide is divided into parts A–J (plus F2 for chat) — create in v0 alphabetically A → J ( F Center plan; G Multi-Center; H+I Signage; J after Vercel).

v0: 10 Instructions × 5000 Characters

Per instruction max. 5000 characters, total of max. 10. Slot plan and character budget: v0 + Cockpit (Here’s how) (table + boxes alphabetically A–J). Part D (workflow) is mandatory — create in v0 as instruction Cockpit Workflow.

Instructions after Cockpit update

If IT has rolled out new API fields (e.g., templatePublicContent, Part F Center plan/3D, Part G Multi-Center): copy the gray boxes on the site v0 + Cockpit (Here’s how) anew and replace in v0 — otherwise, v0 will continue to use old URLs.

Detailed text including all prepared for copying (Parts D, A, B, C, E in boxes):

→ v0 + Cockpit (Here’s how) — only steps & texts

There you will find all boxes alphabetically A → J (plus F2 for chat). H = Kiosk/Stele; I = Companion/NOW! (always in pairs).

Brief repetition here:

v0: Open menu Instructions.
Create alphabetically A → J (Cockpit A … Cockpit J). For each part, insert the gray box from the linked page → save.
Cockpit D is called Cockpit Workflow in v0 (mandatory).
Cockpit E contains resilience (ISR revalidate: 300, public/fallback/*.json, try/catch) — if the dashboard fails, the page remains readable.
Cockpit J only after the first Vercel deployment. F2 for 3D problems only in the chat, not as the 11th instruction.
A–E always active; F / G / H / I / J depending on the project.

E — v0-Chat: How the Page Should Look

Start a new chat in the same v0 project (or continue in the existing one if your process allows).
In simple sentences, write what you want to see, e.g.:
- Homepage with large image, above the center name, below 6 shops as cards, scrollable on mobile.
- Multi-Center: One layout, same websiteTemplate, part G — center by domain.
- Center plan 3D: 2D/3D center plan according to part F + F2 — mapSvg with SVGLoader.
- Signage / Kiosk + NOW!: Kiosk terminal style (part H): plan 75%+, compact header, floating pills, toolbar at the bottom — plus Companion (part I).
Optional: Drag and drop screenshots of websites you like.
v0 will build drafts from it — you can refine: “Make the text larger”, “Darker backgrounds” — totally normal, not sounding technical.

v0 ensures the layout; whether your cockpit data appears everywhere depends on the instructions (step D) and whether there are actually data in the cockpit (step C).

F — Finalizing: Give Export to the Tech Team

If the draft is good enough for you:

Export code from v0 (depending on the provider: Download ZIP, Copy code, Open in …) — your IT / agency will tell you what they need.

Additionally (preferably by email) three lines of text:

1) API Base URL: https://dashboard.cockpit-os.de  (only replace if IT specifies otherwise)
2) Center Slug: your-slug
3) Please set in Vercel (or your hosting): environmental variable NEXT_PUBLIC_DASHBOARD_URL
   — same as the API base, without / at the end.
4) Please set up once: Vercel Deploy Hook → Cockpit (section F3 below),
   so that the live address automatically ends up in the cockpit after each deploy.

If your domain has a different name (e.g., www.ourcenter.de for by-domain) — please write that as well.

Without this minimum information, many v0 projects will work locally in v0, but not in the actual, hosted version.

Deep dive for tech, not for quick reading: Public API — Contract (Developer).

F2 — GitHub & Vercel: One Order per Center (Company Standard)

Each new center should receive its own GitHub repository (under the organization sawmuedev) and its own Vercel project — to ensure versioning (who changed what when) and clear assignment of Center = Repo = Vercel, without mixing projects.

What you as editorial staff need to know (brief)

You work in the cockpits on the contents; the code of the public website lives in one repo on GitHub — one per center, not everything in one collection repo if your IT/agency proceeds that way.
Employees receive access with their own GitHub account (no shared password) — this is handled by IT or an admin in the organization.
When tech places the v0 export in the repo, you do not need to operate Git — the only important thing is that everyone knows where your center code is "officially" located (link from the team).

What IT/Tech should do once safely (Checklist)

GitHub organization sawmuedev — create a new repository specifically for this center, e.g.:
- meaningful pattern: website-<center-slug> (Example: website-palais-vest → full path: sawmuedev/website-palais-vest).
- Establish one fixed naming rule for the team (always website-… etc.) — this way, everyone finds their center immediately.
Access for colleagues: invite in the repo under Settings → Collaborators and teams (or Manage access) — personal GitHub account per person or a team group in sawmuedev (e.g., editorial / per center) with read and possibly write access, as your IT governance allows.
Vercel — create a new project (do not reuse an existing one) → Import from exactly this GitHub repo; one deployment pipeline = one live/preview URL per center project.
Vercel environmental variable (as before, for each Vercel project): NEXT_PUBLIC_DASHBOARD_URL = your API base (e.g., https://dashboard.cockpit-os.de, without / at the end). After setting: Redeploy to apply.
- Signage (Kiosk + Companion): Cockpit signage stays; optionally additionally v0/Vercel — all under Website Management → Frontend Channels (v0). → Parallel Frontends
- Deploy Hook to Cockpit: once according to F3 — then Vercel automatically reports the live URL itself (editorial does not have to enter anything in the dashboard).
Never place real secrets (e.g., sk_agencyos_…, dashboard passwords) in the code or in public repo entries — only what belongs to public endpoints goes into the docs/.env.example, real values only in Vercel (or secret envs) from IT.

Result: For each single center: 1× GitHub Repo under sawmuedev + 1× Vercel project + Cockpit for the contents — all separable, with git history traceable.

F2b — Multi-Center: One Layout, Many Domains

If multiple shopping centers use the same v0 layout (same websiteTemplate in the cockpit — e.g., ilg, mec-shopbox, rgw or future templates), you do not need a v0 project per center.

What	Multi-Center Standard
v0	One project (e.g., `website-<template>`); Instructions D + A–E + G (possibly F); in chat: Multi-Center Layout, websiteTemplate = …
GitHub	One repo, e.g., `sawmuedev/website-<template>`
Vercel	One project; all center domains registered there (each domain points to the same instance)
Cockpit	Per center: Website active, domain registered, same `websiteTemplate`
New center	Domain in Vercel + center in Cockpit — no new v0 layout

IT Env (additionally): optionally EXPECTED_WEBSITE_TEMPLATE=<websiteTemplate>; Preview on *.vercel.app: DEFAULT_CENTER_SLUG=… or URL ?center=slug.

Technical details in the copy box Part G on v0 + Cockpit (Here’s how).

What you can write in the email to the tech team (copy template)

Please set up according to our instructions (v0-Website A–Z, section F2 + F3):
- New GitHub repo in the organization sawmuedev, naming schema e.g. website-<our-center-slug>
- Own Vercel project connected to this repo
- NEXT_PUBLIC_DASHBOARD_URL in Vercel = <our API base, without / at the end>
- Deploy Hook to Cockpit (F3): Register token + /api/cockpit-register + hook after production deploy
- Employees who should work on this project, listed with their personal GitHub access in the repo

F3 — Vercel Deploy Hook: Automatically Connect Cockpit

For editorial (when the site is finished):

In the v0 chat (with Cockpit MCP), e.g.:

“The website is finished and should go live. Domain: www.my-center.de — please check if the domain is at United Domains and DNS/Go-Live is handled.”

The assistant uses cockpit_publish_website_live (first dryRun: true). The text is also available for copying under Website Management → Frontend Channels (v0).

Once for IT: Section F3 (Vercel deploy register) — after that, the cockpit will automatically know the live URL.

Afterwards: continue building and maintaining content in v0 (Part D). In live operation, colleagues may change in the v0 chat or the cockpit — both end up in the same database.

For IT/Tech: Once per Vercel project (website, signage or companion). Additively — existing cockpit data and custom domains remain untouched.

Quick (team): Set up v0 team template — shared env once at the Vercel team level, per center only COCKPIT_REGISTER_TOKEN + COCKPIT_CENTER_SLUG.

Step 1 — Register Token in Cockpit

Cockpit → Website Management → Frontend Channels (v0)
Select center at the top left (if necessary)
Expand: For IT / v0-Setup → Generate Register Token

Step 2 — Route in the v0 Project (once)

Place the file in the repo (template in the Cockpit Monorepo):

apps/center-website/app/api/cockpit-register/route.ts

→ as app/api/cockpit-register/route.ts in the v0/Vercel project.

Commit + Push → Vercel rebuilds.

Step 3 — Environment Variables in Vercel (Copy-Paste)

Two levels: Team-Shared once create and link to every center project. For each center only the project variables below. (Also in v0 Instructions Part A, Part C, Part J.)

A) Team Shared (once in the team, then link per project)

Vercel → Team Settings → Environment Variables → Create shared, or edit existing shared variables → Link to Projects → select all center projects.

Variable	Value
`COCKPIT_DASHBOARD_URL`	`https://dashboard.cockpit-os.de`
`REVALIDATION_SECRET`	as in the cockpit dashboard (render)
`COCKPIT_FRONTEND_CHANNEL`	`website` · `signage` · `companion`

Existing projects: Shared does not automatically apply — in the project → Settings → Environment Variables → Link Shared Environment Variables → check the above three → Redeploy.

B) Only this Vercel Project (per center)

Project → Settings → Environment Variables → Production + Preview:

NEXT_PUBLIC_DASHBOARD_URL=https://dashboard.cockpit-os.de
COCKPIT_REGISTER_TOKEN=frt_INSERT_TOKEN_FROM_COCKPIT_HERE
COCKPIT_CENTER_SLUG=INSERT_SLUG_HERE
VERCEL_PROJECT_ID=prj_INSERT_FROM_VERCEL_SETTINGS_GENERAL
COCKPIT_VERCEL_PROJECT_MODE=dedicated

Variable	Value
`NEXT_PUBLIC_DASHBOARD_URL`	Same API base as part A (client + build fallback) — project-specific
`COCKPIT_REGISTER_TOKEN`	From Cockpit → Frontend Channels (v0) — never team-shared
`COCKPIT_CENTER_SLUG`	Center slug in Cockpit — must match the token
`VERCEL_PROJECT_ID`	Vercel → Settings → General → Project ID (`prj_…`) — Go-Live/DNS
`COCKPIT_VERCEL_PROJECT_MODE`	`dedicated` = 1 center · `shared` = multi-center layout

Do not set again at project level (otherwise it overrides shared): COCKPIT_DASHBOARD_URL, REVALIDATION_SECRET, COCKPIT_FRONTEND_CHANNEL.

After saving/linking: Redeploy (Deployments → … → Redeploy).

Step 4 — Create Deploy Hook in Vercel (Copy-Paste)

Vercel → Project → Settings → Deploy Hooks
Create Hook
- Name: Cockpit Register
- Branch: main (or your production branch)
Vercel shows a Hook URL, e.g.:

https://api.vercel.com/v1/integrations/deploy/xxxxx/yyyyy

This is not the target URL. The hook starts only a deploy. For the cockpit notification, you also need a call after successful deploy:

Option A (recommended): Vercel → Settings → Git → use a second mechanism or in CI under Deploy Hooks after every production deploy:

POST https://<your-project>.vercel.app/api/cockpit-register

(No body needed — the route reads VERCEL_URL and the register token from the envs.)

Option B (simple, manual test): Once after go-live in terminal or as IT check:

curl -X POST "https://<your-project>.vercel.app/api/cockpit-register"

Response should be "success": true and a message like “Connected with Cockpit”.

Option C (Vercel "Deploy Hook" + Build-Step): In package.json optiona (only if IT maintains build scripts):

"scripts": {
  "postbuild": "node scripts/cockpit-register-after-deploy.mjs"
}

Minimal script scripts/cockpit-register-after-deploy.mjs (only on Vercel production, VERCEL_ENV=production):

if (process.env.VERCEL_ENV !== 'production') process.exit(0);
const base = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : null;
if (!base) process.exit(0);
fetch(`${base}/api/cockpit-register`, { method: 'POST' })
  .then((r) => r.json())
  .then((j) => console.log('[cockpit-register]', j))
  .catch((e) => console.warn('[cockpit-register]', e.message));

Invisible to editorial staff

Once steps 1–4 are set, simply Deploy in v0/Vercel — the cockpit will show under Website Management → Frontend Channels (v0) “Last reported by v0/Vercel: …”. No manual URL entry.

Step 5 — Check (IT or Editorial)

Cockpit → Website Management → Frontend Channels (v0) → Check connection
Or: Publish test news in the cockpit → Live website should update within seconds (if REVALIDATION_SECRET is set)

Signage / Companion (additional v0 project)

Same steps — only in step 3:

COCKPIT_FRONTEND_CHANNEL=signage

Companion is often the same signage project; if so, just use signage, the companion path will come from the template. Own companion project: COCKPIT_FRONTEND_CHANNEL=companion.

Email to IT (copy template, complete)

Center: <Name>
Center Slug: <slug>
Vercel Project: <URL to the Vercel project>

Please set up once according to v0-Website A–Z section F3:

1) Cockpit → Website Management → Frontend Channels (v0) → generate register token
2) app/api/cockpit-register/route.ts from Cockpit template into the repo
3) Vercel Env:
   Team Shared (link project): COCKPIT_DASHBOARD_URL, REVALIDATION_SECRET, COCKPIT_FRONTEND_CHANNEL=website
   Only project: NEXT_PUBLIC_DASHBOARD_URL, COCKPIT_REGISTER_TOKEN=<frt_…>, COCKPIT_CENTER_SLUG=<slug>
   Optional project: VERCEL_PROJECT_ID, COCKPIT_VERCEL_PROJECT_MODE=dedicated
4) After production deploy: POST https://<project>.vercel.app/api/cockpit-register
   (or postbuild script according to F3 option C)

Editorial continues to work in v0 — URL entry in the cockpit is then not necessary.

Technical details: v0 Deploy to notify Cockpit

G — “If Something Is Missing”: Reading, Writing, Empty Cards

What the Website May (Reading)

The public cockpit API only delivers what is intended for the public (shops, news, etc.) — just like your official center page. Passwords for the dashboard do not belong in v0 code for visitors.

What the Website Cannot Replace with a Button

Cockpit Maintenance: New shops, news, texts, approvals — exclusively in Cockpit (or through internal processes).
“Auto-fills when empty”: A pure v0 page does not fill an empty news field in the database. Countermeasure: Create it in the cockpit; the website will show it in the next load.
Guestbook, form → directly in Cockpit: This usually requires almost always additional software (security) — not in this A–Z basic guide. Editorially: Use email links or your contact tool until your IT defines something else.

Common Symptoms (without blame)

Symptom	Usually solved this way
Empty shop list	In the cockpit: Create shops, active, visible for website; check slug in instructions.
No logo / no color	Check branding/theme in the cockpit; tech/API: `public-visitor-surface` → `data.center` (listed in instructions).
Hero empty / page "broken" / error in console	Often incorrect API (v0 calls `website-config` without login → 401). Reload instructions Parts A/B/C/D; Hero from `data.templatePublicContent.content`, not from invented `getHeroSlides()`.
404 in browser / “Center not there”	Website for center deactivated or incorrect slug.
I just wanted one line in the news	Cockpit → Edit news — do not type in v0 and “hope it will sync”.

H — Further Help (only read if necessary)

A bit more technical, but fully understandable: v0 with public API (steps)
Same A/B/C texts, just focusing on "only steps": v0 + Cockpit (Here’s how)
Deeper insights (JSON, errors, media): Examples & Media (Developer)
v0 designs as ZIP in the cockpit (different way, not open API): Templates – Intro
v0, Git, GitHub, Vercel, Claude on Mac (setup + everyday use, commit/push, clone): Mac Setup & Everyday Use — for IT/setup and for editorial Part 2 (everyday)
Edit website directly with Claude (without v0, in normal sentences): Build & Edit Website with Claude — including cases without cockpit as data source

Slug in Part A replaced (Single Center) or Part G active (Multi-Center)
All Instructions (D, A, B, C, E; possibly F; possibly G) active in v0 — Part D (Cockpit Workflow) first
Website in the cockpit active
To tech: Export (ZIP/repo) + short text (API, slug, NEXT_PUBLIC_DASHBOARD_URL)
(Single Center) F2 completed: sawmuedev/website-… + own Vercel project
(Multi-Center, shared layout) F2b completed: one repo + one Vercel project + all domains
F3: IT has set up deploy hook / POST …/api/cockpit-register (live URL automatically in cockpit)
Instruction Part J active in v0 (Fallback: Chat reports deploy URL)
Know that contents live in Cockpit, v0 mainly helps to display and shape

If all checkmarks are there, you have successfully completed the A–Z path for the editorial team — everything else is polishing with your team.

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/content-creator-handbuch/v0-website-redaktion-von-a-bis-z

The Essentials in 30 Seconds​

A — Account and Access​

B — Terms You Must Have Seen Once​

C — Before v0: Briefly Check in the Cockpit (5 Minutes)​

D — v0: Instructions (max. 10 × 5000 characters)​

E — v0-Chat: How the Page Should Look​

F — Finalizing: Give Export to the Tech Team​

F2 — GitHub & Vercel: One Order per Center (Company Standard)​

What you as editorial staff need to know (brief)​

What IT/Tech should do once safely (Checklist)​

F2b — Multi-Center: One Layout, Many Domains​

What you can write in the email to the tech team (copy template)​

F3 — Vercel Deploy Hook: Automatically Connect Cockpit​

Step 1 — Register Token in Cockpit​

Step 2 — Route in the v0 Project (once)​

Step 3 — Environment Variables in Vercel (Copy-Paste)​

A) Team Shared (once in the team, then link per project)​

B) Only this Vercel Project (per center)​

Step 4 — Create Deploy Hook in Vercel (Copy-Paste)​

Step 5 — Check (IT or Editorial)​

Signage / Companion (additional v0 project)​

Email to IT (copy template, complete)​

G — “If Something Is Missing”: Reading, Writing, Empty Cards​

What the Website May (Reading)​

What the Website Cannot Replace with a Button​

Common Symptoms (without blame)​

H — Further Help (only read if necessary)​

Checklist: Before Sharing in the Workgroup​