KI-Kompass #09 – für Mediation, Coaching und Beratung
(fand am DI, 23.09.2025, 12-13 Uhr statt)

Eigene KI-Webanwendungen bauen – Artefakte von Claude

Summary

Worum ging es am 23.09.2025?

• Wir bauen eine kleine Web-App with AI – konkret ein Quiz zum Thema Mediation.

• Statt selbst zu programmieren, lassen wir Claude (eine AI) den Code write.

• Ziel: Eine Appwhich Kund:innen, Teilnehmende or Website-Besucher:innen nutzen können.

• Einsatz: Education, Lernkontrolle, Marketing (mehr Traffic to the Website), Newsletter & LinkedIn.

Warum Apps statt nur Chat?

• chat = Frage–Antwort in Text. Schnell, aber eingeschränkt.

• App = Buttons, Eingabefelder, Auswertung, View – also interaktiv.

• Mit KI bauen wir „dumme“ Apps (ohne KI-Logik in der App), die aber useful are.

• Später möglich: Apps mit KI drin (z. B. freie Antworten automatisch bewerten).

Unser Beispiel: Ein Mediation-Quiz

• Contents: Fragen aus der Mediation training.

• Level: Beginners, Medium, Pro.

• Frageform: Multiple Choice (leicht auszuwerten).

• Result: Punktzahl on End (Feedback zum Schluss, nicht nach jeder Frage).

• Target group:

  • Vor der Ausbildung (Orientierung)

  • In der Ausbildung (Übung)

  • Nach der Ausbildung (Auffrischung)

So promptest du Claude für deine App

• Start-Prompt (einfach formuliert):

  • „Baue mir ein interaktives Quiz zum Thema Mediation."

  • „Am Ende soll eine Auswertung with Punktzahl erscheinen.“

  • „Bitte question before 5 Ja/Nein-Fragen, um das Quiz zu präzisieren (Level, Anzahl Fragen, Feedback am Ende usw.).“

  • „Die App soll ich auf meiner Website einbetten können.“

• Warum so?

  • The 5 Rückfragen sorgen dafür, dass die App passt.

  • Klein starten (z. B. 5 Fragen). Danach schrittweise verbessern.

Was Claude produziert

• Code (meist React/JavaScript) und ein Artefakt (fertig lauffähige Mini-App in einem Windows).

• Du kannst die App sofort testen: Level wählen → Fragen klicken → Result see.

• Du kannst die Code-Ansicht ansehen und Versionen zurückspringen (Versionierung).

Teilen & Einbetten (Publish & Embed)

• Per Link teilen:

  • Publish klicken → Link kopieren → verschicken.

  • Nur die App ist sichtbar, not the Chatverlauf.

• In Website einbetten:

  • Einbettungscode (Embed Code) kopieren → in WordPress (oder anderes CMS) als Code-Block einfügen.

  • Domain freischalten (Sicherheitsfunktion): Die App läuft nur auf freigegebenen Domains.

• Unpublish: Link wieder deaktivieren, wenn du die App not mehr öffentlich willst.

• Hint: Veröffentlichen/Link kann bei kostenlosen Accounts eingeschränkt sein. Bauen geht oft auch gratisthat Share sometimes nur bezahlt.

Typische Verbesserungen (Iterativ bauen)

• E-Mail-Funktion:

  • Idee: Results am Ende per E-Mail versenden.

  • In der Praxis: Mail-Versand needs Konfiguration (Absender, Server).

  • Notlösung: Mailto-Link (öffnet nur das eigene Mailprogramm).

  • Learning effect: „Perfekt“ in der KI-Antwort heißt not „fertig & fehlerfrei“. Testen!

• Auflösung der Fragen:

  • Nach dem Ergebnis richtige Antworten anzeigen – erhöht den Learning effect.

• Mehr Inhalte:

  • Weitere Fragen, neue Level, Pictures, Erklärtexte.

• Data acquisition (mit Vorsicht):

  • Name, e-mail, Punktzahl speichern – nur mit Data protection & Einwilligung.

Was ist beim Einbetten in WordPress zu beachten?

• Einbettungscode in einen Code-Block (nicht „normaler“ Textblock).

• React-Rohcode not einfach in WordPress kopieren – das ergibt Error.

• Nutze den Embed-Code von Claude or hoste die fertig gebaute React-App auf deinem Server(fortgeschritten).

• Changes an der App? Embed-Code if applicable. aktualisieren and Seite neu laden.

Sicherheit, Datenschutz & Grenzen

• Data protection:

  • Sag Nutzer:innen, what die App speichert (oft nothing) and where.

  • Wenn du data sammelst (z. B. Punktzahl + e-mail), brauchst du Rechtsgrundlage and Notes.

• Security:

  • Frontends (wie unser Quiz) sind relativ harmlos.

  • Komplexere Apps need Security-Know-how (Login, Rollen, Server, Datenbanken).

• Stability:

  • Einbettungen sind meist robust.

  • Externe Dienste können sich Change – daher regelmäßig testen.

• Lizenzen & Inhalte:

  • With Open-Source-Bausteinen the Lizenzen beachten.

  • Eigene Inhalte (Fragen/Logos) sind yours Topic.

Konkrete Einsatzideen für Mediation, Coaching & Beratung

• Education: Quiz to the Lernkontrolle, Selbsttests vor Modulen, Abschluss-Check.

• Website-Marketing: „Wie mediationsfit bist du?“ – Lead-Magnet with E-Mail-Ergebnis.

• Kundenvorbereitung: „Bin ich bereit für Mediation?“ – Erwartungen klären.

• Organisationskonflikte: Themenspezifische Quizzes (z. B. Shuttle mediation, Phase model).

• Events: Live-Quiz for Interaction and Datenpunkte (nur DSGVO-konform!).

Schritt-für-Schritt: Deine erste App

1. Idee festlegen: Topic, Goal, Target group.

2. Prompt schreiben: App-Typ (Quiz), Level, Anzahl Fragen, Feedback, Einbettung.

3. KI-Rückfragen beantworten: Klar & kurz.

4. Testen: Alle Level click through, Result check.

5. Teilen: Link or Einbettungscode utilise.

6. Iterieren: Auflösung, Design, e-mail, Datenschutz-Hinweis supplement.

7. Beobachten: Utilisation view, Fragen verbessern.

Fazit – die wichtigsten Punkte

• AI baut dir fast one funktionierende Mini-App.

• Klein starten, test, nachbessern – so wird’s good.

• Einbettung in die Website is simple and practical.

• Data protection & Security mitdenken, besonders bei E-Mails and Speicherung.

• Lern- und Marketing-Potenzial is Large – gerade für Mediation, Coaching, Counselling.

Checkliste – bevor du veröffentlichst

• Goal der App klar (Lernen? Marketing? Spaß?).

• Prompt sauber (Thema, Level, Anzahl Fragen, Ergebnis am Ende).

• Questions geprüft (Fachlichkeit, Difficulty, Error).

• Auswertung verständlich (Punktzahl, ggf. Auflösung)

• Einbettungscode korrekt eingefügt (Domain freigeschaltet).

• Datenschutzhinweis vorhanden (was wird gespeichert?).

• E-Mail-Funktion getestet (oder deaktiviert, wenn nicht nötig).

• Mobilansicht geprüft (Smartphone-Nutzung!).

• Version dokumentiert (bei Änderungen nachhalten).

• Feedback-Kanal verlinkt (z. B. Contact us or Formular).

Glossar – Fachbegriffe kurz & einfach

Artefakt (Artifact): Von der KI erzeugtes Ergebnis, hier die fertig lauffähige App in einem eigenen Fenster.

Backend: Teil im Hintergrund (Server), den Nutzende nicht sehen.

Branding: Außenauftritt yours Brand (Logo, Stil, Ton).

CMS (Content Management System): System wie WordPress to the Bauen von Websites.

Claude: KI-Plattform (ähnlich ChatGPT), mit der man Apps bauen kann.

CRM (Customer Relationship Management): System to the Kundenverwaltung.

Datenschutz (Privacy / Data Protection): Protection from personenbezogenen Daten.

Debugging: Fehler finden and reparieren.

Domain: Address deiner Website (z. B. meine-seite.de).

E-Mail-Versand (Email Sending): Automatisches Senden from Results per e-mail.

Einbettungscode (Embed Code): Code-Schnipsel, um die App in die Website einzubauen.

Frontend: Part, den Nutzende sehen (Browser).

JavaScript: Programmiersprache, mit der Web-Apps run.

KI (Künstliche Intelligenz / Artificial Intelligence): Computer, die mitdenken and Texte/Code generate.

mailto-Link: Öffnet das eigene Mailprogramm with vorausgefüllter E-Mail.

Multiplayer: Mehrere Personen nutzen eine App gleichzeitig.

Multiple Choice: Frageformat with vorgegebenen Antworten.

Open Source: Freie Softwarebut with Lizenzen, die man note must.

PDF-Export: Inhalte als PDF ausgeben.

Prompt: Instruction an die AI.

Quiz: Questions with Antwortmöglichkeiten, meist Multiple Choice.

React: JavaScript-Bibliothek to the Bauen von Web-Apps.

Security (Security): Schutz vor Angriffen, Fehlern and Datenlecks.

Testen (Testing): Prüfen, ob everything right works.

TypeScript: JavaScript with zusätzlichen Regeln (hilft gegen Error).

Veröffentlichen / Zurücknehmen (Publish / Unpublish): Link freigeben or deaktivieren.

Versionierung (Versioning): Changes on Code as Versionen speichern.

Web-App (Web Application / Webanwendung): Kleine Software in the Browser.

Workflow: Ablauf from Arbeitsschritten.

AI compass for mediation, coaching and counselling?

• Mediation, coaching and counselling take place in a different context today than they did 10 years ago.
• We and our clients use tools that were unthinkable five years ago. Our training, mental concepts and practical interventions will (have to) adapt to this.
• But not only our counselling environment, but also our business environment has already changed considerably: Anyone who works successfully and happily as a mediator, coach or counsellor today can be sure that circumstances and conditions have contributed to this that no longer exist today.
• The impact of this change on training in mediation, coaching and counselling (of people) cannot be estimated at the present time.
• Our routines in training and counselling are more for our mental well-being („Hide“), but by no means for cleverly navigating this unknown terrain, which hardly seems worth exploring today because it threatens to be completely different tomorrow.

Nevertheless, the AI compass wants to make steps possible.

Because those who learn to move in the unknown today,

is in good practice for tomorrow.

Want to find out more about mediation and conflict management here at INKOVEMA? Then subscribe to our Editorial monthly mailing!