AI Personal Learning
and practical guidance
Beanbag Marscode1

AliCloud Hundred Refined MCP Service Evaluation and Agent Construction Practical Practice

In the near future.MCP(Model Calling Protocol) has become a high-frequency term in the technical circle. Simply put.MCP Designed to simplify the process of using external tools or services for Large Language Models (LLMs), it significantly lowers the barrier for developers and users to build complex AI applications. With the release of the associated protocol, there has been an influx of support in recent months for the MCP tools and services.

However, despite MCP While the logic of use (making requests to the AI through natural language) is relatively intuitive, the configuration process is often quite complex. Currently there is support for MCP Client software such as Claude or an IDE with integrated AI functionality Cursor, itself has a certain learning curve. More critically, the configuration MCP Services often require the installation of a specific runtime environment and require users to understand and use command line tools, which undoubtedly creates barriers for many non-specialized developers. Some previous tutorials have attempted to explain these steps in detail, but some users still report difficulty in understanding and operating them.


The industry expects a platform to simplify MCP configuration process, ideally enabling one-click deployment like an app store. Recently, the阿里云百炼 The platform responded to this need with what it claims to be the industry's first to offer full lifecycle management of the MCP Service. The service is designed to make it easy for enterprises, developers and even individual users to build and manage through a visual interface Agents Applications for one-click deployment MCP Services.

阿里云百炼 flat-roofed building MCP Key features of the service include:

  1. One-Click Deployment: Provides a one-click solution that does not require complex operations and maintenance. MCP Service deployment.
  2. Abundant MCP supply: Built-in MCP Marketplace, including many official and third-party MCP Tools.
  3. Low-cost service hosting: Function-based computing resources for elastic scaling and pay-as-you-go.
  4. Full link tool compatibility: can be quickly referenced in Agents and workflows MCP Services.

Image

Preliminary tests have shown that阿里云百炼 The platform does dramatically simplify MCP deployment and configuration process. Users now have little need to concern themselves with the details of the underlying environment, and after turning on the service they can start utilizing the MCP establish Agents Applications.

Below are two examples showing how to use the 阿里云百炼 (used form a nominal expression) MCP Services to build practical Agents Applications.

Case 1: Combine with Gold Weather MCP to generate weather visualization webpage

The first case demonstrates how to call Goldmap's MCP The service queries the weather for a given location and lets AI generate a custom-styled weather forecast web page.

Step 1: Enable AutoNavi MCP service

First, visit the 阿里云百炼 of the Platform (https://bailian.console.aliyun.com/?tab=mcp#/mcp-market) MCP Marketplace. Search the marketplace and find the "AutoNavi Open Platform" offerings. MCP Service. According to the report, as a service within the AliCloud system, the MCP may offer richer functionality than the public version.

Image

Click to open the service.

Step 2: Creating a Smartbody Application

Once the service is activated, switch to "Application Management" under the "Applications" tab and click the "Add Application" button. Selecting "Smart Body" as the application type is usually the appropriate choice.

Image

Step 3: Configure the application

Enter the application configuration interface. First select the base model, which is recommended by the platform by default 通义千问 Max. Based on the attempts of the author of the originalDeepSeek The model did not appear to be fully supported at the time MCP call, it is recommended that the recommended model be used initially to ensure compatibility.

Image

Next, add the intelligent body to the MCP Service. Click the "+MCP" button, and in the pop-up sidebar, check the GODE just opened MCP Services.

Image

Step 4: Write a Prompt

The final step is to write a cue word that instructs the AI how to perform the task. Here's a sample cue that instructs the AI to play front-end engineer and call the weather MCP and generate web pages in a specific style (Netflix style). If the user is not familiar with writing complex cues阿里云百炼 The platform also offers cue word optimization.

# 角色
你是一位专业的前端开发工程师,擅长使用 HTML5、TailwindCSS 3.0+、JavaScript 以及相关的库和工具,能够根据用户输入的位置查询当天及未来七天的天气内容,生成一个具有网易云音乐风格视觉设计的动态天气预报网页。
## 技能
### 技能 1: 天气数据获取
- 根据用户提供的位置信息,调用天气 API 获取当天及未来七天的天气数据。
- 确保数据的准确性和时效性。
### 技能 2: HTML5 页面构建
- 使用 HTML5 构建基础的网页结构。
- 确保页面结构清晰、简洁,并符合语义化标准。
### 技能 3: TailwindCSS 3.0+ 样式设计
- 通过 CDN 引入 TailwindCSS 3.0+,并利用其类名系统进行样式设计。
- 设计符合网易云音乐风格的视觉效果,白色底色配合与 #FE1110 相近的颜色作为高亮。
- 强调超大字体或数字突出核心要点,画面中有超大视觉元素强调重点,与小元素的比例形成反差。
- 运用高亮色自身透明度渐变制造科技感,但不同高亮色不要互相渐变。
### 技能 4: 动态效果实现
- 使用 Framer Motion(通过 CDN 引入)实现页面动效。
- 模仿 Apple 官网的动效,向下滚动鼠标时配合动效,提升用户体验。
### 技能 5: 数据可视化
- 使用专业图标库如 Font Awesome 或 Material Icons(通过 CDN 引入)进行数据可视化。
- 避免使用 emoji 作为主要图标。
- 可以引用在线的图表组件,确保样式与主题一致。
### 技能 6: 中英文混用
- 页面中采用中英文混用的方式,中文大字体粗体,英文小字作为点缀。
- 确保文字排版美观、易读。
### 技能 7: 代码优化
- 保证代码的可维护性和扩展性。
- 代码注释清晰,便于后续维护。
## 限制
- 页面设计必须符合网易云音乐风格,白色底色配合与 #FE1110 相近的颜色作为高亮。
- 页面中的文字应中英文混用,中文大字体粗体,英文小字作为点缀。
- 不能省略内容要点,确保所有关键信息都展示在页面上。
- 不要使用 emoji 作为主要图标。
- 动态效果需模仿 Apple 官网的动效,向下滚动鼠标时配合动效。
- 所有使用的库和工具(如 Framer Motion、TailwindCSS 3.0+、Font Awesome 或 Material Icons)都通过 CDN 引入。
- 生成的 HTML 页面需要通过 Artifact 输出。

Image

Step 5: Run and Test

Once the configuration is complete, enter the desired location (e.g. "Beijing") in the dialog box on the right. The smart body will automatically call the Gaode MCP Obtain weather data and generate HTML web page code as required by the prompt word. Users can view and download the generated web pages in the Artifact output provided by the platform.

(The author of the original article provided a share link for the user experience: https://bailian.console.aliyun.com/share/e1204f6a3d2f4d419f55a492c8aa8699?memoryId=) e1384d68e5a044eeaa1dfeb558322d66)

Image

Case 2: Combining Firecrawl and Flomo MCP for Web Content Summarization and Note Taking

The second case is a bit more complex, with the goal being to have the AI automatically crawl the content of a given web page, summarize it, and save the summary along with the tags to the Flomo in the Notes application. This case involves two third-party MCP 服务:Firecrawl(for web crawling) and Flomo(for note-taking).

Step 1: Get API Keys

Since a third-party service is used, it is necessary to first obtain the appropriate API KeyThe

  • Firecrawl API Key:: Access Firecrawl Official website (https://www.firecrawl.dev/app/api-keys), log in and find in the sidebar the API Keys menu to generate or copy a API Key Alternate.

    Image

  • Flomo API:: Access Flomo Official website (https://v.flomoapp.com/mine?source=incoming_webhook), copy your proprietary record API address for backup.

    Image

Step 2: Enable Firecrawl and Flomo MCP Services

come (or go) back 阿里云百炼 (used form a nominal expression) MCP Marketplace, search and find Firecrawl cap (a poem) Flomo (used form a nominal expression) MCP Service. When opening the service, you will be prompted to enter the previously acquired API Key or API address.

Image

Step 3: Create and Configure the Smartbody Application

Go to Application Management again and create a new SmartBody application. Select the base model (also recommended) 通义千问 Max), and add the just-opened MCP via the "+MCP" button. Firecrawl cap (a poem) Flomo MCP Services.

Image

Step 4: Write a Prompt

Write cues to guide the AI through web crawling, summarizing, and recording to the Flomo of the mission.

It is worth noting that in the experience of the original author, providing a direct link to the web page may not be sufficient for the AI to correctly invoke the Firecrawl MCP. It may not be clear to the model which parameters need to be passed. In this case, include a cue word with an explicit MCP Example of a call parameter that can effectively solve the problem.

Here are the reference cue words:

Image

# 角色
你是一位内容整理专家,负责查询和总结用户输入的网页内容,并将相关内容总结后用中文记录到 Flomo 中,同时添加适当的标签。
## 技能
### 技能 1: 查询和总结网页内容
- 根据用户提供的网页链接,使用 Firecrawl MCP 工具获取网页的 Markdown 内容。
- 阅读并理解网页的主要内容,用中文提取关键信息和要点。
- 将提取的信息进行简洁而全面的总结。
### 技能 2: 记录到 Flomo
- 调用 Flomo MCP 将总结的内容记录到 Flomo 中。
- 确保记录的内容格式清晰、易于阅读。
- 在记录内容时,添加适当的标签以便于后续查找和分类。
### 技能 3: 添加标签
- 根据总结的内容,选择 1 个合适的标签。
- 标签格式为 `#` 后面加词语,每个标签后换行。
- 标签添加在最前面。
- 确保标签准确反映内容的主题和关键词。
## 限制
1. 总结的内容必须为中文。
2. 只需要一个标签。
3. 标签 # 号与词语之间不要有空格。
## Firecrawl MCP 工具的示例查询代码为:
{
"name": "firecrawl_scrape",
"arguments": {
"url": "https://example.com",
"formats": ["markdown"],
"onlyMainContent": true,
"waitFor": 1000,
"timeout": 30000,
"mobile": false,
"includeTags": ["article", "main"],
"excludeTags": ["nav", "footer"],
"skipTlsVerification": false
}
}

Step 5: Run and Test

Enter a link to a web page to be summarized in the dialog box. The smartbody should be able to successfully call the Firecrawl MCP Get the page Markdown content, then summarize it and call Flomo MCP Send the tagged summary to the user's Flomo Account.

Image
Image

As can be seen through these two cases, the阿里云百炼 Full life cycle of the platform MCP Services are indeed utilized for MCP construct (sth abstract) Agents Applications offer great convenience, especially in terms of simplifying configuration and deployment and lowering the barrier to use. This is a noteworthy development for developers and users looking to quickly integrate external tools and services into AI applications.

May not be reproduced without permission:Chief AI Sharing Circle " AliCloud Hundred Refined MCP Service Evaluation and Agent Construction Practical Practice
en_USEnglish