> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cosmo.humanizing.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Playground

> Testen Sie Ihren Chatbot, ändern Sie Prompts, nutzen Sie Vorlagen und sehen Sie eine Vorschau des Chat-Widgets in Echtzeit

## Überblick

Der Playground ist Ihre Testumgebung zur Feinabstimmung des Verhaltens Ihres Agenten, bevor Sie ihn auf Ihrer Website bereitstellen. Hier können Sie den System-Prompt ändern, aus vorgefertigten Vorlagen auswählen und in Echtzeit sehen, wie Ihr Agent auf Fragen antwortet.

<Tip>
  Testen Sie Ihren Agenten immer im Playground, bevor Sie ihn bereitstellen. Es ist der schnellste Weg sicherzustellen, dass Ihr Agent sich wie erwartet verhält und genaue Antworten liefert.
</Tip>

## Zugriff auf den Playground

Navigieren Sie zum Playground, indem Sie Ihren Agenten in der Seitenleiste auswählen und im Agentenmenü auf **Playground** klicken. Der Playground öffnet sich mit einem geteilten Layout:

| Bereich             | Zweck                                                              |
| ------------------- | ------------------------------------------------------------------ |
| **Linker Bereich**  | Konfigurationssteuerung für Prompt-Bearbeitung und Einbettungscode |
| **Rechter Bereich** | Live-Vorschau des Chat-Widgets zum Testen                          |

***

## System-Prompt (Anweisungen)

Der System-Prompt, auch „Anweisungen" genannt, definiert, wie sich Ihr Agent verhält, antwortet und mit Benutzern interagiert. Er ist die zentrale Konfiguration, die die Persönlichkeit und Fähigkeiten Ihres Agenten formt.

### Was der System-Prompt steuert

Ihr System-Prompt beeinflusst:

* **Persönlichkeit**: Freundlich, professionell, technisch, locker
* **Wissensgrenzen**: Welche Themen der Agent besprechen sollte oder nicht
* **Antwortformat**: Länge, Struktur, Verwendung von Aufzählungen oder Absätzen
* **Begrüßungsverhalten**: Wie der Agent Benutzer willkommen heißt
* **Eskalationsregeln**: Wann der Agent vorschlagen soll, den menschlichen Support zu kontaktieren
* **Sprache und Ton**: Formeller vs. informeller Kommunikationsstil

### Den Prompt bearbeiten

Der Playground bietet einen Texteditor zum Ändern des System-Prompts Ihres Agenten:

1. Suchen Sie den Bereich **Anweisungen (System-Prompt)** im linken Bereich
2. Bearbeiten Sie den Text direkt im Textfeld
3. Klicken Sie auf **Speichern**, um Ihre Änderungen zu übernehmen

<Note>
  Änderungen werden nicht automatisch gespeichert. Die Schaltfläche „Speichern" wird aktiviert, wenn Sie ungespeicherte Änderungen haben. Ein Bestätigungsdialog erscheint, wenn Sie versuchen, die Seite mit ungespeicherten Änderungen zu verlassen.
</Note>

### Vollbild-Editor

Für längere Prompts oder bequemeres Bearbeiten verwenden Sie den Vollbild-Editor:

1. Klicken Sie auf die Schaltfläche **Im Editor öffnen** unter dem Textfeld
2. Bearbeiten Sie Ihren Prompt in der erweiterten Modalansicht
3. Klicken Sie auf **Änderungen übernehmen**, um zur Hauptansicht zurückzukehren
4. Klicken Sie auf **Speichern**, um Ihre Änderungen zu sichern

Der Vollbild-Editor bietet mehr Platz und ist besonders nützlich für komplexe System-Prompts mit mehreren Abschnitten.

### Widget-Kontext-Platzhalter

Wenn Ihr Agent als Chat-Widget eingebettet ist, können Sie Seiten- und benutzerdefinierten Kontext direkt im System-Prompt referenzieren. Fügen Sie Platzhalter mit doppelten geschweiften Klammern hinzu, zum Beispiel `{{ page_path }}` oder `{{ location }}`.

Eingebaute Seiten-Platzhalter sind automatisch verfügbar:

| Platzhalter         | Beschreibung                                    |
| ------------------- | ----------------------------------------------- |
| `{{ page_url }}`    | Aktuelle Seiten-URL ohne Query-String oder Hash |
| `{{ page_origin }}` | Aktuelle Site-Origin                            |
| `{{ page_path }}`   | Aktueller Pfad auf der Website                  |

Beispiel: Auf `https://example.com/products/widget?utm_source=newsletter#details` wird `{{ page_url }}` zu `https://example.com/products/widget`, `{{ page_origin }}` zu `https://example.com` und `{{ page_path }}` zu `/products/widget`.

Für benutzerdefinierte Werte bitten Sie Ihren Website-Entwickler, ein `context`-Objekt im Widget-Einbettungscode zu übergeben:

```html theme={null}
<script src="https://chat.humanizing.com/embed.js"></script>
<script>
  humanizing.init("YOUR_PUBLIC_KEY", {
    context: {
      location: "North Branch"
    }
  });
</script>
```

Verwenden Sie anschließend den passenden Platzhalter in Ihren Anweisungen:

```text theme={null}
You are answering for the {{ location }} location.
The visitor is currently on {{ page_path }}.
```

<Note>
  Kontextwerte werden nur dort eingefügt, wo Ihr Prompt passende Platzhalter enthält. Wenn ein Schlüssel fehlt, bleibt der Platzhalter sichtbar, damit Sie die Abweichung beim Testen erkennen.
</Note>

Die vollständige Einrichtung finden Sie unter [Widget-Kontext](/de/chat-widget/context).

***

## Prompt-Vorlagen

Vorlagen bieten vorkonfigurierte System-Prompts, die für gängige Anwendungsfälle optimiert sind. Sie sind ein guter Ausgangspunkt, den Sie direkt verwenden oder weiter anpassen können.

### Vorlagenkategorien

Der Vorlagenwähler organisiert Prompts in drei Gruppen:

| Kategorie                      | Beschreibung                                                                                                               |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| **Basisanweisungen**           | Der Standard-System-Prompt, der für die meisten Anwendungsfälle empfohlen wird. Liefert ausgewogene, hilfreiche Antworten. |
| **Vorlagen**                   | Vorgefertigte Prompts, die für spezifische Szenarien optimiert sind (Kundensupport, Vertrieb, technische Hilfe usw.)       |
| **Benutzerdefinierter Prompt** | Ihre eigenen benutzerdefinierten Anweisungen, entweder von Grund auf geschrieben oder aus einer Vorlage modifiziert        |

### Vorlagen verwenden

<Steps>
  <Step title="Vorlagenwähler öffnen">
    Klicken Sie auf das Dropdown-Menü im Bereich „Anweisungen", um die verfügbaren Vorlagen anzuzeigen.
  </Step>

  <Step title="Vorlage auswählen">
    Wählen Sie eine Vorlage aus der Liste. Das Prompt-Textfeld wird sofort mit dem Inhalt der ausgewählten Vorlage aktualisiert.
  </Step>

  <Step title="Anpassen (Optional)">
    Passen Sie den Vorlagentext an Ihre spezifischen Bedürfnisse an. Der Wähler wechselt automatisch zu „Benutzerdefinierter Prompt", sobald Sie Änderungen vornehmen.
  </Step>

  <Step title="Änderungen speichern">
    Klicken Sie auf „Speichern", um die neuen Anweisungen auf Ihren Agenten anzuwenden.
  </Step>
</Steps>

### Auf Standard zurücksetzen

Wenn Sie Änderungen vorgenommen haben und von vorn beginnen möchten, klicken Sie auf die **Zurücksetzen-Schaltfläche** (kreisförmiges Pfeil-Symbol) neben dem Vorlagenwähler. Dies stellt die Basisanweisungen-Vorlage wieder her.

<Warning>
  Das Zurücksetzen auf die Standardeinstellungen ersetzt Ihre aktuellen Anweisungen. Stellen Sie sicher, dass Sie benutzerdefinierten Text, den Sie behalten möchten, vorher kopieren.
</Warning>

### Automatische Vorlagenerkennung

Der Playground erkennt intelligent, wenn Ihre Anweisungen einer bekannten Vorlage entsprechen:

* Wenn Ihr Text exakt mit einer Vorlage übereinstimmt, wird diese Vorlage als ausgewählt angezeigt
* Wenn Sie ein beliebiges Zeichen ändern, wechselt der Wähler zu „Benutzerdefinierter Prompt"
* Die Auswahl von „Benutzerdefinierter Prompt" stellt Ihre zuvor gespeicherten Anweisungen wieder her

***

## Live-Widget-Vorschau

Der rechte Bereich zeigt eine voll funktionsfähige Vorschau Ihres Chat-Widgets. Dies ist dasselbe Widget, das Ihre Website-Besucher sehen werden.

### Ihren Agenten testen

Verwenden Sie die Vorschau, um die Antworten Ihres Agenten zu testen:

1. Geben Sie eine Frage in das Chat-Eingabefeld ein
2. Senden Sie die Nachricht, um zu sehen, wie Ihr Agent antwortet
3. Bewerten Sie die Qualität und Genauigkeit der Antwort
4. Passen Sie den System-Prompt bei Bedarf an
5. Wiederholen Sie den Vorgang, bis Sie mit den Ergebnissen zufrieden sind

<Tip>
  Testen Sie mit einer Vielzahl von Fragen, die Ihre tatsächlichen Benutzer stellen könnten. Schließen Sie Grenzfälle und Fragen ein, die außerhalb des beabsichtigten Bereichs Ihres Agenten liegen könnten, um zu sehen, wie er damit umgeht.
</Tip>

### Was Sie testen sollten

| Testkategorie              | Beispielfragen                                                            |
| -------------------------- | ------------------------------------------------------------------------- |
| **Kernwissen**             | Fragen, die Ihr Agent definitiv aus Ihren Quellen beantworten sollte      |
| **Grenzfälle**             | Mehrdeutige oder ungewöhnliche Fragen                                     |
| **Außerhalb des Bereichs** | Themen, die Ihr Agent nicht besprechen sollte                             |
| **Gesprächsfluss**         | Mehrteilige Konversationen mit Folgefragen                                |
| **Ton und Persönlichkeit** | Prüfen, ob die Antworten Ihrem gewünschten Kommunikationsstil entsprechen |

***

## Einbettungscode

Der Playground stellt den Einbettungscode-Snippet bereit, mit dem Sie das Chat-Widget zu Ihrer Website hinzufügen.

### Den Einbettungscode erhalten

Der Bereich „Einbettungscode" zeigt zwei Script-Tags:

```html theme={null}
<script src="https://your-widget-url/embed.js"></script>
<script>humanizing.init("YOUR_PUBLIC_KEY");</script>
```

### In die Zwischenablage kopieren

1. Suchen Sie den Bereich **Einbettungscode** am unteren Rand des linken Bereichs
2. Klicken Sie auf die **Kopieren-Schaltfläche** (Zwischenablage-Symbol) in der oberen rechten Ecke des Codeblocks
3. Der Code wird in Ihre Zwischenablage kopiert und ist bereit zum Einfügen in Ihre Website

<Note>
  Der Einbettungscode enthält den eindeutigen öffentlichen Schlüssel Ihres Agenten. Dieser Schlüssel identifiziert Ihren spezifischen Agenten und lädt dessen Konfiguration.
</Note>

### Wo der Code eingefügt werden sollte

Fügen Sie den Einbettungscode in den HTML-Code Ihrer Website ein, typischerweise an einer dieser Stellen:

| Stelle           | Am besten geeignet für                                                   |
| ---------------- | ------------------------------------------------------------------------ |
| Vor `</body>`    | Die meisten Websites – stellt sicher, dass die Seite zuerst geladen wird |
| Vor `</head>`    | Seiten, die das Widget sofort verfügbar brauchen                         |
| Über Tag-Manager | Seiten, die Google Tag Manager oder Ähnliches verwenden                  |

Detaillierte Bereitstellungsanweisungen finden Sie im [Bereitstellungsleitfaden](/de/agents/deployment).

***

## Änderungen speichern

Der Playground verfolgt alle Änderungen an der Konfiguration Ihres Agenten.

### Zustände der Speichern-Schaltfläche

| Zustand         | Erscheinungsbild    | Bedeutung                           |
| --------------- | ------------------- | ----------------------------------- |
| **Deaktiviert** | Ausgegraut          | Keine Änderungen zu speichern       |
| **Aktiviert**   | Aktiv               | Ungespeicherte Änderungen vorhanden |
| **Speichert**   | „Speichert..."-Text | Speichervorgang läuft               |
| **Gespeichert** | „Gespeichert"-Text  | Änderungen erfolgreich gespeichert  |

### Warnung bei ungespeicherten Änderungen

Wenn Sie versuchen, die Seite mit ungespeicherten Änderungen zu verlassen:

1. Ein Bestätigungsdialog erscheint
2. Wählen Sie **Ohne Speichern verlassen**, um Änderungen zu verwerfen
3. Wählen Sie **Speichern und verlassen**, um zuerst zu speichern und dann zu navigieren
4. Wählen Sie **Abbrechen**, um auf der Seite zu bleiben

<Tip>
  Gewöhnen Sie sich an, nach jeder bedeutsamen Änderung zu speichern. So können Sie schrittweise testen und wissen genau, welche Änderung das Verhalten des Agenten beeinflusst hat.
</Tip>

***

## Bewährte Methoden

<AccordionGroup>
  <Accordion icon="bullseye" title="Mit einer Vorlage beginnen">
    Beginnen Sie mit den Basisanweisungen oder einer relevanten Vorlage. Sie sind bereits für gängige Anwendungsfälle optimiert und bieten eine solide Grundlage.
  </Accordion>

  <Accordion icon="flask" title="Schrittweise testen">
    Nehmen Sie jeweils nur eine Änderung vor und testen Sie, bevor Sie weitere Änderungen vornehmen. So verstehen Sie genau, welche Auswirkung jede Änderung hat.
  </Accordion>

  <Accordion icon="clipboard-list" title="Eine Test-Checkliste führen">
    Pflegen Sie eine Liste mit Fragen, die Sie nach jeder Änderung testen. Nehmen Sie Ihre häufigsten Kundenfragen und bekannte Grenzfälle auf.
  </Accordion>

  <Accordion icon="pen" title="In Prompts spezifisch sein">
    Vage Anweisungen führen zu inkonsistenten Antworten. Statt „sei hilfreich" geben Sie an: „Gib Schritt-für-Schritt-Anleitungen, wenn du erklärst, wie etwas gemacht wird."
  </Accordion>

  <Accordion icon="shield" title="Grenzen setzen">
    Teilen Sie Ihrem Agenten ausdrücklich mit, welche Themen er vermeiden und wann er vorschlagen soll, den menschlichen Support zu kontaktieren. Dies verhindert unangemessene Antworten.
  </Accordion>

  <Accordion icon="book" title="Auf Ihre Wissensdatenbank verweisen">
    Erinnern Sie Ihren Agenten im System-Prompt daran, dass er aus der bereitgestellten Wissensdatenbank antworten soll. Dies verbessert die Genauigkeit und reduziert Halluzinationen.
  </Accordion>
</AccordionGroup>

***

## Beispiel-System-Prompts

### Kundensupport-Agent

```text theme={null}
You are a friendly customer support assistant for [Company Name].

Your role:
- Answer questions about our products and services
- Help customers troubleshoot common issues
- Guide users to relevant documentation

Guidelines:
- Always be polite and patient
- If you don't know the answer, say so and suggest contacting support@company.com
- Keep responses concise but thorough
- Use bullet points for step-by-step instructions

Never:
- Make promises about refunds or compensation
- Share internal company information
- Discuss competitors
```

### Technischer Dokumentationsassistent

```text theme={null}
You are a technical documentation assistant for [Product Name].

Your expertise:
- API documentation and usage examples
- Configuration and setup guides
- Troubleshooting common errors

Communication style:
- Use technical terminology appropriate for developers
- Provide code examples when relevant
- Be precise and accurate

When users ask about features not in the documentation:
- Clearly state that the feature isn't documented
- Suggest they check the changelog or contact the dev team
```

### Vertriebs-Vorqualifizierungs-Agent

```text theme={null}
You are a sales assistant for [Company Name].

Your goals:
- Answer questions about our products and pricing
- Help visitors understand which solution fits their needs
- Qualify leads by understanding their requirements

Guidelines:
- Be enthusiastic but not pushy
- Ask clarifying questions to understand needs
- Highlight relevant features based on their use case

For pricing questions:
- Provide general pricing tiers if available
- Encourage scheduling a demo for detailed quotes
- Offer to connect them with a sales representative
```

***

## Fehlerbehebung

<AccordionGroup>
  <Accordion icon="circle-exclamation" title="Änderungen werden in der Vorschau nicht angezeigt">
    Das Vorschau-Widget verwendet möglicherweise zwischengespeicherte Antworten. Versuchen Sie:

    1. Die Seite neu laden
    2. Die Konversation im Widget löschen
    3. Eine völlig neue Frage stellen
  </Accordion>

  <Accordion icon="floppy-disk" title="Speichern-Schaltfläche bleibt deaktiviert">
    Die Speichern-Schaltfläche wird nur aktiviert, wenn Änderungen erkannt werden. Stellen Sie sicher, dass Sie den Text tatsächlich geändert haben und nicht nur in das Textfeld geklickt haben.
  </Accordion>

  <Accordion icon="list-check" title="Vorlage wird nicht geladen">
    Wenn Vorlagen im Wähler nicht erscheinen:

    1. Laden Sie die Seite neu
    2. Überprüfen Sie Ihre Internetverbindung
    3. Kontaktieren Sie den Support, wenn das Problem weiterhin besteht
  </Accordion>

  <Accordion icon="robot" title="Agent gibt falsche Antworten">
    Wenn Antworten ungenau sind:

    1. Prüfen Sie, ob Ihre Wissensdatenbank die relevanten Informationen enthält
    2. Überprüfen Sie Ihren System-Prompt auf widersprüchliche Anweisungen
    3. Versuchen Sie, in Ihrem Prompt spezifischer bezüglich der Antwortgenauigkeit zu sein
    4. Fügen Sie relevante Frage-Antwort-Quellen für häufige Fragen hinzu
  </Accordion>
</AccordionGroup>

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Wissensquellen hinzufügen" icon="database" href="/de/sources/overview">
    Erweitern Sie das Wissen Ihres Agenten, indem Sie weitere Webseiten, Texte und Frage-Antwort-Inhalte hinzufügen.
  </Card>

  <Card title="Erscheinungsbild anpassen" icon="palette" href="/de/customization/styling">
    Passen Sie den visuellen Stil Ihres Agenten mit Farben, Hintergründen und Widget-Einstellungen an Ihre Marke an.
  </Card>

  <Card title="Auf Website bereitstellen" icon="code" href="/de/agents/deployment">
    Erfahren Sie, wie Sie Ihren Agenten auf Ihrer Live-Website einbetten.
  </Card>

  <Card title="Konversationen ansehen" icon="messages" href="/de/agents/conversations">
    Überwachen Sie, wie Benutzer mit Ihrem bereitgestellten Agenten interagieren.
  </Card>
</CardGroup>