文件AEMAEM as a Cloud Service 教學課程

在不離開IDE的情況下建立測試內容

最後更新： 2026年9月23日
  • 適用對象：
  • Experience Manager as a Cloud Service

建立對象：

  • Beginner
  • Leader
  • User
  • Developer

使用AI支援的IDE （例如Cursor IDE）中的AEM MCP伺服器，以自然語言（沒有低階API程式碼或UI導覽）處理AEM頁面、內容片段和資產。

在本教學課程中，您​ 檢閱 ​冒險內容片段詳細資訊、更新​片段（例如冒險價格）和​驗證 IDE中的WKND Adventures React應用程式變更，並針對​較低的AEM環境 （RDE或開發）執行驗證，而不離開MCP流程。

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

新增AEM MCP伺服器

本教學課程使用Cursor IDE作為範例代理式IDE；相同的AEM MCP伺服器註冊可在任何MCP相容的IDE或聊天應用程式中運作。

可以將AEM MCP伺服器新增到您的AI使用者端，以與各種AI工具和平台無縫整合。 在下方選擇您的使用者端。

AEM MCP伺服器URL

在任何MCP相容的IDE或聊天應用程式中註冊下列URL：

code language-none 
https://mcp.adobeaemcloud.com/adobe/mcp/aem
CX Enterprise Co-worker
同事是Adobe的CX Enterprise對話式AI，具有AEM MCP伺服器的原生支援。
OpenAI ChatGPT
從ChatGPT外掛程式商店安裝AEM外掛程式，或遵循逐步安裝指南。
個人克勞德
從Claude的聯結器目錄中新增AEM聯結器，或遵循逐步安裝指南。

以下說明如何使用​ 其他MCP使用者端 ​的手動註冊URL，在Cursor中進行設定：

  1. 在您的電腦上開啟游標。

  2. 從[游標]功能表移至​設定 > 游標設定​以開啟設定視窗。
    資料指標設定 {modal="regular"}

  3. 在左側邊欄中，按一下​ 工具與MCP ​以開啟該面板。
    工具與MCP {modal="regular"}

  4. 按一下​ 新增自訂MCP ​或​ 新MCP伺服器 ​以開啟mcp.json，然後貼上這個組態：

    code language-json 
    {
    "mcpServers": {
        "AEM": {
            "url": "https://mcp.adobeaemcloud.com/adobe/mcp/aem"
        }
    }
}
    note
    NOTE
    透過AEM MCP伺服器存取時，請遵循您登入的AEM使用者的許可權：您只能執行已在AEM中授權執行的操作。 如果您的組織需要更緊的組織層級範圍（例如，將限製為唯讀），請透過aemcs-mcp-feedback@adobe.com聯絡Adobe。

    新增AEM MCP伺服器 {modal="regular"}

  5. 在[游標設定]視窗中，按一下[連線]以啟動驗證程式。 ​​它會使用OAuth 2.0 PKCE流程取得​ 使用者特定存取權杖 ​以存取AEM MCP伺服器。
    連線到AEM MCP伺服器 {modal="regular"}

  6. 使用Adobe ID登入，然後返回「游標設定」視窗。
    使用Adobe ID登入 {modal="regular"}

  7. 確認​ AEM ​顯示為已連線。 您可以展開伺服器以檢視其工具。

    AEM MCP伺服器 {modal="regular"}

安裝範例AEM網頁應用程式

接下來，在您的IDE中設定WKND Adventures React App。

  1. 複製您電腦上的這兩個存放庫：

    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. 將WKND網站專案部署至您的RDE。 如需詳細步驟，請參閱如何使用快速開發環境。

  3. 在IDE中開啟react-app資料夾。

  4. 編輯.env.development並設定：

    • REACT_APP_HOST_URI：您的RDE作者URL
    • REACT_APP_AUTH_METHOD：成為basic
    • REACT_APP_BASIC_AUTH_USER和REACT_APP_AEM_AUTH_PASSWORD：成為aem-headless （在RDE中建立此使用者，並將其新增至administrators群組）

  5. 從IDE終端機，執行：

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

  6. 在您的瀏覽器中，前往http://localhost:3000檢視WKND Adventures應用程式。

    React應用程式 — WKND冒險 {modal="regular"}

檢閱和更新內容

假設當符合簡單規則時，您需要在冒險卡片上顯示​ 熱門交易 ​橫幅。 常用的方法是：

  • 檢視Adventure卡元件程式碼
  • 新增何時顯示橫幅的邏輯
  • 檢視AEM中的Adventure內容片段模型
  • 變更一或多個Adventure片段屬性以測試規則

為了簡單起見，當冒險活動的價格低於$100時，讓我們顯示​ 熱門交易 ​橫幅。

由於React應用程式會從您的RDE環境取得其資料，因此您需要知道Adventure內容片段模式，然後更新正確的片段屬性。 這正是AEM MCP伺服器可協助處理的問題。 方法如下。

  1. 在IDE的聊天中，鍵入：

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

    檢閱內容片段模型 {modal="regular"}

    在叫用AEM MCP伺服器之前，它會要求確認以繼續。 因此，您可以繼續掌控內容作業。

    AI會使用AEM MCP伺服器擷取資料，然後以清晰、結構化的方式呈現。 其中包括內容片段模式詳細資訊、片段數量和摘要資訊。

  2. 若要觸發​ 熱門交易 ​橫幅，請更新一次冒險的價格。 在同一次聊天中，請嘗試：

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

    更新冒險價格 {modal="regular"}

    同樣地，AI會在更新內容之前要求確認以繼續進行。 也會概述更新前後的內容作業。

  3. 在React應用程式中，確認Beervana卡現在顯示​ HOT DEAL ​橫幅。

    驗證熱門交易橫幅 {modal="regular"}

其他提示

在IDE中嘗試這些以內容為中心的提示（連線到AEM MCP伺服器）以探索更多工作流程和功能。

  • 探索內容：

    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?

  • 搜尋內容：

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

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

  • 更新內容：

    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"

  • 發佈或取消發佈：

    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

恭喜！

您可以在代理式IDE （此範例中為「游標」）中設定AEM MCP伺服器，並將其連線至您的RDE （或開發）環境。 接著，您使用WKND Adventures React應用程式並以自然語言聊天，檢閱Adventure內容片段詳細資訊。 您還更新了片段的價格，讓AI在每次內容作業前要求您確認。 您已在執行中的應用程式中驗證變更。 您可以使用來自IDE的相同以人為中心的流程來檢閱、更新和建立AEM內容，而無需切換至AEM UI或撰寫低階API程式碼。

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