Creare contenuti di test senza uscire dall’IDE
Utilizza il server AEM MCP da un IDE basato su intelligenza artificiale come IDE cursore per lavorare con pagine, frammenti di contenuto e risorse di AEM in linguaggio naturale, senza codice API di basso livello o navigazione nell’interfaccia utente.
In questo tutorial rivedi i dettagli dei frammenti di contenuto di Adventure, aggiorna un frammento (ad esempio, il prezzo di un’avventura) e verifica la modifica nell’app WKND Adventures React, tutto dall’IDE rispetto a un ambiente AEM inferiore (RDE o Sviluppo) senza uscire dal flusso MCP.
Aggiungere il server AEM MCP
Questa esercitazione utilizza IDE cursore come IDE agente di esempio; la stessa registrazione del server MCP di AEM funziona in qualsiasi applicazione IDE o chat compatibile con MCP.
Il server MCP di AEM può essere aggiunto al client di intelligenza artificiale per un’integrazione perfetta con vari strumenti e piattaforme di intelligenza artificiale. Scegli il tuo cliente qui sotto.
Registra il seguente URL in qualsiasi applicazione IDE o chat compatibile con MCP:
| code language-none |
|---|
|
Di seguito viene illustrato come configurarlo in Cursor utilizzando l’URL di registrazione manuale di altri client MCP:
-
Apri il cursore sul computer.
-
Vai a Impostazioni > Impostazioni cursore dal menu Cursore per aprire la finestra delle impostazioni.
{modal="regular"}
-
Nella barra laterale a sinistra, fai clic su Strumenti e MCP per aprire il pannello.
{modal="regular"}
-
Fai clic su Aggiungi MCP personalizzato o Nuovo server MCP per aprire
mcp.json, quindi incolla questa configurazione:code language-json { "mcpServers": { "AEM": { "url": "https://mcp.adobeaemcloud.com/adobe/mcp/aem" } } }note NOTE L’accesso tramite il server AEM MCP segue le autorizzazioni dell’utente AEM che ha effettuato l’accesso: puoi eseguire solo le operazioni che sono già autorizzate in AEM. Se la tua organizzazione ha bisogno di un ambito più ristretto a livello di organizzazione (ad esempio, limitato alla sola lettura), contatta Adobe all'indirizzo aemcs-mcp-feedback@adobe.com. {modal="regular"}
-
Nella finestra Impostazioni cursore, fare clic su Connetti per avviare il processo di autenticazione. Utilizza il flusso PKCE OAuth 2.0 per ottenere il token di accesso specifico dell’utente per accedere al server MCP di AEM.
{modal="regular"}
-
Accedi con il tuo Adobe ID, quindi torna alla finestra Impostazioni cursore.
{modal="regular"}
-
Conferma che AEM sia visualizzato come connesso. Puoi espandere il server per visualizzarne gli strumenti.
{modal="regular"}
Installare l’app web AEM di esempio
Quindi, configura l’app WKND Adventures React nell’IDE.
-
Clona questi due repository sul tuo 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 -
Distribuisci il progetto WKND Site nel tuo RDE. Per i passaggi dettagliati, vedi Come utilizzare l’ambiente di sviluppo rapido.
-
Aprire la cartella
react-appnell’IDE. -
Modifica
.env.developmente imposta:REACT_APP_HOST_URI: l’URL dell’autore RDEREACT_APP_AUTH_METHOD: dabasicREACT_APP_BASIC_AUTH_USEReREACT_APP_AEM_AUTH_PASSWORD: per essereaem-headless(creare questo utente in RDE e aggiungerlo al gruppoadministrators)
-
Dal terminale IDE, eseguire:
code language-bash $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start -
Nel browser, passa a http://localhost:3000 per visualizzare l’app WKND Adventures.
{modal="regular"}
Rivedere e aggiornare il contenuto
Supponiamo che tu debba mostrare un banner OFFERTA CALDA sulle schede Avventura quando viene soddisfatta una semplice regola. L’approccio abituale sarebbe:
- Osserva il codice del componente per le schede Avventura
- Aggiungi la logica che determina quando visualizzare il banner
- Controlla il modello per frammenti di contenuto Adventure in AEM
- Modifica una o più proprietà del frammento Adventure per testare la regola
Per semplificare le cose, mostriamo il banner HOT DEAL quando il prezzo dell’avventura è inferiore a 100 $.
Poiché l’app React ottiene i dati dall’ambiente RDE, è necessario conoscere il modello per frammenti di contenuto di Adventure e quindi aggiornare le proprietà giuste del frammento. Questo è esattamente ciò che il server MCP di AEM può aiutare con. Ecco come.
-
Nella chat dell’IDE, digita:
code language-text I want to review my Content Fragment Models from AEM RDE, can you list the Adventure Content Fragment details. {modal="regular"}
Prima di richiamare il server MCP di AEM, richiede la conferma per continuare. In questo modo, puoi mantenere il controllo sulle operazioni relative ai contenuti.
L’intelligenza artificiale utilizza il server MCP di AEM per recuperare i dati e quindi li presenta in modo chiaro e strutturato. Include i dettagli del modello per frammenti di contenuto, il numero di frammenti e le informazioni di riepilogo.
-
Per attivare il banner OFFERTA CALDA, aggiorna il prezzo di un’avventura. Nella stessa chat, prova:
code language-text Can you update adventure Beervana in Portland's price to 99.99 {modal="regular"}
Analogamente, l’IA richiede la conferma per procedere prima di aggiornare il contenuto. Inoltre, riepiloga l’operazione sul contenuto prima e dopo l’aggiornamento.
-
Nell’app React, verifica che nella scheda Beervana sia ora visualizzato il banner OFFERTA CALDA.
{modal="regular"}
Richieste aggiuntive
Prova questi prompt incentrati sul contenuto nell’IDE (con AEM MCP Server connesso) per esplorare altri flussi di lavoro e funzionalità.
-
Scopri contenuto:
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? -
Cerca contenuto:
code language-text Search for content fragments that mention 'cycling' Do we have a magazine page in US English site with "Camping" in it -
Aggiorna contenuto:
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" -
Pubblicazione o annullamento della pubblicazione:
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
Congratulazioni.
Il server AEM MCP viene configurato in un IDE (cursore, in questo esempio) e collegato all’ambiente RDE (o di sviluppo). Hai quindi utilizzato l’app WKND Adventures React e hai chattato in linguaggio naturale per rivedere i dettagli dei frammenti di contenuto Adventure. Hai anche aggiornato il prezzo di un frammento con l’intelligenza artificiale chiedendo la tua conferma prima di ogni operazione di contenuto. Hai verificato la modifica nell’app in esecuzione. Puoi utilizzare lo stesso flusso incentrato sull’uomo dall’IDE per rivedere, aggiornare e creare contenuti AEM senza passare all’interfaccia utente di AEM o scrivere codice API di basso livello.