Ein Open-Source-Projekt von Webagentur Hochmeir

Das CMS für Webseiten,
die sich selbst warten.

§ Drop-in Geht in deine bestehende Seite — kein Rewrite nötig. Ein <script>-Tag genügt für WordPress, Webflow, Wix, Squarespace, jQuery oder pure HTML. Astro, Next, Nuxt, Laravel und vier weitere Frameworks haben einen dedizierten CLI-Installer.

Peacock wird ein Headless CMS für moderne Webseiten — mit Drag-and-Drop-Builder, einem KI-Co-Pilot und einem nativen MCP-Server für Agenten. Self-hosted unter MIT-Lizenz — du bestimmst, wo deine Daten liegen.

Heute richten wir uns an Developer, die früh integrieren oder mitbauen wollen. Mittelfristig wird Peacock auch für Marketer und Gründer:innen ohne KI-Erfahrung nutzbar sein — daran arbeiten wir öffentlich.

  • Drop-in · ~30 Sekunden
  • MIT Lizenz
  • self-hosted · Docker oder K8s
  • DSGVO-konform (EU-Region)
  • Astro · Next · Nuxt · Laravel · WordPress

~30 s

in bestehende Seite

377 / 986

Tests / Assertions

MIT

Open Source

EU 🇦🇹

Hosting · DSGVO

Aufbauend auf Stacks, die wir bei webhoch-Kunden seit Jahren täglich einsetzen.

§ Wie geht's los

In fünf Schritten live.

Vom Frühzugang bis zur publizierten ersten Seite — wir begleiten dich Schritt für Schritt. Jeder Schritt ist als eigenständiger Punkt verständlich, du kannst zwischen Code- und visuellem Builder-Modus jederzeit wechseln.

  1. 01

    Frühzugang anfragen

    Eine Mail an peacock@webhoch.com — wir antworten persönlich (meist binnen Stunden), richten dir eine Demo-Space ein und schicken dir den Admin-Login. Alternativ kannst du Peacock auch komplett selbst hosten (Docker-Compose ist Open Source).

    Dauer: ~10 Minuten · Cloud oder Self-Host

  2. 02

    Inhalts-Bausteine modellieren

    Im Admin definierst du, welche Bausteine (Hero, FAQ, CTA, Galerie, …) deine Seiten haben sollen. Wir liefern 9 Standard-Blueprints schon mit — ändern oder eigene anlegen geht über ein Formular, kein Code nötig.

    Dauer: ~5 Min pro Baustein · UI-basiert · keine Migration

  3. 03

    Seite mit dem Visual Builder bauen

    Neue Story anlegen, Bausteine per Drag-and-Drop arrangieren, Texte direkt im Editor schreiben — oder vom KI-Co-Pilot per Klick generieren, übersetzen, SEO-optimieren lassen. Live-Preview rendert die echte Seite parallel.

    Visual + JSON-Modus · Multi-Language · Versionierung

  4. 04

    Frontend anbinden

    Eine Zeile in deinem Astro / Next / Nuxt / Laravel / WordPress-Projekt — und die Inhalte sind da. Für noch schnelleren Start gibt's einen Embed-Script-Tag, den du in pure HTML einfügen kannst. Wichtig: Lesezugriff (Embed + CDN) braucht keinen Token — der ist nur für die Management-API (Schreiben / Editieren) nötig. Token-Auth = Admin & Co; Embed = öffentlich.

    npx @peacock/cli init astro
    # oder JETZT schon nutzbar: <script src=".../embed.js" data-peacock-space="dein-space">

    Embed-Mode: live, kein Token · CLI + SDKs: Code fertig, npm-Publish mit Public-Launch · 8 Framework-Installer

    Bis npm-Publish: Frühzugang über peacock@webhoch.com (Sanctum-Token + Repo-Einladung).

  5. 05

    Publishen — und live gehen

    Im Admin "Publish" klicken — Peacock invalidiert die CDN-Caches automatisch, deine Seite ist innerhalb von Sekunden weltweit aktuell. Approval-Workflows, Scheduled- Publishing und ein Audit-Log für jede Änderung sind ab Tag 1 dabei.

    CDN-Invalidation <5s · Approval-Gates · Scheduled Publish

§ In 60 Sekunden

In jede bestehende Seite integrierbar.

Kein Rewrite nötig. Drei Wege, je nachdem wie tief du gehen willst — Embed-Script für jede HTML-Seite, CLI-Installer für 8 Frameworks, oder der nackte TypeScript-Client für eigene Build-Pipelines. Alle drei reden mit derselben CDN-API: du fängst klein an und kannst später migrieren ohne Content neu zu pflegen.

Mode A

Embed-Script ~30 s

Ein Script-Tag, ein <div>. Funktioniert in pure HTML, WordPress-Editor-Blöcken, Webflow Custom-HTML, jQuery-Apps — überall wo du Markup einfügen kannst.

<script src="https://peacock-cms.webhoch.com/embed.js"
        data-peacock-api="https://peacock-cms.webhoch.com"
        data-peacock-space="marketing-demo" defer></script>

<div data-peacock-story="/marketing-demo"></div>

~6 KB gzipped Vanilla-JS · Allowlist-XSS-Schutz · Loading-Skeleton · Multi-Locale + Segments via data-* Attribute

↓ Diese Box ist live · gerade von /v1/cdn/marketing-demo/stories/marketing-demo ausgeliefert

§ Demo wird gerade vorbereitet

Sobald der marketing-demo-Space auf peacock-cms.webhoch.com seeded ist, erscheint hier ein live von der CDN ausgelieferter Hero+Quote — genau das, was du oben in den drei Zeilen Markup auch hättest.

Du willst's selbst sehen? Kopier den Snippet oben in eine eigene HTML-Seite, setz data-peacock-space auf demo-site und data-peacock-story auf /about — der ist seit Phase 8 live.

Mode B

Framework-CLI ~60 s

Eine Zeile in deinem Projekt-Root. Auto-detection für Astro, Next, Nuxt, Laravel, WordPress, SvelteKit, Remix, Eleventy. Schreibt eine Beispiel-Route + .env.

npx @peacock/cli init
# → erkennt dein Framework
# → schreibt sample route + .env
# → druckt den nächsten Schritt

Idempotent · Keine Code-Überschreibung · Pro Framework eine eigene Render-Strategie (SSR/SSG/Edge-Cache)

Mode C

Manual SDK ~3 Zeilen

Du hast schon Build-Pipeline + Routing? Drop den Client rein, ruf getStory(), render wie du willst. TypeScript-Types + discriminated-union returns inklusive.

import { createClient } from '@peacock/sdk-js';

const peacock = createClient({ baseUrl, spaceSlug });
const result = await peacock.getStory('/about');
if (result.status === 'ok') renderYourWay(result.story.content);

~5,5 KB gzipped ESM · Edge-Runtime kompatibel (Cloudflare Workers, Deno, Lambda) · Vollständige Typed-API

Status: Closed Pre-Alpha. Code für Embed-Script, alle 8 CLI-Installer, beide SDKs, das Laravel-Composer-Paket und das WordPress-Plugin ist fertig und durch Tests gedeckt. Die unten gezeigten Befehle (npx @peacock/cli, composer require webhoch-com/peacock-laravel, wp plugin install peacock-cms) werden mit dem Public-Launch auf npm/Packagist/wordpress.org ausgespielt. Bis dahin: Frühzugang via peacock@webhoch.com mit Sanctum-Token + Repo-Einladung. Security-Audit bestanden (0 HIGH) — Audit-Report lesen.
1

In deinem Projekt:

npx @peacock/cli init astro
2

Eine bestehende Seite umstellen:

// src/pages/[...slug].astro
import { getStory } from '@peacock/sdk-astro';

const story = await getStory(Astro.params.slug);
---
<BlockRenderer blocks={story.content.body} />

Im Endzustand: Deine Astro-Seite zieht Inhalt aus Peacock.

8 Frameworks · alle als npx @peacock/cli init <framework> ausführbar (sobald die CLI auf npm publisht ist). Vollständige Guides in der Dokumentation.

§ Für wen ist Peacock

Egal, ob du Code liebst oder ihn nie gesehen hast.

Peacock funktioniert für vier sehr unterschiedliche Menschen — alle ohne Kompromisse.

Web-Agenturen

Ein Backend für viele Kundenwebseiten. Schluss mit dem WordPress-Update-Marathon.

  • Multi-Site aus einem Admin
  • Eigenes Branding pro Kunde
  • White-Label-fähig
  • SLA-fähig konzipiert
{ }

Indie Developer

Open Source. Self-hosted. Eigener Stack. Keine SaaS-Sucht.

  • MIT-Lizenz, eigener Code
  • Docker-Compose lokal
  • TypeScript-typisierte SDKs · GraphQL + REST (OpenAPI 3.1)
  • Webhooks (HMAC-SHA256) + Plugin-API für eigene Reaktionen
  • MCP für Claude Code / Cursor

Marketer & Redakteur:innen

Klick statt Code. KI-Texte. Mehrsprachig. Direkt im Browser.

  • Drag-and-Drop-Block-Editor
  • KI-Schreibhilfe inline
  • Übersetzen mit einem Klick
  • Live-Preview der echten Seite

→ Voller Editor auf /app/ Per-Site-Admin auf eurer Domain bietet leichtere Inline-Edits; der volle Builder/KI/Workflow lebt im zentralen Admin.

§ Schritt für Schritt

Von Null auf live in 10 Minuten.

Egal ob du nur Inhalte ändern willst oder einen ganzen Multi-Site-Setup brauchst — die ersten sechs Schritte sind für alle gleich. Jeder Schritt ist getestet, alles ist live auf peacock-cms.webhoch.com nachvollziehbar.

  1. 01

    Frühzugang anfragen

    Repository ist noch privat (Closed Pre-Alpha). Schick eine kurze Mail an peacock@webhoch.com — wir antworten persönlich (Webagentur Hochmeir, e.U.) und richten dir auf Wunsch ein:

    • GitHub-Repo-Einladung (für Self-Host) — wenn du den Code lokal laufen lassen willst
    • Sanctum-Token für peacock-cms.webhoch.com (für Sofortstart ohne Setup)
    • Demo-Space mit 5 vorbereiteten Stories + 9 Component-Blueprints

    Antwortzeit hängt von der Auslastung ab — meist innerhalb 1–2 Werktagen. Oder kurz in die Waitlist eintragen für die Public-Launch-Mail (dann fällt der manuelle Schritt weg).

  2. 02

    Setup — gehostet oder selbst

    Zwei Wege. Gehostet (empfohlen für den ersten Eindruck):

    # Im Admin einloggen mit dem Token aus Schritt 01
    open https://peacock-cms.webhoch.com/app/
    # → "Token-Login" klicken, Sanctum-Token einfügen, fertig

    Self-Host (Docker + Postgres + Redis lokal) — sobald das Repo öffentlich oder du Repo-Einladung aus Schritt 01 hast:

    git clone <dein-repo-link aus Schritt 01>
    cd peacock
    ./install.sh          # → docker compose up · seed · open localhost:8000/app/

    Beide Modi reden mit derselben CDN-API — du kannst gehostet starten und später ohne Content-Migration self-host wechseln. Während Closed Pre-Alpha ist der Repo-URL nur per Mail-Einladung verfügbar; mit dem Public-Launch wird er öffentlich.

  3. 03

    Erste Story anlegen

    Im Admin links auf + Neue Story klicken. Drei Felder:

    • Slug — URL-Teil (ueber-uns, leer = Startseite)
    • Überschrift — wird als initialer Hero gespeichert
    • Parent (optional) — für Verschachtelung (/blog/willkommen)

    Nach Save sieht der Editor so aus: visuelle Drag-and-Drop-Form-View mit Block-Bibliothek (9 Bausteine: Hero, FAQ, CTA, Pricing, Gallery, Quote, Rich-Text, Text+Image, Text-Block) oder JSON-Escape-Hatch für eigene Shapes. Save → Diff → Publish. Auf der Marketing-Demo oben sind nur 5 als Vorschau gezeigt; im echten Admin sind alle 9 da.

    Block-Bausteine sind drag-&-droppable. Jede Save erzeugt eine neue Version; "View diff" zeigt was sich geändert hat.

  4. 04

    In deine Webseite einbauen

    Drei Wege, je nach Komplexität deines bestehenden Setups:

    • Statisches HTML / WordPress / Webflow<script src=…/embed.js> + <div data-peacock-story="/about">. Zero Build.
    • Astro / Next / Nuxt / Laravel / SvelteKit / Remix / Eleventynpx @peacock/cli init im Projekt. Auto-detection, schreibt Sample-Route + .env.
    • Eigene Build-Pipelinepnpm add @peacock/sdk-js, peacock.getStory('/about'). Volle Kontrolle.

    Alle drei Wege rufen dieselbe /v1/cdn-API, hängen sich an denselben Edge-Cache, supporten dieselben Locales + Segments. Du fängst klein an und migrierst hoch.

    Hier reload-en: Code-Beispiele oben in der Install-Sektion.

  5. 05

    Personalisieren + Performance messen

    Sobald Traffic kommt: in der Admin-Sidebar auf den audiences-Tab klicken (4. Eintrag nach stories / assets / audit). Audience-Segments anlegen, z. B. "DACH-Mobile-Visitors":

    Key: dach-mobile
    Rule 1: country in [AT, DE, CH]
    Rule 2: device is mobile
    Priority: 10

    Im Story-Editor erscheint dann ein Variant-Switcher: pro Segment eine eigene Hero-Version. Die CDN matcht automatisch via CF-IPCountry + Accept-Language + UA-Sniffing.

    Direkt daneben: der analytics-Tab — Privacy-first (keine Cookies, gehashte Visitor-IPs mit 25 h TTL, Salt rotiert nach 30 Tagen). Day-Bar-Chart, Top-Referrer, Device-Split, Segment-Performance.

    Im selben Tab: KI-Insights — Claude analysiert die letzten 30 Tage Daten + den Story-Content und schlägt 3–5 konkrete Verbesserungen mit Begründung vor (z. B. "Mobile-Bounce stieg um 22 %, Hero kürzen").

  6. 06

    AI-Agenten anschließen (optional)

    Peacock ist nativ MCP-fähig. Drei Zeilen in deiner .mcp.json (Claude Code) oder claude_desktop_config.json (Claude Desktop):

    {
      "mcpServers": {
        "peacock-cms": {
          "command": "npx",
          "args": ["-y", "@peacock/mcp-server"],
          "env": {
            "PEACOCK_API_BASE": "https://peacock-cms.webhoch.com",
            "PEACOCK_TOKEN": "<dein-token>",
            "PEACOCK_SPACE": "<dein-space-slug>"
          }
        }
      }
    }

    Ab jetzt kann Claude / ChatGPT / Cline / dein eigener Agent: list_stories, get_story, update_story_content, publish_story, list_components. Jede Mutation schreibt einen Audit-Eintrag — sichtbar im AI Audit-Tab.

    Approval-Policy pro Space: auto-apply (Agent darf direkt publishen), human-review (Agent erstellt Vorschläge, Mensch genehmigt), read-only (kein Mutate).

Fertig. Ab hier ist alles iterativ — weitere Stories, weitere Blueprints, weitere Spaces (Multi- Site), weitere Datasources (externe API-Daten in den Stories referenzieren via {"$ds": "employees:42"}).

Mit dem Embed-Script ausprobieren → Frühzugang anfragen →

§ Drag & Drop Builder

Webseiten bauen mit Maus statt Markup.

Der Peacock Block-Editor ist ein echter visueller Editor — keine Formularliste mit Vorschau, sondern die fertige Seite direkt im Iframe. Ziehe Blöcke aus der Komponentenleiste, sortiere per Maus, klicke auf Text um ihn zu ändern.

Features live · Pre-Alpha Die folgende Liste beschreibt den Endzustand des Editors.

  • Nested Blocks — Hero in Container in Grid, ohne JSON
  • Live-Preview — sieh deine echte Astro/Next-Seite, nicht eine Vorschau
  • Komponentenbibliothek — Hero, FAQ, Pricing, Gallery, CTA out-of-the-box
  • Versionierung & Rollback — jede Änderung mit einem Klick zurück
  • Multi-Language — DE/EN/FR/ES, mit KI-Co-Translate
So funktioniert der Editor

§ Vier Säulen

Was Peacock anders macht.

01

Visual Editor Code fertig · Pre-Alpha

Strukturierter Block-Editor mit Drag-and-Drop (@dnd-kit) und echter Iframe-Preview. Komponenten-Blueprints definieren die Spielregeln; der Editor folgt ihnen. Rich-Text-Felder mit Plate.js + DOMPurify-Sanitization sind ebenfalls live.

02

KI Co-Pilot Code fertig · Pre-Alpha

Generieren, übersetzen, SEO optimieren — direkt im Feld. Provider-agnostisch (Anthropic oder OpenAI), dein API-Key, dein Token-Budget. Graceful Fallback wenn noch kein Key gesetzt.

03

Agentic CMS · MCP Code fertig · Pre-Alpha

Nativer MCP-Server. Claude Code, ChatGPT, Cursor — alle können mit deinem Content arbeiten. Mit Audit-Log und Human-Review.

04

Open Source Closed Pre-Alpha · Audit ✓

MIT-Lizenz. Security-Audit bestanden (0 HIGH-Findings, siehe Audit-Report). Docker-Compose lokal, Helm-Chart fertig in infra/k8s/. Self-host in der EU jederzeit verfügbar. Frühzugang via peacock@webhoch.com.

05

API & Integrationen Phase 9 ✓ · live

REST + GraphQL. OpenAPI 3.1 Spec mit 73 Endpunkten. Webhook-Dispatcher mit HMAC-SHA256-Signaturen + SSRF-Guard. Webhook-Push-Datasources spiegeln externe APIs ins CMS. Embed-Script, 8 Framework-SDKs, MCP-Server — alle reden mit derselben CDN.

06

Realtime Collab Phase 15 ✓ · live

Presence-Indikator (welche:r Editor:in ist gerade in welcher Story), threaded Inline-Comments (block-path-anchored, resolvable), Plugin-Execution-Engine mit Sync-Veto + Field-Type-Validation, Approval-Workflows mit Multi-Stage-Gates. Plus RBAC mit 3 Rollen (viewer/editor/admin) + Audit-Log-Retention (Phase 17).

§ KI im Feld

Tippt nicht ihr alleine — tippt sie mit.

Live · benötigt API-Key. KI-Streaming ist seit Phase 5 verifiziert (Anthropic + OpenAI Provider). Setz AI_PROVIDER_KEY in deinem self-hosted Setup und der Co-Pilot generiert direkt im Editor. Die Animation unten zeigt den Flow.

§ Warum offen

Vom geschlossenen SaaS zur offenen Plattform.

Klassische headless-CMS-Anbieter sind exzellent — aber proprietär und teuer, sobald euer Team wächst. Peacock übersetzt jedes wichtige Konzept in einen offenen, selbst-hostbaren Baustein.

Konzept Klassisches SaaS-CMS Peacock
Visual Editor SaaS — Cloud, proprietär Peacock — React + Strukturierter Block-Editor + Plate.js Rich-Text · self-host
Drag & Drop SaaS — Ja Peacock — Ja · nested · ohne JSON-Eingabe (heute via @dnd-kit)
Mehrsprachigkeit SaaS — Field-Level Peacock — Locale-Modell + KI-Co-Translate (Code fertig · Pre-Alpha)
KI SaaS — Vendor-AI, gebundene Modelle Peacock — Provider-agnostisch · streaming · Audit (Code fertig · Pre-Alpha)
MCP-Server SaaS — Nur Enterprise Peacock — Nativ · auch self-hosted · Approval-Modi (Code fertig · Pre-Alpha)
Lizenz SaaS — Proprietär Peacock — MIT · self-host bar
Pricing SaaS — $0 → 4-stellig/Monat (kommerzielle Enterprise-Tarife etablierter Cloud-CMS — siehe deren öffentliche Preisseiten) Peacock — Open Source · MIT · self-hosted
DSGVO & EU-Hosting SaaS — EU-Region nur ab Enterprise Peacock — Standard · EU-Hetzner / self-host

§ Lizenz

Open Source. Kein Vertrieb, keine Verträge.

Peacock ist und bleibt unter MIT-Lizenz frei verfügbar. Self-hosten, forken, anpassen — keine Anmeldung, kein Konto bei uns, keine Daten gehen an einen Cloud-Anbieter.

Open Source · MIT

€ 0für immer

Self-hosted. Code, Schema, Daten gehören euch.

  • Vollständiger Funktionsumfang
  • Unbegrenzte Spaces & Stories
  • Docker-Compose · Helm-Chart
  • 1-Befehl-Self-Host (./install.sh)
  • Eigene AI-Keys mitbringen

Status: Closed Pre-Alpha. Security-Audit ✓ bestanden (0 HIGH). Repository öffnet sich beim Public-Launch.

Frühzugang anfragen →

§ Hinter Peacock

Hi, ich bin Jonathan.

Ich baue mit Webagentur Hochmeir seit Jahren maßgeschneiderte Webseiten und Software für österreichische und deutsche Unternehmen. Peacock ist das CMS, das ich für meine eigenen Kunden gebraucht habe — sauber, offen, KI-nativ, ohne Vendor-Lock-in.

Wenn du Custom Software, eine moderne Webseite oder einen Online-Shop brauchst — wir bauen seit Jahren genau das. Peacock ist ein Geschenk an die Community zurück.