v0-Website mit Cockpit-Daten: Anleitung von A–Z (Redaktion)

Neu im Team?

Zuerst den Kurzpfad (8 Schritte). Diese Seite ist die ausführliche Begleitung. Kästen zum Kopieren: v0 + Cockpit (So geht’s).

Diese Seite ist für alle, die nicht programmieren und trotzdem eine moderne Vorschau mit echten Center-Daten wollen.

Am Ende hast du einen Entwurf aus v0 und ein Paket für die IT, damit die Seite unter der echten Adresse läuft. Ohne IT bleibt es meist bei der Vorschau — das ist normal.

Was / Warum / Wer / Wo


Was	Aussehen in v0. Fakten (Shops, News, Farben, Texte) im Cockpit.
Warum	Einmal pflegen — Website und später Apps zeigen dasselbe.
Wer	Du: v0, Texte, Instructions. IT: Hosting und Domain.
Wo	v0: v0.dev. Cockpit: Center → Reiter Website (Schalter Website aktiviert). Verbindung später: Center-Website → Frontend-Kanäle (v0).

Das Wichtigste in 30 Sekunden

Thema	So ist es
Lesen	Die fertige Website holt Shops, News, Farben und Hero-Texte von selbst aus dem Cockpit. Dafür die Instructions A–E.
Schreiben	Inhalte im Cockpit anlegen oder freigeben. Die öffentliche Website füllt keine leeren Listen. Im v0-Chat mit Cockpit-Verbindung (MCP) kann der Assistent Inhalte ins Cockpit legen — das steht in Teil D.
Hosting	Ein Center: oft ein GitHub-Repo und ein Vercel-Projekt. Mehrere Center, ein Layout: ein Repo, ein Hosting (Vercel oder bei MEC Recast). Die IT sagt, welches.
Wer startet live?	Du übergibst den Entwurf. Die IT schaltet die Adresse frei.

A — Account und Zugang

v0 öffnen: v0.dev, mit dem Firmen-Konto einloggen.
Cockpit in einem zweiten Tab: dashboard.cockpit-os.de (oder die Adresse, die die IT nennt).

Fertig, wenn beide Seiten laufen. Chat, Instructions und Export heißen in ähnlichen Tools meist gleich.

B — Drei Wörter

Center-Kurzname (Slug): z. B. palais-vest — ohne https://, ohne Leerzeichen. IT oder Kollegin nennt ihn dir. Nicht raten.
Cockpit-Adresse: meist https://dashboard.cockpit-os.de. Nur ändern, wenn die IT eine Test-Adresse vorgibt.
Instructions: feste Textregeln in v0. Ohne sie rät v0 — dann fehlen Daten oder die Seite lädt die falschen Adressen.

C — Vor v0: fünf Minuten im Cockpit

Richtiges Center wählen.
Reiter Website → Schalter Website aktiviert. Für die echte Domain und Playlists im Center ist das Pflicht. In der v0-Vorschau können Daten trotzdem schon erscheinen — live über die Domain nicht, solange der Schalter aus ist.
Kurznamen aufschreiben.
Shops, News oder Events, die auf der Seite stehen sollen: veröffentlicht und aktiv. Leere Listen in v0 sind oft leere Listen im Cockpit.

Fehlt etwas: im Cockpit anlegen, nicht in v0 erfinden.

D — Instructions in v0

v0 erlaubt genau 10 Instructions, je höchstens 5000 Zeichen. Die grauen Kästen liegen auf v0 + Cockpit (So geht’s).

Zuerst A–E. Cockpit D heißt in v0 Cockpit Workflow.

Dazu kommt	Wann
F	Lageplan
G	Ein Layout für mehrere Center
H + I	Stele und Handy-App, immer zusammen
J	Nach dem ersten Deploy

Unbenutzte Plätze leer lassen. Chat-Texte (F2, GEO, Chatbot) nicht als Extra-Instruction speichern.

Hat die IT die Kästen auf der Kopierseite aktualisiert: in v0 ersetzen, nicht unten anhängen.

In v0 Instructions öffnen.
Kästen A–E kopieren → einfügen → speichern.
In Teil A HIER_SLUG_EINTRAGEN durch den Kurznamen ersetzen.

E — In v0 beschreiben, wie die Seite aussehen soll

Neuen Chat im gleichen Projekt. Einfache Sätze oder Screenshots:

Startseite mit großem Bild, Center-Name, darunter Shops als Karten.
Mehrere Center: Ein Layout für alle Center; Inhalte kommen pro Domain aus dem Cockpit.
Lageplan: Klickbarer Centerplan, Farben wie die Website.
Stele: Info-Terminal, Plan groß, Bedienung unten — plus Handy-App dazu.

Nachziehen: „Text größer“, „dunklere Hintergründe“. Vor der Übergabe: „Sieht das noch nach KI aus? Bitte prüfen.“

F — An die IT übergeben

In v0 exportieren (ZIP, Link oder Repo — die IT sagt, was sie braucht).
Diese Zeilen mitgeben:

1) Cockpit-Adresse: https://dashboard.cockpit-os.de
   (nur ersetzen, wenn die IT etwas anderes sagt)
2) Center-Kurzname: euer-slug
3) Bitte Hosting so einrichten, dass die Website
   dieselbe Cockpit-Adresse nutzt wie Teil A.
4) Bitte nach dem Deploy mit dem Cockpit verbinden
   (Center-Website → Frontend-Kanäle, plus Instruction Teil J).

Echte Domain dazu schreiben, z. B. www.unsercenter.de.

Ohne diese Angaben läuft oft nur die v0-Vorschau, nicht die gehostete Seite.

F2 — Ordnung: ein Center, ein Code-Ort

Für die Redaktion: Inhalte im Cockpit. Der Code liegt in einem GitHub-Repo — die IT legt den Link fest. Du musst Git nicht bedienen.

Firmen-Standard (IT): Organisation sawmuedev. Namensmuster website-<kurzname>, z. B. sawmuedev/website-palais-vest. Ein Vercel-Projekt, verbunden mit genau diesem Repo. Zugriff über persönliche GitHub-Konten, kein gemeinsames Passwort.

MEC / mehrere Center, ein Layout: oft ein Repo pro Template und Hosting auf Recast (Docker), nicht ein Vercel-Projekt pro Center. Details: Go-Live.

Neue Stelen und Companion laufen über v0 + Cockpit, nicht über die alte Signage-App. Bestehende Geräte bleiben, bis die IT umzieht. Alles unter Center-Website → Frontend-Kanäle (v0).

F2b — Mehrere Center, ein Layout

Was	Standard
v0	Ein Projekt. Instructions A–E + G (Plan: plus F).
GitHub	Ein Repo, z. B. `sawmuedev/website-<template>`
Hosting	Ein Vercel-Projekt oder Recast — alle Center-Domains darauf
Cockpit	Pro Center: Website aktiviert, Domain hinterlegt, gleiches Layout-Template
Neues Center	Domain + Center im Cockpit — kein neues v0-Layout

Technik-Kasten: Teil G auf v0 + Cockpit.

E-Mail an die IT (Kopiervorlage)

Bitte laut v0-Website A–Z (F2 + F3) einrichten:
- GitHub-Repo in sawmuedev, z. B. website-<unser-kurzname>
  (oder bestehendes Template-Repo bei Multi-Center / MEC)
- Hosting verbinden (Vercel-Projekt oder Recast — ihr entscheidet)
- Dieselbe Cockpit-Adresse wie in Teil A
- Nach Deploy: mit Cockpit verbinden (Frontend-Kanäle + Teil J)
- Kolleginnen mit persönlichem GitHub-Konto ins Repo holen

F3 — Nach dem Deploy: Cockpit kennt die Live-Adresse

Redaktion, wenn die Seite fertig ist und der Chat mit dem Cockpit verbunden ist:

„Die Website ist fertig und soll live gehen. Domain: www.mein-center.de — bitte prüfen, ob die Domain bei United Domains liegt, und DNS sowie Go-Live erledigen.“

Der Assistent nutzt cockpit_publish_website_live (zuerst zur Probe). Denselben Text gibt es unter Center-Website → Frontend-Kanäle (v0).

Ohne diese Verbindung: Entwurf an die IT geben (Abschnitt F). Einmal eingerichtet, erscheint die Live-Adresse von selbst im Cockpit. Inhalte danach im Cockpit oder im v0-Chat — beides dieselbe Datenbank.

Team-Setup (IT einmal): v0 Team-Template.

Für IT — einmalig pro Projekt

Bestehende Daten und Domains bleiben. Gilt für Website, Signage oder Companion.

Schritt 1 — Token

Center-Website → Frontend-Kanäle (v0)
Center wählen
Für IT / v0-Setup → Register-Token erzeugen

Schritt 2 — Route

Vorlage: apps/center-website/app/api/cockpit-register/route.ts
→ im v0-Projekt als app/api/cockpit-register/route.ts. Commit + Push.

Schritt 3 — Umgebungsvariablen

Team Shared einmal, jedes Projekt verlinken. Pro Center nur die Projekt-Variablen. (Auch in Instructions Teil A und Teil J.)

A) Team Shared

Vercel → Team Settings → Environment Variables → Link to Projects.

Variable	Wert
`COCKPIT_DASHBOARD_URL`	`https://dashboard.cockpit-os.de`
`REVALIDATION_SECRET`	wie im Cockpit-Dashboard (Render)
`COCKPIT_FRONTEND_CHANNEL`	`website` · `signage` · `companion`

Bestehende Projekte: im Projekt Shared-Variablen verlinken, dann Redeploy.

B) Nur dieses Projekt (ein Center)

NEXT_PUBLIC_DASHBOARD_URL=https://dashboard.cockpit-os.de
COCKPIT_REGISTER_TOKEN=frt_HIER_TOKEN_AUS_COCKPIT_EINFÜGEN
COCKPIT_CENTER_SLUG=HIER_SLUG_EINTRAGEN
VERCEL_PROJECT_ID=prj_HIER_AUS_VERCEL_SETTINGS_GENERAL
COCKPIT_VERCEL_PROJECT_MODE=dedicated

COCKPIT_DASHBOARD_URL, REVALIDATION_SECRET und COCKPIT_FRONTEND_CHANNEL nicht noch einmal auf Projektebene setzen.

Multi-Center shared: COCKPIT_VERCEL_PROJECT_MODE=shared — kein Token/Slug als feste Projekt-Env. Preview: DEFAULT_CENTER_SLUG. Register pro Center über Go-Live oder MCP.

Nach dem Speichern: Redeploy.

Schritt 4 — Meldung nach Production-Deploy

Vercel-Deploy-Hook startet nur ein Deploy. Zusätzlich nach erfolgreichem Production-Deploy:

POST https://<euer-projekt>.vercel.app/api/cockpit-register

Kein Body — die Route liest Token und URL aus den Envs. Manuell testen:

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

Antwort: "success": true. Optional postbuild mit scripts/cockpit-register-after-deploy.mjs (nur VERCEL_ENV=production).

Schritt 5 — Prüfen

Center-Website → Frontend-Kanäle (v0) → Verbindung prüfen
Test-News veröffentlichen — die Live-Seite sollte sich schnell aktualisieren (wenn das Revalidate-Secret stimmt)

Signage / Companion: gleiche Schritte. Eigenes Companion-Projekt: COCKPIT_FRONTEND_CHANNEL=companion. Kiosk + Companion im selben Repo: signage reicht oft.

E-Mail an IT (F3 komplett)

Center: <Name>
Center-Kurzname: <slug>
Hosting-Projekt: <URL>

Bitte einmalig laut v0-Website A–Z Abschnitt F3:

1) Center-Website → Frontend-Kanäle (v0) → Register-Token erzeugen
2) app/api/cockpit-register/route.ts aus der Cockpit-Vorlage ins Repo
3) Env:
   Team Shared (Projekt verlinken): COCKPIT_DASHBOARD_URL, REVALIDATION_SECRET, COCKPIT_FRONTEND_CHANNEL=website
   Nur Projekt (ein Center): NEXT_PUBLIC_DASHBOARD_URL, COCKPIT_REGISTER_TOKEN=<frt_…>, COCKPIT_CENTER_SLUG=<slug>
4) Nach Production-Deploy: POST https://<projekt>/api/cockpit-register

Redaktion arbeitet weiter in v0 — URL-Eintrag im Cockpit dann nicht nötig.

Technik: v0 Deploy ans Cockpit melden

G — Wenn etwas fehlt

Symptom	Zuerst
Leere Shop-Liste	Shops im Cockpit anlegen, aktiv, für die Website sichtbar. Kurzname in Teil A prüfen.
Kein Logo / keine Farbe	Branding im Cockpit. Instructions A–C neu einspielen.
Hero leer / Seite wirkt kaputt	Oft falsche Adresse in v0. Kästen A–D neu kopieren. Hero-Texte kommen aus dem Cockpit (Webseiten-Reiter), nicht als erfundene Liste in v0.
404 / „Center nicht da“	Website aktiviert? Kurzname richtig? Bei der echten Domain: Domain im Cockpit hinterlegt?
News-Zeile ändern	Im Cockpit die News bearbeiten — nicht in v0 tippen und hoffen.
Kontaktformular	Layout in v0, Versand über das Cockpit (Teil A). Kein eigenes Mail-Passwort in v0.

Die öffentliche Website schreibt nicht ins Cockpit. Neue Inhalte: Cockpit oder v0-Chat mit Verbindung (Teil D).

H — Weitere Hilfen

Checkliste vor der Übergabe

Kurzname in Teil A oder Teil G bei mehreren Centern
Instructions A–E aktiv, Cockpit Workflow zuerst. F / G / H+I nur bei Bedarf. J nach dem Deploy
Website aktiviert im Cockpit
Export + Kurztext an die IT (Adresse, Kurzname, Domain)
IT: Repo + Hosting (F2 / F2b) und Verbindung nach Deploy (F3)
Inhalte leben im Cockpit, v0 gestaltet

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

Was / Warum / Wer / Wo​

Das Wichtigste in 30 Sekunden​

A — Account und Zugang​

B — Drei Wörter​

C — Vor v0: fünf Minuten im Cockpit​

D — Instructions in v0​

E — In v0 beschreiben, wie die Seite aussehen soll​

F — An die IT übergeben​

F2 — Ordnung: ein Center, ein Code-Ort​

F2b — Mehrere Center, ein Layout​

E-Mail an die IT (Kopiervorlage)​

F3 — Nach dem Deploy: Cockpit kennt die Live-Adresse​

Für IT — einmalig pro Projekt​

A) Team Shared​

B) Nur dieses Projekt (ein Center)​

E-Mail an IT (F3 komplett)​

G — Wenn etwas fehlt​

H — Weitere Hilfen​

Checkliste vor der Übergabe​