KI-Kompass #09 - for mediation, coaching and counselling
(took place on DI, 23.09.2025, 12-13 o'clock)

Build your own AI web applications - Artefacts from Claude

Summary

What was it about on 23 September 2025?

• We are building a small web app with AI - concrete one Quiz to the topic Mediation.

• Instead of programming ourselves, we let Claude (one AI) the Code write.

• Goal: A Appwhich Customers, Participants or Website visitors can use.

• Use: Education, Learning control, Marketing (more Traffic to the Website), Newsletter & LinkedIn.

Why apps instead of just chat?

• chat = Question-Answer in Text. Fast, but restricted.

• App = Buttons, Input fields, Evaluation, View - so interactive.

• With AI we build "dumb" apps (without AI logic in the app), but which useful are.

• Possible later: Apps with AI in them (e.g. free answers Rate automatically).

Our example: A mediation quiz

• Contents: Questions from the Mediation training.

• Level: Beginners, Medium, Pro.

• Question form: Multiple Choice (easy to analyse).

• Result: Score on End (Feedback at the end, not after each question).

• Target group:

  • Before the training (orientation)

  • In training (exercise)

  • After the training (refresher)

How to prompt Claude for your app

• Start prompt (simply put):

  • "Build me a interactive quiz to the topic Mediation."

  • "In the end, a Evaluation with Score appear."

  • "Please question before 5 yes/no questionsto complete the quiz. specify (level, number of questions, feedback at the end, etc.)."

  • "I should use the app embed on my website can."

• Why like this?

  • The 5 Queries ensure that the App fits.

  • Start small (e.g. 5 questions). Afterwards Improve step by step.

What Claude produces

• Code (mostly React/JavaScript) and a Artefact (ready-to-run mini app in a Windows).

• You can use the Test the app immediately: Select level → Click questions → Result see.

• You can use the Code view view and Versions jump back (Versioning).

Share & Embed (Publish & Embed)

• Share via link:

  • Publish click → Link copy → send.

  • Only the app is visible, not the Chat history.

• Embed in website:

  • Embed code copy → in WordPress (or other CMS) as Code block insert.

  • Unlock domain (security function): The app only runs on released domains.

• Unpublish: Link again Deactivateif you use the app not want more publicly.

• Hint: Publish/Link can be used for free accounts be restricted. Building often goes also free of chargethat Share sometimes paid only.

Typical improvements (iterative building)

• E-mail function:

  • Idea: Results at the end by e-mail dispatch.

  • In practice: Mail dispatch needs Configuration (sender, server).

  • Emergency solution: Mailto link (only opens the own mail programme).

  • Learning effect: "Perfect" in the AI response reads not "ready & error-free". Test it!

• Resolution of the questions:

  • According to the result correct answers display - increases the Learning effect.

• More content:

  • Further questions, New levels, Pictures, Explanatory texts.

• Data acquisition (with caution):

  • Name, e-mail, Score save - only with Data protection & Consent.

What do I need to consider when embedding in WordPress?

• Embed code into a Code block (not "normal" text block).

• React raw code not simply copy it into WordPress - this results in Error.

• Use the embed code from Claude or host the Ready-built React app on your Server(advanced).

• Changes about the app? Embed code if applicable. update and Reload page.

Security, data protection & limits

• Data protection:

  • Say user:inside, what the app Stores (often nothing) and where.

  • If you data collect (e.g. Score + e-mail), you need Legal basis and Notes.

• Security:

  • Front ends (like our quiz) are relatively harmless.

  • More complex apps need Security expertise (login, roles, server, databases).

• Stability:

  • Embeddings are mostly robust.

  • External services can Change - therefore Test regularly.

• Licences & contents:

  • With Open source building blocks the Licences note.

  • Own content (questions/logos) are yours Topic.

Concrete application ideas for mediation, coaching & counselling

• Education: Quiz to the Learning control, Self-tests before modules, Final check.

• Website marketing: "How fit for mediation are you?" - Lead magnet with E-mail result.

• Customer preparation: "Am I ready for mediation?" - Clarify expectations.

• Organisational conflicts: Topic-specific quizzes (e.g. Shuttle mediation, Phase model).

• Events: Live quiz for Interaction and Data points (only GDPR-compliant!).

Step-by-step: Your first app

1. define idea: Topic, Goal, Target group.

2. write promptlyApp type (Quiz), Level, Number of questions, Feedback, Embedding.

3. answer AI queries: Clear & short.

4. testing: All levels click through, Result check.

5. share: Link or Embed code utilise.

6. iterate: Resolution, Design, e-mail, Data protection notice supplement.

7. observe: Utilisation view, Improve questions.

Conclusion - the most important points

• AI builds you fast one functioning mini app.

• Start small, test, touch up - how it works good.

• Embedding into the Website is simple and practical.

• Data protection & Security think alongespecially with Emails and Storage.

• Learning and marketing potential is Large - especially for Mediation, Coaching, Counselling.

Checklist - before you publish

• Goal of the app (learning? marketing? fun?).

• Prompt clean (topic, level, number of questions, result at the end).

• Questions checked (Expertise, Difficulty, Error).

• Evaluation understandable (Scoreif necessary. Resolution)

• Embed code inserted correctly (Domain unlocked).

• Data protection notice available (what is saved?).

• E-mail function tested (or deactivatedif not necessary).

• Mobile view checked (smartphone use!).

• Version documented (for changes keep track).

• Feedback channel linked (e.g. Contact or Form).

Glossary - technical terms short & simple

Artefact (Artifact): From the AI generated resulthere the Ready-to-run app in a separate window.

Backend: Part in the background (server), the Users do not see.

Branding: External appearance yours Brand (logo, style, tone).

CMS (Content Management System)System like WordPress to the Building websites.

Claude: AI platform (similar to ChatGPT), with which you can Apps can build.

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

Data protection (Privacy / Data Protection): Protection from personal data.

Debugging: Find errors and repair.

Domain: Address of your website (e.g. my-page.com).

Sending emails (Email Sending): Automatic sending from Results per e-mail.

Embed code: Code snippetsto optimise the App into the Website to be installed.

Front end: Partthe Users see (Browser).

JavaScript: Programming languagewith the Web apps run.

AI (Artificial Intelligence)Computers that think along and Texts/Code generate.

mailto link: Opens the own mail programme with pre-filled e-mail.

Multiplayer: Several persons use a App at the same time.

Multiple Choice: Question format with predefined answers.

Open Source: Free Softwarebut with Licencesthat you note must.

PDF exportContents as PDF spend.

Prompt: Instruction to the AI.

Quiz: Questions with Possible answersmostly Multiple Choice.

React: JavaScript library to the Building web apps.

Security (Security)Protection from Attacks, Errors and Data leaks.

TestingCheck whether everything right works.

TypeScript: JavaScript with additional rules (helps against Error).

Publish / Unpublish (Publish / Unpublish): Link release or Deactivate.

Versioning: Changes on Code as Versions save.

Web app (web application): Small software in the Browser.

Workflow: Procedure from Work steps.

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!