liveBildungsbrandstifter
Bildungsbrandstifter KI-Showcase & Beratungswebsite
Next.js 15 Website mit KI-Chat-Demo für Unterrichtsmaterial, Prompts und Workshop-Agenden; zentrale Präsentation von Angeboten, Team und Referenzen.
Problem & Lösung
Herausforderung
- Bildungsbrandstifter brauchte eine moderne Web-Präsenz, die KI-Kompetenz und Leistungsangebot sichtbar macht.
- Ziel: Leads aus dem DACH-Bildungssektor gewinnen, Referenzen bündeln und eine sichere KI-Demo bereitstellen.
Lösung
Next.js Marketing Site mit KI-Assistent
- Interaktive KI-Chat-Demo mit Artefakten (Lehrmaterial, Prompts, Workshop-Agenden) via OpenAI GPT-4o.
- Designsystem auf Tailwind/shadcn.ui mit animierten Sektionen, Referenzen-Chronik und Angebotsdetailseiten.
- Mehrseitige Struktur: Home, Angebote inkl. Unterseiten, Team, Netzwerk, Referenzen, Kontakt.
discovery
- Content-Architektur, Marken-Tone-of-Voice, KI-Use-Case-Definition.
build
- Next.js 15 + React 19 + Tailwind v4; shadcn/ui Cards; animierter Cursor/Reveal-Scroll.
- API-Route /api/chat mit Tool-Aufrufen für Lehrmaterial, Prompts und Workshop-Agenden; Markdown-Rendering und Streaming.
rollout
- Deployment auf Vercel (tbd), Monitoring/Tracking vorbereitet, Content-Handbook für Updates.
Ergebnisse
Ergebnisse
- Live-Demo zeigt KI-Kompetenz (Unterrichtsmaterial, Prompts, Agenden) direkt im Browser.
- Klare Angebots- und Referenzstruktur für Bildungsorganisationen.
- Wiederverwendbares UI-System für neue Inhalte und Unterseiten.
Risiken & Mitigation
- AI-Antworten durch Systemprompt und Tool-Auswahl begrenzt; Artefakt-Streaming mit Statusindikatoren.
- Fehler/Rate-Limits werden als UI-Fehlermeldungen angezeigt; kein Datenverlust.
- Content statisch versioniert; keine sensiblen Daten im Client gespeichert.
Features & Stack
Features
- Hero mit animiertem Cursor/Noise-Design und Marquee
- Angebotskacheln mit Highlights und Deep-Link-Unterseiten
- Referenzen-Zeitstrahl 2022–2025
- Live KI-Chat mit Artefakt-Panel (Markdown, Agenda, Prompt)
- Kontakt-CTA sowie Netzwerk- und Team-Sektionen
- Responsive Layout mit Custom Accent Theme
Stack
Next.js 15React 19Tailwind CSS 4TypeScriptai-sdk-tools + Vercel AI SDKOpenAI GPT-4oshadcn/uiFramer Motion
Integrationen
OpenAI GPT-4o via Vercel AI SDKai-sdk-tools artifacts/storeSupabase SSR client (prepared, optional)Email mailto Kontakt-FlowVercel Deployment (tbd)
Daten, Compliance & Team
Datenquellen
- Statisches Marketing-Copy in der App Router Struktur
- User-Eingaben im KI-Chat (keine Persistenz)
- Referenzen-Array in src/data/project-references.ts
- Designsystem Tokens/Theme Variablen
Compliance
- Keine dauerhafte Speicherung; Chat-Eingaben werden nur zur API-Verarbeitung gesendet (bitte keine sensiblen Daten).
- Browser-Konsole für Demo; Server-Logs ohne PII (tbd Prod Setup).
Team
Produkt/Content Lead · 30 %
Frontend Engineer · 40 %
AI Engineer · 30 %
Nächster Schritt
Ein ähnliches Projekt starten?
Wir definieren mit Ihnen Ziele, KPIs und einen realistischen Go-Live.