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.

URL server AEM MCP

Registra il seguente URL in qualsiasi applicazione IDE o chat compatibile con MCP:

code language-none
https://mcp.adobeaemcloud.com/adobe/mcp/aem
Collaboratore aziendale CX
Coworker è l’intelligenza artificiale conversazionale di Adobe per CX Enterprise, con supporto nativo per AEM MCP Server.
ChatGPT OpenAI
Installa il plug-in di AEM dall’archivio dei plug-in di ChatGPT oppure segui la guida dettagliata all’installazione.
Claude antropico
Aggiungi il connettore AEM dalla directory del connettore Claude oppure segui la guida dettagliata all’installazione.

Di seguito viene illustrato come configurarlo in Cursor utilizzando l’URL di registrazione manuale di altri client MCP:

  1. Apri il cursore sul computer.

  2. Vai a Impostazioni > Impostazioni cursore dal menu Cursore per aprire la finestra delle impostazioni.
    Impostazioni cursore {modal="regular"}

  3. Nella barra laterale a sinistra, fai clic su Strumenti e MCP per aprire il pannello.
    Strumenti e MCP {modal="regular"}

  4. 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.

    Aggiungi server AEM MCP {modal="regular"}

  5. 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.
    Connessione al server AEM MCP {modal="regular"}

  6. Accedi con il tuo Adobe ID, quindi torna alla finestra Impostazioni cursore.
    Accesso con Adobe ID {modal="regular"}

  7. Conferma che AEM sia visualizzato come connesso. Puoi espandere il server per visualizzarne gli strumenti.

    Server MCP AEM {modal="regular"}

Installare l’app web AEM di esempio

Quindi, configura l’app WKND Adventures React nell’IDE.

  1. 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
    
  2. Distribuisci il progetto WKND Site nel tuo RDE. Per i passaggi dettagliati, vedi Come utilizzare l’ambiente di sviluppo rapido.

  3. Aprire la cartella react-app nell’IDE.

  4. Modifica .env.development e imposta:

    • REACT_APP_HOST_URI: l’URL dell’autore RDE
    • REACT_APP_AUTH_METHOD: da basic
    • REACT_APP_BASIC_AUTH_USER e REACT_APP_AEM_AUTH_PASSWORD: per essere aem-headless (creare questo utente in RDE e aggiungerlo al gruppo administrators)
  5. Dal terminale IDE, eseguire:

    code language-bash
    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  6. Nel browser, passa a http://localhost:3000 per visualizzare l’app WKND Adventures.

    App React - Avventure WKND {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.

  1. 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.
    

    Rivedi modelli per frammenti di contenuto {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.

  2. 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
    

    Aggiorna prezzo avventura {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.

  3. Nell’app React, verifica che nella scheda Beervana sia ora visualizzato il banner OFFERTA CALDA.

    Verifica banner HOT DEAL {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.

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