> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/mit-ki-erstellen/overview.md).

# Überblick

{% hint style="warning" %}
🚧 **Frühzugang.** Build with AI wird schrittweise eingeführt und mit jedem Release verbessert. Etwas unklar, fehlt etwas oder ist etwas kaputt? [Sag es uns](/experience-cloud/experience-cloud-de/hilfe/how-do-i-contact-support.md): Dein Feedback beeinflusst direkt, was wir als Nächstes verbessern.
{% endhint %}

Beschreiben Sie in einfachen Worten, was Sie möchten, und Ihr KI-Assistent (Claude, Cursor oder GitHub Copilot) fügt Ihren Experience-Site-Seiten echte, funktionsfähige Avonni-Komponenten hinzu. Zwei Tools machen das möglich:

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>🧠 Avonni MCP-Server</strong></td><td>Ein gehosteter Dokumentationsdienst, der dem Assistenten präzises, stets aktuelles Wissen über alle 44 Experience Cloud Components vermittelt: ihre Eigenschaften, Interaktionen und ihr Styling.</td><td></td></tr><tr><td><strong>🛠️ Avonni Skills</strong></td><td>Schritt-für-Schritt-Workflows, die dem Assistenten beibringen, wie man Avonni-Komponenten zu einer Site-Seite hinzufügt und korrekt konfiguriert.</td><td></td></tr></tbody></table>

{% hint style="success" %}
**Kurz gesagt: Skills sagen dem Agenten, was zu tun ist; das MCP sagt ihm, was wahr ist.** Das eine ohne das andere liefert schlechtere Ergebnisse. Installieren Sie beide.
{% endhint %}

## Warum Sie beide brauchen

KI-Assistenten werden mit öffentlichen Daten trainiert, daher ist ihr Wissen über Avonni unvollständig und veraltet. Wenn sie auf sich allein gestellt sind, erfinden sie Eigenschaftsnamen, raten bei Interaktionstypen und erzeugen Seiteninhalte, die Experience Builder ablehnt. Das Ergebnis sieht plausibel aus, funktioniert aber nicht.

Die beiden Tools lösen unterschiedliche Hälften des Problems:

|                   | Was es bietet                                                                                                                                                     | Was es behebt                                                                                                                 |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **Avonni MCP**    | *Wissen.* Präzise Komponentendokumentation, Interaktionen und Styling für das `Experience` Paket sowie die `dynamischen`, `Flow` und `LWC` Pakete.                | Keine erfundenen Eigenschaften oder Interaktionsnamen mehr. Der Assistent sucht die echte Konfiguration nach, statt zu raten. |
| **Avonni Skills** | *Prozess.* Workflows zum Erstellen und Aktualisieren jedes Avonni-Artefakttyps sowie `avonni-architect`, das Anwendungsfälle mit mehreren Artefakten koordiniert. | Der Assistent erzeugt gültige Seiteninhalte und folgt der richtigen Abfolge von Schritten, statt zu improvisieren.            |

## Heute schnell, morgen wartbar

Ein KI-Assistent könnte Ihre Portal-Funktionen auch schnell als benutzerdefinierten Code erstellen. Der Unterschied zeigt sich nach der Demo: **benutzerdefinierter Code muss für immer von Ihnen gewartet werden, und auf einer kundenorientierten Website ist dieses Risiko öffentlich.** Avonni-Komponenten vermeiden die Falle:

<table><thead><tr><th width="280"></th><th></th></tr></thead><tbody><tr><td>✍️ <strong>Konfiguration statt Code</strong></td><td>Ein Prompt erzeugt Seiteninhalte: welche Komponenten, welche Daten, welche Interaktionen, mit dem Branding Ihrer Website über Design-Tokens. Kein benutzerdefiniertes JavaScript läuft vor Ihren Kunden.</td></tr><tr><td>🛡️ <strong>Die Komplexität liegt bei Avonni</strong></td><td>Data Table, Kanban, Calendar und der Rest leben im verwalteten Paket: getestet, versioniert und mit jeder Version aktualisiert. Aktualisieren Sie das Paket, und das, was die KI erstellt hat, funktioniert weiter.</td></tr><tr><td>🧩 <strong>Ihre Site-Builder behalten die Kontrolle</strong></td><td>Was die KI erstellt, ist eine normale Experience-Builder-Seite, die dieselben Komponenten verwendet, die Ihr Team bereits manuell konfiguriert. Jeder kann sie öffnen, verstehen und weiterentwickeln.</td></tr></tbody></table>

## Was der Assistent erzeugt

Die `avonni-experience-components` Skill arbeitet an der Inhaltsdatei Ihrer Site-Seite. Er fügt die Avonni-Komponente der Seite hinzu und konfiguriert ihre Daten, Darstellung und Interaktionen. Es wird nichts bereitgestellt: Sie überprüfen die Datei, stellen sie mit Ihrem üblichen Prozess bereit, öffnen dann die Seite im Experience Builder, um das Ergebnis zu prüfen, und veröffentlichen die Site.

## Von einer einzelnen Komponente zu einem kompletten Anwendungsfall

Echte Anforderungen enden selten bei einem Artefakt. Der `avonni-architect` Skill verwandelt ein Geschäftsergebnis in einen Plan und ruft dann die richtigen Skills in Abhängigkeitsreihenfolge auf, sodass jedes Teil korrekt mit den anderen verbunden ist.

{% hint style="info" %}
**Beispiel:** *"Fügen Sie meiner Support-Portal-Seite eine Case-Liste hinzu und einen Bildschirm-Flow zum Erstellen eines Cases, der von einem Button aus geöffnet wird."* Der Architekt erstellt zuerst den Flow und fügt dann die Komponenten zur Seite hinzu, wobei der Button so verdrahtet wird, dass er diesen Flow öffnet.
{% endhint %}

<a class="button primary" data-icon="plug">In Minuten einrichten</a>

## In diesem Abschnitt


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/mit-ki-erstellen/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.