Qoder CN + AMAP MCP: Customize a Travel Guide Webpage in 30 Minutes

This topic describes how to use the Qoder CN agent and AMAP MCP 2.0 to create a three-day travel guide webpage. You can then import the generated travel guide into the AMAP app to create a custom map, so you can use it for on-trip needs such as store discovery, navigation, ride-hailing, and ticket booking.

​

Prerequisites

• You have installed Qoder CN in your IDE, version 2.5 or later.
• You have obtained an AMAP key.

​

Video demo

​

Step 1: Add the MCP service

1. Click the Qoder CN icon in the IntelliJ IDEA sidebar to open the Smart Session. This topic uses IntelliJ IDEA. The Qoder CN icon may be in a slightly different location in other IDEs; see the installation guide to enter the smart session.
2. On the Smart Session page, you can access the MCP Service page in two ways:

• Method 1: Click the MCP Tool link in the welcome message to open the MCP Service page.
• Method 2: Click your avatar in the upper-right corner, select Personal Settings from the drop-down menu, and then click the bar under MCP Service on the Personal Settings page.

3. Click + to the right of MCP Service and select Manually Add. On the Add MCP Service page, configure the following:

• Name: Enter a service name, for example, amap-sse.
• Type: Select SSE.
• Service endpoint: https://mcp.amap.com/sse?key=<your AMAP key>. Replace <your AMAP key> with the key from Obtain an AMAP key. Do not include spaces.

4. Click Add Now. When the link icon turns green, the MCP service has been added successfully.
   

​

Step 2: Generate the travel_tips.html file

1. Open the Qoder CN Smart Session dialog and switch to Agent mode.
2. Enter the following prompt in the dialog and press Enter:
   Copy

   ##Travel guide for a 3-day Dragon Boat Festival trip to Beijing (May 31, 2025 to June 2, 2025).
   #Help me create a travel guide, considering travel time, routes, and weather conditions for route planning.
   #Create a webpage. The page should include weather cards displaying 3-day weather details and travel tips. Display daily travel plans, with 3 attractions scheduled each day.
   #Create a webpage map to custom draw travel routes and locations.
   ##The webpage should have a simple and elegant style, with scenic spot images displayed as cards.
   #Display the itinerary planning results in the AMAP app and integrate them into an H5 page.
   ##I want to take a taxi between scenic spots on the same day.
   #Generate file name travel_tips.html.
   
   
3. Qoder CN plans the task and calls the necessary tools autonomously, ultimately generating the travel_tips.html file.
   
4. The final generated page is shown below.

• If the appearance, layout, font, or color of the generated page does not meet your expectations, continue the conversation with Qoder CN to refine it.
• If you cannot view the preview, select the Qoder CN agent model and let the AI generate a preview for you.