DocumentaciónAEMTutoriales de AEM as a Cloud Service

Crear contenido de prueba sin salir del IDE

Última actualización: 24 de septiembre de 2026
  • Se aplica a:
  • Experience Manager as a Cloud Service

Creado para:

  • Beginner
  • Leader
  • User
  • Developer

Use AEM MCP Server desde un IDE con tecnología de IA como Cursor IDE para trabajar con páginas de AEM, fragmentos de contenido y recursos en lenguaje natural, sin código de API de bajo nivel ni navegación por la interfaz de usuario.

En este tutorial revisará los detalles del fragmento de contenido Adventure, actualizará un fragmento (por ejemplo, el precio de una aventura) y verificará el cambio en la aplicación WKND Adventures React desde su IDE con un entorno AEM inferior (RDE o Desarrollo) sin abandonar el flujo MCP.

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

Añadir el servidor MCP de AEM

Este tutorial utiliza Cursor IDE como ejemplo de IDE agéntico; el mismo registro de AEM MCP Server funciona en cualquier aplicación de chat o IDE compatible con MCP.

El servidor MCP de AEM se puede añadir a su cliente de IA para una integración perfecta con varias herramientas y plataformas de IA. Elija su cliente a continuación.

URL del servidor MCP de AEM

Registre la siguiente URL en cualquier aplicación IDE o de chat compatible con MCP:

code language-none 
https://mcp.adobeaemcloud.com/adobe/mcp/aem
CX Enterprise Coworker
Coworker es IA conversacional de Adobe para CX Enterprise, con soporte nativo para AEM MCP Server.
OpenAI ChatGPT
Instale el complemento de AEM desde el almacén de complementos de ChatGPT o siga la guía de instalación paso a paso.
Claude antrópico
Agregue el conector AEM desde el directorio de conectores de Claude o siga la guía de configuración paso a paso.

A continuación se indica cómo configurarlo en Cursor mediante la URL de registro manual de Otros clientes de MCP:

  1. Abra Cursor en el equipo.

  2. Vaya a Configuración > Configuración del cursor desde el menú Cursor para abrir la ventana de configuración.
    Configuración del cursor {modal="regular"}

  3. En la barra lateral izquierda, haga clic en Herramientas y MCP para abrir el panel.
    Herramientas y MCP {modal="regular"}

  4. Haga clic en Agregar MCP personalizado o en Nuevo servidor MCP para abrir mcp.json y, a continuación, pegue esta configuración:

    code language-json 
    {
    "mcpServers": {
        "AEM": {
            "url": "https://mcp.adobeaemcloud.com/adobe/mcp/aem"
        }
    }
}
    note
    NOTE
    El acceso a través del servidor MCP de AEM sigue los permisos del usuario de AEM que ha iniciado sesión: solo puede hacer lo que ya está autorizado a hacer en AEM. Si su organización necesita ámbitos más estrictos a nivel de organización (por ejemplo, restringir a solo lectura), póngase en contacto con Adobe en aemcs-mcp-feedback@adobe.com.

    Agregar servidor MCP de AEM {modal="regular"}

  5. En la ventana Configuración del cursor, haga clic en Conectar para iniciar el proceso de autenticación. Utiliza el flujo PKCE de OAuth 2.0 para obtener el token de acceso específico del usuario para acceder al servidor MCP de AEM.
    Conectarse al servidor MCP de AEM {modal="regular"}

  6. Inicie sesión con su Adobe ID y, a continuación, vuelva a la ventana Configuración del cursor.
    Iniciar sesión con Adobe ID {modal="regular"}

  7. Confirme que AEM se muestra como conectado. Puede expandir el servidor para ver sus herramientas.

    Servidor MCP de AEM {modal="regular"}

Instalación de la aplicación web de AEM de ejemplo

A continuación, configura la aplicación WKND Adventures React en tu IDE.

  1. Clone estos dos repositorios en su equipo:

    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. Implemente el proyecto WKND Site en su RDE. Para ver los pasos detallados, consulte Cómo usar el entorno de desarrollo rápido.

  3. Abra la carpeta react-app en su IDE.

  4. Editar .env.development y establecer:

    • REACT_APP_HOST_URI: su URL de autor de RDE
    • REACT_APP_AUTH_METHOD: para ser basic
    • REACT_APP_BASIC_AUTH_USER y REACT_APP_AEM_AUTH_PASSWORD: para ser aem-headless (cree este usuario en RDE y agréguelo al grupo administrators)

  5. Desde el terminal IDE, ejecute:

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

  6. En su explorador, vaya a http://localhost:3000 para ver la aplicación WKND Adventures.

    Aplicación React - WKND Adventures {modal="regular"}

Revisión y actualización de contenido

Supongamos que necesita mostrar un banner de OFERTA ACTUAL en las tarjetas de Aventura cuando se cumple una regla simple. El enfoque habitual sería:

  • Consulte el código de componente Tarjetas de aventura
  • Añada la lógica de cuándo mostrar el titular
  • Consulte el modelo de fragmento de contenido Aventura en AEM
  • Cambie una o más propiedades de fragmento de aventura para probar la regla

Para que todo sea simple, vamos a mostrar el banner de OFERTA CALIENTE cuando el precio de la aventura sea inferior a $100.

Dado que la aplicación React obtiene sus datos del entorno de RDE, debe conocer el modelo de fragmento de contenido de Aventura y, a continuación, actualizar las propiedades de fragmento correctas. Eso es exactamente lo que AEM MCP Server puede ayudar. A continuación se muestra cómo.

  1. En el chat del IDE, escriba:

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

    Revisar modelos de fragmentos de contenido {modal="regular"}

    Antes de invocar el servidor MCP de AEM, solicita confirmación para continuar. Por lo tanto, se mantiene el control de las operaciones de contenido.

    La API utiliza el servidor MCP de AEM para recuperar los datos y luego los presenta de una manera clara y estructurada. Incluye detalles del modelo de fragmento de contenido, el número de fragmentos y la información de resumen.

  2. Para poner en déclencheur el banner HOT DEAL, actualiza el precio de una aventura. En el mismo chat, intente:

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

    Actualizar precio de aventura {modal="regular"}

    Del mismo modo, la API solicita confirmación para continuar antes de actualizar el contenido. También resume la operación de contenido antes y después de la actualización.

  3. En la aplicación React, confirma que la tarjeta Beervana ahora muestra el banner HOT DEAL.

    Verificar titular de oferta actual {modal="regular"}

Indicadores adicionales

Pruebe estas peticiones de datos centradas en el contenido en su IDE (con AEM MCP Server conectado) para explorar más flujos de trabajo y funciones.

  • Descubrir contenido:

    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?

  • Buscar contenido:

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

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

  • Actualizar contenido:

    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"

  • Publicar o cancelar la publicación:

    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

Enhorabuena.

El servidor MCP de AEM se configura en un IDE auténtico (Cursor, en este ejemplo) y se conecta al entorno RDE (o Desarrollo). A continuación, utilizó la aplicación WKND Adventures React y charló en lenguaje natural para revisar los detalles del fragmento de contenido Adventure. También ha actualizado el precio de un fragmento con la API solicitando su confirmación antes de cada operación de contenido. Ha verificado el cambio en la aplicación en ejecución. Puede utilizar el mismo flujo centrado en las personas desde su IDE para revisar, actualizar y crear contenido de AEM sin cambiar a la interfaz de usuario de AEM ni escribir código de API de bajo nivel.

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