Einrichtung

Installieren Sie die Avonni Skills und verbinden Sie den Avonni-MCP-Server mit Ihrem KI-Assistenten.

🚧 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: Dein Feedback beeinflusst direkt, was wir als Nächstes verbessern.

Zwei Dinge zu verbinden: die Avonni Skills und den Avonni MCP-Server. Zuerst ein Satz an Voraussetzungen, dann wählen Sie Ihren Client.

Voraussetzungen

Die Skills schreiben Dateien auf Ihrem Rechner und arbeiten mit Ihrer Salesforce-Organisation, daher benötigt jeder Client dieselbe Grundlage, einschließlich der Claude-Desktop-App:

• Node.js 18 oder neuer. Die Skills führen lokale Skripte aus; ohne Node.js können sie überhaupt nicht ausgeführt werden.
• Salesforce CLI, bei Ihrer Org authentifiziert. Es ermöglicht die org-bewussten Schritte (Nachschlagen von Objekt- und Felddokumentation, Abfragen von Komponenten-Versionen, Abrufen und Speichern von Site-Inhalten) und darüber deployen Sie, was der Assistent erzeugt. Verbinden Sie Ihre Org mit:

sf org login web

Machen Sie das zuerst. Ohne Node.js und eine authentifizierte Salesforce CLI haben die Skills und der MCP-Server nichts, womit sie arbeiten können: Der Assistent kann Dokumentation lesen, aber er kann nichts Nützliches in Ihrer Org erzeugen oder speichern.

Wählen Sie Ihren Client

🖥️ Claude Code (Desktop-App oder Terminal)

1. Installieren Sie die Skills

Wechseln Sie aus Ihrem Projektverzeichnis heraus (in der Desktop-App öffnen Sie zuerst Ihren Projektordner) und führen Sie aus:

npx skills add avonni/skills

Dadurch werden alle fünf Skills automatisch heruntergeladen und in der Konfiguration Ihres Projekts installiert.

2. Verbinden Sie den MCP-Server

Der Server wird gehostet: Es gibt nichts lokal zu installieren oder auszuführen. Führen Sie aus:

claude mcp add --transport http avonni https://mcp.avonnicomponents.com

Das ist die gesamte Einrichtung.

⌨️ Cursor, VS Code, GitHub Copilot

1. Installieren Sie die Skills

Führen Sie aus Ihrem Projektverzeichnis Folgendes aus:

npx skills add avonni/skills

Dadurch werden alle fünf Skills automatisch heruntergeladen und in der Konfiguration Ihres Projekts installiert.

2. Verbinden Sie den MCP-Server

Fügen Sie einen JSON-Konfigurationseintrag hinzu, zum Beispiel in .cursor/mcp.json oder .vscode/mcp.json:

{
    "mcpServers": {
        "avonni": {
            "url": "https://mcp.avonnicomponents.com"
        }
    }
}

Prüfen Sie die Dokumentation Ihres Assistenten für den genauen Dateinamen und Speicherort. Die Form des Eintrags bleibt überall gleich: ein Name und eine URL.

Was im Skill-Set enthalten ist

Alle fünf Skills befinden sich im öffentlichen avonni/skills Repository:

• avonni-experience-components, für Avonni-Komponenten auf Experience-Site-Seiten
• avonni-architect, der Koordinator, der komplette Anwendungsfälle plant und erstellt
• avonni-flow-components, für Avonni Flow Screen Components in Bildschirmflüssen
• avonni-dynamic-components, für Dynamic Components auf Lightning-Seiten
• avonni-lwc-components, für Avonni-Komponenten in LWC-Code

Behalten Sie avonni-architect im Set

Beschreiben Sie ein Geschäftsergebnis ("eine Support-Portal-Seite mit einer Fallliste und einem Flow zum Erstellen eines Falls") und der Architect plant die Architektur und führt dann die richtigen Skills in Abhängigkeitsreihenfolge aus, damit jedes Teil korrekt mit den anderen verbunden wird. Er benötigt die anderen Skills, die zusammen mit ihm installiert sind, um seine Arbeit zu erledigen.

Überprüfen Sie die Einrichtung

Fragen Sie Ihren Assistenten: "Listen Sie die verfügbaren Avonni Experience-Komponenten auf."

Wenn er mit einer echten Komponentenliste antwortet, die über den MCP-Server abgerufen wurde, statt mit einer allgemeinen Antwort aus dem Gedächtnis, funktioniert die Verbindung.

Toolsets filtern (optional)

Standardmäßig stellt der Server Tools für alle vier Avonni-Pakete bereit (LWC, dynamischen, Flow, Experience). Wenn Sie nur Experience-Site-Seiten erstellen, hängen Sie einen ?toolsets= Abfrageparameter an die URL an, damit die Tool-Liste des Assistenten minimal bleibt:

https://mcp.avonnicomponents.com?toolsets=experience

Fügen Sie Pakete mit einer durch Kommas getrennten Liste wieder hinzu, zum Beispiel ?toolsets=experience,flow.

Wenn Sie die Toolsets filtern, werden Komponenten aus den ausgeschlossenen Paketen für den Assistenten unsichtbar. Siehe Einschränkungen & FAQ.