9. Fortgeschritten: API, Plugins & Kollaboration
Perchance in deinem Stack: API, Mini-Apps & Team-Workflows professionell nutzen
Perchance ist mehr als ein Editor im Browser. Mit der API (siehe das offizielle API-Tutorial
) bringst du Generatoren in Websites, Apps und Build-Pipelines. Dieser Abschnitt zeigt Einbindungsmuster, Team-Setups und Prompts für saubere Zusammenarbeit. Für Grundlagen siehe Abschnitt 2 und den Tool-Überblick in Abschnitt 3
.
9.1 Wann die API sinnvoll ist
- Serien-Output automatisieren: z. B. 50–500 Textvarianten oder Namen für einen Content-Release.
- UX-Experimente & Live-Varianten: Generatoren als Feature Toggles im Frontend.
- Prototyping & Demos: Fake-Daten, Microcopy-Tests, schnelle A/B-Varianten.
- CMS-Builds: Inhalte bei Build-Zeit „vorgenerieren“ und gecacht ausliefern (siehe 9.3).
9.2 Frontend-Einbindung (Minimalbeispiel)
<button id="gen">Neue Variante</button> <pre id="out">—</pre> <script> async function generate() { const res = await fetch("https://perchance.org/api/generateList", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ generatorName: "dein-generator-slug", listName: "output", count: 1 }) }); const data = await res.json(); document.getElementById("out").textContent = (data?.items || []).join("\n"); } document.getElementById("gen").addEventListener("click", generate); </script>
Gute Praxis: Debounce-Click, Fehlerzustände anzeigen (Timeout/Retry), Ergebnisse im Speicher cachen (Session Storage). Mehr API-Überblick in Abschnitt 3.3
.
9.3 Backend-Proxy + Caching (Node/Express)
import express from "express"; import fetch from "node-fetch"; const app = express(); app.use(express.json()); // Simple in-memory cache (ersetze durch Redis/Memcached im Prod) const cache = new Map(); const key = (g, l, n) => `${g}|${l}|${n}`; app.post("/gen", async (req, res) => { const { generatorName, listName = "output", count = 3 } = req.body || {}; const cacheKey = key(generatorName, listName, count); if (cache.has(cacheKey)) return res.json(cache.get(cacheKey)); const upstream = await fetch("https://perchance.org/api/generateList", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ generatorName, listName, count }) }); if (!upstream.ok) return res.status(502).json({ error: "Upstream failed" }); const data = await upstream.json(); cache.set(cacheKey, data); // Cache-Hit fürs nächste Mal res.json(data); }); app.listen(3000, () => console.log("API proxy on :3000"));
Warum Proxy?
- Rate Limiting zentral steuern (pro IP/User/Route).
- Observability: Logs & Metriken (Hits, Fehler, Latenz).
- Redaktionsregeln: Block-/Positivlisten injizieren (siehe Abschnitt 7
- ).
9.4 „Precompute“ für CMS/Static Sites
- Build-Time-Generation: Bei Next.js/Gatsby/Nuxt während
build100–500 Variants holen, als JSON-Datei ins Repo legen. - Edge-Caches: Varianten statisch ausliefern; zyklisch (z. B. täglich) neu generieren.
- Diff-fähig: Änderungen sind im Git-Verlauf sichtbar (Review/Rollback). Mehr zu Performance in Abschnitt 8
- .
9.5 Team-Setup: Versionierung & Reviews
- Repo-Struktur:
/generators/<topic>.txt(Rohdefinition) +/tests/<topic>.spec.js(Stichproben-Checks). - PR-Checks: CI ruft per Script 50 Outputs ab, prüft Duplikatrate, verbotene Begriffe, Länge.
- Changelogs: Jede Änderung an Listen wird geloggt (Datum, Autor:in, Zweck).
- „Sauberes Original“ vs. Remix: Bewahre eine Primary-Version; Remixes als Branches.
9.6 Mini-Apps & „Plugins“
- Microsites: Kleine Tools (z. B. „NPC-Generator“, „CTA-Varianten“) mit deinem Proxy aus 9.3.
- Embeds: Ein einfacher Fetch +
<pre>reicht oft. Später UI verfeinern (Dropdowns, Filter, Copy-Buttons). - Workflows koppeln: Ergebnisse automatisch in Google Sheets, ein CMS oder Notion schreiben.
9.7 Sicherheit & Governance (kurz)
- Input-Validierung: Erlaube nur erwartete
listName/count-Werte. - Ausgabe-Filter: Post-Processing: Profanity-Filter, Längenbeschränkungen, Blacklist aus Abschnitt 7
- .
- Observability: Protokolliere Prompt-„Kerndaten“ ohne personenbezogene Inhalte.
Copy-&-Paste: Snippets & Prompts für Teams
A) CI-Test (Node) – einfache Qualitätsprobe
import fetch from "node-fetch"; const cases = [ { generatorName: "dein-generator-slug", listName: "output", count: 50 } ]; const banned = [/marke/i, /telefon/i]; // Beispiel-Blacklist (async () => { for (const c of cases) { const r = await fetch("http://localhost:3000/gen", { // Proxy aus 9.3 method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(c) }); const { items = [] } = await r.json(); const dups = items.length - new Set(items).size; const hits = items.filter(x => banned.some(rx => rx.test(x))); if (dups > 0 || hits.length > 0) { console.error("Qualitätscheck fehlgeschlagen:", { dups, hits: hits.slice(0, 3) }); process.exit(1); } console.log("OK:", items.length, "Varianten geprüft"); } })();
B) Review-Generator (Perchance) – Vier-Augen-Prinzip vorbereiten
check Ist die Tonalität inklusiv und sachlich? Enthält ein Output personenbezogene Daten? Tauchen Marken/Logos auf? Ist die Perspektive klar (overhead/close-up/ultra wide)? output Review-Frage: [check]
C) „Briefing aus Listen“ – für konsistente Microcopy
ziel Signup-Reibung reduzieren Fehlertexte vereinheitlichen Produktnutzen klarer machen ton freundlich und direkt nüchtern-technisch präzise und knapp format 3 Varianten, je ≤ 80 Zeichen aktive Verben keine Marken / keine personenbezogenen Daten output Schreibe [format] für das Ziel: [ziel]. Ton: [ton].
D) Frontend-UI-Seed (HTML) – Copy-Button & Zähler
<button id="gen">Variante</button> <button id="copy">Copy</button> <small id="count">0</small> <pre id="out">—</pre> <script> let n = 0; async function generate() { /* wie in 9.2 */ } document.getElementById("gen").onclick = async () => { await generate(); document.getElementById("count").textContent = ++n; }; document.getElementById("copy").onclick = async () => { const txt = document.getElementById("out").textContent; try { await navigator.clipboard.writeText(txt); } catch {} }; </script>
Interne Verlinkung & Nächster Schritt
- Syntax & Struktur: Abschnitt 2
- Feature-Überblick/Editor & API: Abschnitt 3
- Schnellstart & Beispiele: Abschnitt 5
- Performance & Alternativen: Abschnitt 8
- Weiter geht’s: Abschnitt 10 – Startpaket: Links & Ressourcen
Direkt testen: API-Tutorial
· Welcome perchance.org/welcome · Tutorial perchance.org/tutorial