Criar conteúdo de teste sem sair do IDE

Use o Servidor MCP do AEM de um IDE alimentado por IA, como o IDE de Cursor, para trabalhar com páginas do AEM, fragmentos de conteúdo e ativos em linguagem natural, sem código de API de baixo nível ou navegação de interface do usuário.

Neste tutorial, você revisa detalhes do fragmento de conteúdo Adventure, atualiza um fragmento (por exemplo, o preço de uma aventura) e verifica a alteração no aplicativo WKND Adventures React de seu IDE em um ambiente AEM inferior (RDE ou Desenvolvimento) sem sair do fluxo do MCP.

Adicionar o servidor MCP do AEM

Este tutorial usa o IDE de Cursor como um IDE de exemplo agêntrico; o mesmo registro do AEM MCP Server funciona em qualquer IDE ou aplicativo de chat compatível com MCP.

O servidor MCP do AEM pode ser adicionado ao cliente de IA para uma integração perfeita com várias ferramentas e plataformas de IA. Escolha seu cliente abaixo.

URL do AEM MCP Server

Registre o seguinte URL em qualquer aplicativo de bate-papo ou IDE compatível com MCP:

code language-none
https://mcp.adobeaemcloud.com/adobe/mcp/aem
CX Enterprise Coworker
Colaborador é a IA conversacional da Adobe para CX Enterprise, com suporte nativo para o servidor MCP da AEM.
OpenAI ChatGPT
Instale o plug-in do AEM a partir do repositório de plug-ins ChatGPT ou siga o guia de instalação passo a passo.
Claude Antrópico
Adicione o conector do AEM do diretório do conector Claude ou siga o guia de instalação passo a passo.

Veja como configurá-lo no Cursor, usando a URL de registro manual de Outros clientes MCP:

  1. Abra o cursor em sua máquina.

  2. Vá para Configurações > Configurações do Cursor no menu Cursor para abrir a janela de configurações.
    Configurações do cursor {modal="regular"}

  3. Na barra lateral esquerda, clique em Ferramentas & MCP para abrir esse painel.
    Ferramentas e MCP {modal="regular"}

  4. Clique em Adicionar MCP personalizado ou Novo servidor MCP para abrir o mcp.json e cole nesta configuração:

    code language-json
    {
        "mcpServers": {
            "AEM": {
                "url": "https://mcp.adobeaemcloud.com/adobe/mcp/aem"
            }
        }
    }
    
    note
    NOTE
    O acesso pelo servidor MCP do AEM segue as permissões do usuário conectado do AEM: você só pode fazer o que já está autorizado a fazer no AEM. Se sua organização precisar de um escopo mais rigoroso em nível de organização (por exemplo, restringindo a somente leitura), entre em contato com a Adobe em aemcs-mcp-feedback@adobe.com.

    Adicionar Servidor MCP do AEM {modal="regular"}

  5. Na janela Configurações do cursor, clique em Conectar para iniciar o processo de autenticação. Ele usa o fluxo PKCE do OAuth 2.0 para obter o Token de Acesso Específico do Usuário para acessar o Servidor MCP do AEM.
    Conectar-se ao AEM MCP Server {modal="regular"}

  6. Faça logon com a Adobe ID e volte para a janela Configurações do cursor.
    Logon com o Adobe ID {modal="regular"}

  7. Confirme se o AEM aparece como conectado. Você pode expandir o servidor para ver suas ferramentas.

    AEM MCP Server {modal="regular"}

Instale o aplicativo Web de amostra do AEM

Em seguida, configure o Aplicativo WKND Adventures React no IDE.

  1. Clonar estes dois repositórios no computador:

    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. Implante o projeto WKND Site no RDE. Para obter etapas detalhadas, consulte Como usar o Ambiente de Desenvolvimento Rápido.

  3. Abra a pasta react-app no IDE.

  4. Editar .env.development e definir:

    • REACT_APP_HOST_URI: sua URL de Autor RDE
    • REACT_APP_AUTH_METHOD: ser basic
    • REACT_APP_BASIC_AUTH_USER e REACT_APP_AEM_AUTH_PASSWORD: ser aem-headless (criar este usuário no RDE e adicioná-lo ao grupo administrators)
  5. No terminal IDE, execute:

    code language-bash
    $ cd aem-guides-wknd-graphql/react-app
    $ npm install
    $ npm start
    
  6. Em seu navegador, vá para http://localhost:3000 para exibir o aplicativo WKND Adventures.

    Aplicativo React - Aventuras WKND {modal="regular"}

Revisar e atualizar conteúdo

Suponha que você precise mostrar um banner de HOT DEAL em cartões Adventure quando uma regra simples é atendida. A abordagem habitual seria:

  • Observe o código do componente Cartões de aventura
  • Adicionar a lógica de quando mostrar o banner
  • Verifique o modelo de fragmento de conteúdo do Adventure no AEM
  • Altere uma ou mais propriedades do fragmento Aventura para testar a regra

Para simplificar as coisas, vamos mostrar o banner HOT DEAL quando o preço da aventura estiver abaixo de US$ 100.

Como o aplicativo React obtém os dados do ambiente RDE, é necessário conhecer o modelo de fragmento de conteúdo Adventure e atualizar as propriedades do fragmento correto. Isso é exatamente o que o servidor MCP do AEM pode ajudar. Veja como.

  1. No bate-papo do IDE, digite:

    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 fragmento de conteúdo {modal="regular"}

    Antes de chamar o Servidor MCP do AEM, ele solicita a confirmação para continuar. Dessa forma, você permanece no controle das operações de conteúdo.

    A IA usa o servidor MCP do AEM para buscar os dados e, em seguida, os apresenta de forma clara e estruturada. Inclui detalhes do modelo do fragmento de conteúdo, o número de fragmentos e informações de resumo.

  2. Para acionar o banner OFERTA DIRETA, atualize o preço de uma aventura. No mesmo bate-papo, tente:

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

    Atualizar preço de aventura {modal="regular"}

    Da mesma forma, a IA solicita a confirmação para continuar antes de atualizar o conteúdo. Ele também resume a operação do conteúdo antes e depois da atualização.

  3. No aplicativo React, confirme se o cartão Beervana agora mostra o banner HOT DEAL.

    Verificar banner HOT DEAL {modal="regular"}

Prompts adicionais

Experimente esses prompts focados em conteúdo no IDE (com o servidor MCP do AEM conectado) para explorar mais fluxos de trabalho e recursos.

  • Descobrir conteúdo:

    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?
    
  • Pesquisar conteúdo:

    code language-text
    Search for content fragments that mention 'cycling'
    
    Do we have a magazine page in US English site with "Camping" in it
    
  • Atualizar conteúdo:

    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 ou desfazer a publicação:

    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
    

Parabéns!

Você configura o servidor MCP do AEM em um IDE agêntico (Cursor, neste exemplo) e o conecta ao seu ambiente RDE (ou Desenvolvimento). Em seguida, você usou o aplicativo WKND Adventures React e conversou em linguagem natural para analisar os detalhes do fragmento de conteúdo do Adventure. Você também atualizou o preço de um fragmento com a IA, solicitando sua confirmação antes de cada operação de conteúdo. Você verificou a alteração no aplicativo em execução. Você pode usar o mesmo fluxo centrado no ser humano do IDE para revisar, atualizar e criar conteúdo do AEM sem alternar para a interface do usuário do AEM ou gravar código de API de baixo nível.

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