DokumentationAEMTutorials zu AEM as a Cloud Service

Erstellen von Testinhalten ohne die IDE verlassen zu müssen

Letzte Aktualisierung: 12. September 2026
  • Gilt für:
  • Experience Manager as a Cloud Service

Erstellt für:

  • Beginner
  • Leader
  • User
  • Developer

Verwenden Sie den AEM MCP-Server von einer KI-gestützten IDE wie Cursor-IDE, um mit AEM-Seiten, Inhaltsfragmenten und Assets in natürlicher Sprache, ohne API-Code auf niedriger Ebene oder Benutzeroberflächennavigation zu arbeiten.

In diesem Tutorial Sie Details zu Adventure-Inhaltsfragmenten, aktualisieren ein Fragment (z. B. den Preis eines Abenteuers) und überprüfen die Änderung in der WKND Adventures React-App alle von Ihrer IDE aus in einer unteren AEM-Umgebung (RDE oder Entwicklung), ohne den MCP-Fluss verlassen zu müssen.

https://video.tv.adobe.com/v/3480904/?captions=ger&learn=on&enablevpops
https://video.tv.adobe.com/vc/3480904/ger.json

AEM MCP-Server hinzufügen

In diesem Tutorial wird Cursor-IDE als Beispiel für eine agentische IDE verwendet. Dieselbe AEM MCP-Server-Registrierung funktioniert in jeder MCP-kompatiblen IDE- oder Chat-Anwendung.

Der AEM MCP Server kann Ihrem KI-Client hinzugefügt werden, um eine nahtlose Integration mit verschiedenen KI-Tools und -Plattformen zu ermöglichen. Wählen Sie unten Ihren Client.

AEM MCP-Server-URL

Registrieren Sie die folgende URL in einer MCP-kompatiblen IDE oder Chat-Anwendung:

code language-none 
https://mcp.adobeaemcloud.com/adobe/mcp/aem
CX Enterprise Coworker
Coworker ist Adobes konversationelle KI für CX Enterprise mit nativer Unterstützung für den AEM MCP Server.
OpenAI ChatGPT
Installieren Sie das AEMPlug-in über den ChatGPT-Plug-in-Store oder folgen Sie Schritt-für-Schritt-Setup-Anleitung.
Anthrope Claude
Fügen Sie den AEMConnector aus dem Claude-Connector-Verzeichnis hinzu oder folgen Sie Schritt-für-Schritt-Einrichtungshandbuch.

So richten Sie es in Cursor mithilfe der manuellen Registrierungs-URL von "MCP-Clients“:

  1. Öffnen Sie den Cursor auf Ihrem Computer.

  2. Gehen Sie Cursor Menü „Einstellungen > Cursor-Einstellungen, um das Einstellungsfenster zu öffnen.
    Cursoreinstellungen {modal="regular"}

  3. Klicken Sie in der linken Seitenleiste auf Tools und MCP, um dieses Bedienfeld zu öffnen.
    Tools und MCP {modal="regular"}

  4. Klicken Sie Benutzerdefinierten MCP hinzufügen oder Neuer MCP-Server, um mcp.json zu öffnen, und fügen Sie dann diese Konfiguration ein:

    code language-json 
    {
    "mcpServers": {
        "AEM": {
            "url": "https://mcp.adobeaemcloud.com/adobe/mcp/aem"
        }
    }
}
    note
    NOTE
    Der Zugriff über den AEM MCP-Server erfolgt gemäß den Berechtigungen des angemeldeten AEM-Benutzers: Sie können nur ausführen, wozu Sie bereits in AEM autorisiert sind. Wenn Ihr Unternehmen eine engere Berechnung auf Organisationsebene benötigt (z. B. die Beschränkung auf schreibgeschützt), wenden Sie sich unter aemcs-mcp-feedback@adobe.com an Adobe.

    AEM MCP-Server hinzufügen {modal="regular"}

  5. Klicken Sie im Fenster Cursor-Einstellungen auf Verbinden, um den Authentifizierungsprozess einzuleiten. Der OAuth 2.0 PKCE-Fluss wird verwendet, um das benutzerspezifische Zugriffstoken) für Zugriff auf den AEM MCP-Server abzurufen.
    Verbindung zum AEM MCP-Server herstellen {modal="regular"}

  6. Melden Sie sich mit Ihrer Adobe ID an und kehren Sie dann zurück zum Fenster „Cursor-Einstellungen“.
    Mit Adobe ID anmelden {modal="regular"}

  7. Bestätigen Sie, dass AEM als verbunden angezeigt wird. Sie können den Server erweitern, um die Tools anzuzeigen.

    AEM MCP-Server {modal="regular"}

Installieren der beispielhaften AEM-Web-App

Richten Sie anschließend die WKND Adventures React App in Ihrer IDE ein.

  1. Klonen Sie diese beiden Repos auf Ihrem Computer:

    code language-bash 
    ## WKND GraphQL repo, the `react-app` folder is the WKND Adventures app
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

## WKND Site repo, you deploy this to RDE so the app can use its content fragments data via GraphQL
$ git clone git@github.com:adobe/aem-guides-wknd.git

  2. Stellen Sie das WKND Site-Projekt in Ihrer RDE bereit. Ausführliche Anweisungen finden Sie unter Verwenden der schnellen Entwicklungsumgebung.

  3. Öffnen Sie den react-app Ordner in Ihrer IDE.

  4. .env.development bearbeiten und festlegen:

    • REACT_APP_HOST_URI: Ihre RDE-Autoren-URL
    • REACT_APP_AUTH_METHOD: zu basic
    • REACT_APP_BASIC_AUTH_USER und REACT_APP_AEM_AUTH_PASSWORD: zu aem-headless (erstellen Sie diesen Benutzer in der RDE und fügen Sie ihn der administrators hinzu)

  5. Führen Sie am IDE-Terminal Folgendes aus:

    code language-bash 
    $ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

  6. Navigieren Sie in Ihrem Browser zu http://localhost:3000, um die WKND Adventures-App anzuzeigen.

    React-App - WKND-Adventures {modal="regular"}

Inhalt überprüfen und aktualisieren

Angenommen, Sie müssen auf Adventure Karten ein „HOT DEAL-Banner anzeigen, wenn eine einfache Regel erfüllt ist. Der übliche Ansatz wäre:

  • Sehen Sie sich den Code der Adventure-Kartenkomponente an
  • Hinzufügen der Logik für die Anzeige des Banners
  • Überprüfen des Adventure-Inhaltsfragmentmodells in AEM
  • Ändern Sie eine oder mehrere Adventure-Fragmenteigenschaften, um die Regel zu testen

Um die Dinge einfach zu halten, zeigen wir das Banner HOT DEAL, wenn der Preis des Abenteuers unter 100 $ liegt.

Da die React-App ihre Daten aus Ihrer RDE-Umgebung erhält, müssen Sie das Adventure-Inhaltsfragmentmodell kennen und dann die richtigen Fragmenteigenschaften aktualisieren. Genau dabei kann der AEM MCP-Server helfen. So geht’s.

  1. Geben Sie im Chat Ihrer IDE Folgendes ein:

    code language-text 
    I want to review my Content Fragment Models from AEM RDE, can you list the Adventure Content Fragment details.

    Inhaltsfragmentmodelle überprüfen {modal="regular"}

    Vor dem Aufrufen des AEM MCP-Servers wird um Bestätigung gebeten, um fortzufahren. Auf diese Weise behalten Sie die Kontrolle über die Inhaltsvorgänge.

    Die KI verwendet den AEM MCP-Server, um die Daten abzurufen und sie dann klar und strukturiert darzustellen. Sie enthält Details zum Inhaltsfragmentmodell, die Anzahl der Fragmente und Zusammenfassungsinformationen.

  2. Um das Banner HOT DEAL Trigger, aktualisieren Sie den Preis eines Abenteuers. Im selben Chat versuchen Sie Folgendes:

    code language-text 
    Can you update adventure Beervana in Portland's price to 99.99

    Adventure-Preis aktualisieren {modal="regular"}

    In ähnlicher Weise bittet die KI um Bestätigung, bevor der Inhalt aktualisiert wird. Außerdem wird der Inhaltsvorgang vor und nach der Aktualisierung zusammengefasst.

  3. Bestätigen Sie in der React-App, dass auf der Beervana-Karte jetzt das Banner HOT DEAL angezeigt wird.

    Überprüfen des HOT DEAL-Banners {modal="regular"}

Zusätzliche Eingabeaufforderungen

Probieren Sie diese inhaltsorientierten Eingabeaufforderungen in Ihrer IDE (mit angeschlossenem AEM MCP-Server) aus, um weitere Workflows und Funktionen zu erkunden.

  • Entdecken Sie Inhalte:

    code language-text 
    List all content fragments in the WKND Adventures folder

List all WKND Site pages from US English site

Can you give me page metadata for Tahoe Skiing English page?

List assets of Bali Surf camp

What Content Fragment models are available in this environment?

  • Suchen nach Inhalten:

    code language-text 
    Search for content fragments that mention 'cycling'

Do we have a magazine page in US English site with "Camping" in it

  • Inhalt aktualisieren:

    code language-text 
    In WKND US English create a copy of Downhill Skiing Wyoming as "Test Downhill Skiing Wyoming"

In newly created "Test Downhill Skiing Wyoming" please change title to "Duplicated Page"

  • Veröffentlichen oder Veröffentlichung aufheben:

    code language-text 
    Can you publish the page at /us/en/adventures/test-downhill-skiing-wyoming and give me publish page URL

Can you unpublish the test-downhill-skiing-wyoming page

Herzlichen Glückwunsch!

Sie richten den AEM-MCP-Server in einer agenten IDE ein (in diesem Beispiel Cursor) und verbinden ihn mit Ihrer RDE (oder Entwicklungsumgebung). Anschließend haben Sie die WKND Adventures React-App verwendet und in natürlicher Sprache gechattet, um Details zu Adventure-Inhaltsfragmenten zu überprüfen. Sie haben auch den Preis eines Fragments aktualisiert, indem Sie vor jedem Inhaltsvorgang von der KI nach Ihrer Bestätigung gefragt wurden. Sie haben die Änderung in der laufenden App überprüft. Sie können denselben am Menschen orientierten Fluss von Ihrer IDE zur Überprüfung, Aktualisierung und Erstellung von AEM-Inhalten verwenden, ohne zur AEM-Benutzeroberfläche zu wechseln oder API-Code auf niedriger Ebene zu schreiben.

recommendation-more-help
experience-manager-learn-help-cloud-service