Beschleunigen von AEM-Inhaltsvorgängen mithilfe des Content MCP-Servers
Verwenden Sie den Content MCP Server von einer KI-gestützten IDE wie Cursor-IDE, um mit AEM-Inhalten in natürlicher Sprache zu arbeiten, ohne API-Code auf niedriger Ebene oder Benutzeroberflächennavigation.
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.
Überblick
AEM as a Cloud Service stellt MCP-Server bereit, damit Ihre IDE- oder Chat-App sicher mit AEM arbeiten kann. Der Content MCP Server unterstützt Seiten, Fragmente und Assets. Weitere Informationen finden unter „MCP- in AEM".
So können Entwickler es verwenden
Verbinden Sie die Cursor-IDE mit dem Content MCP-Server und führen Sie das folgende Szenario aus.
Setup - Content MCP Server im Cursor
Mit diesen Schritten richten wir den Content MCP Server in Cursor ein.
-
Öffnen Sie den Cursor auf Ihrem Computer.
-
Gehen Sie Cursor Menü „Einstellungen > Cursor-Einstellungen, um das Einstellungsfenster zu öffnen.
-
Klicken Sie in der linken Seitenleiste auf Tools und MCP, um dieses Bedienfeld zu öffnen.
-
Klicken Sie Benutzerdefinierten MCP hinzufügen oder Neuer MCP-Server, um
mcp.jsonzu öffnen, und fügen Sie dann diese Konfiguration ein:code language-json { "mcpServers": { // Use this for create, read, update, and delete operations "AEM-RDE-Content": { "url": "https://mcp.adobeaemcloud.com/adobe/mcp/content" }, //Use this for read-only operations "AEM-RDE-Content-Read-Only": { "url": "https://mcp.adobeaemcloud.com/adobe/mcp/content-readonly" } } }note caution CAUTION Zu Tutorial-Zwecken werden mit der obigen Konfiguration Inhalt und Inhalt (schreibgeschützt) für dieses Tutorial hinzugefügt. In der Praxis enthält Inhalt bereits alles Inhalt (schreibgeschützt) Angebote sowie Tools zum Erstellen/Aktualisieren/Löschen. Wenn Sie keine Möglichkeit zum Erstellen, Ändern oder Löschen von Inhalten haben möchten, konfigurieren Sie nur Inhalt (schreibgeschützt) ( /content-readonly) und lassen Sie Inhalt (/content) aus. Auf diese Weise vermeiden Sie versehentliche Änderungen.
-
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.
-
Melden Sie sich mit Ihrer Adobe ID an und kehren Sie dann zurück zum Fenster „Cursor-Einstellungen“.
-
Bestätigen Sie, dass AEM-RDE-Content-Read-Only und AEM-RDE-Content als verbunden angezeigt werden. Sie können jeden Server erweitern, um die Tools anzuzeigen.
Einrichtung - WKND Adventures React App
Richten Sie als Nächstes die WKND Adventures React App in Cursor ein.
-
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 -
Stellen Sie das WKND Site-Projekt in Ihrer RDE bereit. Ausführliche Anweisungen finden Sie unter Verwenden der schnellen Entwicklungsumgebung.
-
Öffnen Sie den
react-appOrdner in Ihrer IDE. -
.env.developmentbearbeiten und festlegen:REACT_APP_HOST_URI: Ihre RDE-Autoren-URLREACT_APP_AUTH_METHOD: zubasicREACT_APP_BASIC_AUTH_USERundREACT_APP_AEM_AUTH_PASSWORD: zuaem-headless(erstellen Sie diesen Benutzer in der RDE und fügen Sie ihn deradministratorshinzu)
-
Führen Sie am IDE-Terminal Folgendes aus:
code language-bash $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start -
Navigieren Sie in Ihrem Browser zu http://localhost:3000, um die WKND Adventures-App anzuzeigen.
Produktivitätsszenario - Überprüfung und Aktualisierung des AEM-Inhalts
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 Content MCP Server helfen. So geht's.
-
Öffnen Sie in Cursor einen neuen Chat und geben Sie Folgendes ein:
code language-text I want to review my Content Fragment Models from AEM RDE, can you list the Adventure Content Fragment details.
Vor dem Aufrufen des Content MCP Servers wird um Bestätigung gebeten, um fortzufahren. Auf diese Weise behalten Sie die Kontrolle über die Inhaltsvorgänge.
Die KI verwendet den Content MCP Server, um die Daten abzurufen und sie dann auf klare, strukturierte Weise darzustellen. Sie enthält Details zum Inhaltsfragmentmodell, die Anzahl der Fragmente und Zusammenfassungsinformationen.
-
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
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.
-
Bestätigen Sie in der React-App, dass auf der Beervana-Karte jetzt das Banner HOT DEAL angezeigt wird.
Zusätzliche Eingabeaufforderungen
Probieren Sie diese inhaltsorientierten Eingabeaufforderungen in Ihrer IDE (mit angeschlossenem Content 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
Zusammenfassung
Sie richten den AEM Content MCP Server in Cursor ein 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.