AIパーソナル・ラーニング
と実践的なガイダンス
ビーンバッグ・マースコード1

AliCloud百錬MCPサービス評価とエージェント構築の実践

近い将来にね。MCP(モデル・コーリング・プロトコル)は、技術界では頻度の高い用語となっている。簡単に言えばMCP 大規模言語モデル(LLM)用の外部ツールやサービスの利用プロセスを簡素化するように設計されており、開発者やユーザーが複雑なAIアプリケーションを構築する際の障壁を大幅に下げる。関連プロトコルのリリースに伴い、ここ数ヶ月でLLMのサポートが急増している。 MCP ツールとサービス。

しかし MCP 使用の論理(自然言語を通じてAIに要求を出す)は比較的直感的だが、設定プロセスはしばしば非常に複雑である。現在 MCP クライアント・ソフトウェア Claude またはAI機能を統合したIDE Cursorしかし、それ自体には一定の学習曲線がある。さらに重要なのは、コンフィギュレーション MCP サービスはしばしば特定の実行環境のインストールを必要とし、ユーザーはコマンドラインツールを理解し使用する必要がある。以前のチュートリアルでは、これらのステップを詳しく説明することを試みたものもあったが、それでも理解や操作が難しいというユーザーもいた。


業界は、以下を簡素化するプラットフォームを期待している。 MCP 理想的には、アプリショップのようにワンクリックでデプロイできるようにすることだ。最近阿里云百炼 同プラットフォームは、このニーズに応え、業界初となる、以下のような完全なライフサイクル管理を実現したという。 MCP サービスこのサービスは、企業、開発者、そして個人ユーザーまでもが、視覚的なインターフェイスを通じて、簡単に Agents ワンクリック配備のためのアプリケーション MCP サービス

阿里云百炼 テラス MCP サービスの主な特徴は以下の通り:

  1. ワンクリック配備複雑な操作やメンテナンスを必要としないワンクリックのソリューションを提供します。 MCP サービス展開。
  2. 豊富なMCP供給内蔵 MCP 多くの公式およびサードパーティを含むマーケットプレイス MCP 道具だ。
  3. 低コストのサービス・ホスティング弾力的なスケーリングと従量課金のための機能ベースのコンピューティング・リソース。
  4. リンクツールの完全互換性エージェントやワークフローで素早く参照できる MCP サービス

画像

予備テストでは阿里云百炼 プラットフォームは劇的に簡素化される MCP デプロイメントとコンフィギュレーション・プロセスユーザーは、基礎となる環境の詳細に気を配る必要はほとんどなくなり、サービスをオンにした後、次のような利点を利用し始めることができる。 MCP 確立 Agents アプリケーション

以下は、以下の2つの例です。 阿里云百炼 な MCP 実用的なサービス Agents アプリケーション

ケース1:Gold Weather MCPと組み合わせて、天気の視覚化ウェブページを作成する。

最初のケースは、Goldmapの MCP このサービスは、指定した場所の天気を照会し、AIがカスタムスタイルの天気予報ウェブページを生成する。

ステップ1:AutoNavi MCPサービスを有効にする

まずは 阿里云百炼 プラットフォームの (https://bailian.console.aliyun.com/?tab=mcp#/mcp-market) MCP マーケットプレイスマーケットプレイスを検索し、"AutoNavi Open Platform "製品を見つける。 MCP サービス報告書によると、アリクラウド・システム内のサービスとして MCP 公開バージョンよりも豊富な機能を提供するかもしれない。

画像

クリックするとサービスが開きます。

ステップ2:スマートボディ・アプリケーションの作成

サービスが有効化されたら、「アプリケーション」タブの「アプリケーション管理」に切り替え、「アプリケーションの追加」ボタンをクリックします。通常、アプリケーションの種類として「スマートボディ」を選択するのが適切です。

画像

ステップ3:アプリケーションの設定

アプリケーション設定インターフェースに入る。まず、プラットフォームがデフォルトで推奨するベースモデルを選択します。 通义千问 Max.オリジナルの著者の試みに基づいている。DeepSeek 当時、モデリングは十分にサポートされていなかったようだ。 MCP コールの互換性を確保するため、最初は推奨モデルを使用することが推奨される。

画像

次に、インテリジェンスを加える。 MCP サービスMCP "ボタンをクリックし、ポップアップサイドバーで、今開いたGODEにチェックを入れる。 MCP サービス

画像

ステップ4:プロンプトを書く

最後のステップは、AIにタスクの実行方法を指示するキューワードを書くことだ。以下は、AIにフロントエンドエンジニアを演じさせ、天気を呼び出すよう指示するキューのサンプルだ。 MCP で、特定のスタイル(Netflixスタイル)でウェブページを生成する。ユーザーが複雑なキューを書くことに慣れていない場合阿里云百炼 このプラットフォームは、キュー・ワードの最適化も提供する。

# 角色
你是一位专业的前端开发工程师,擅长使用 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 输出。

画像

ステップ5:実行とテスト

設定が完了したら、右側のダイアログボックスに希望の場所(例:「北京」)を入力します。スマートボディが自動的にGaode MCP 気象データを取得し、キュー・ワードが要求するHTMLウェブ・ページ・コードを生成する。生成されたウェブページは、プラットフォームが提供するArtifact出力で閲覧・ダウンロードできる。

(元記事の著者は、ユーザーエクスペリエンスのために共有リンクを提供した: https://bailian.console.aliyun.com/share/e1204f6a3d2f4d419f55a492c8aa8699?memoryId=e1384d68e5a044eeaa1dfeb558322d66)

画像

ケース2: FirecrawlとFlomo MCPを組み合わせたウェブコンテンツの要約とメモ作成

2つ目のケースはもう少し複雑で、AIが与えられたウェブページのコンテンツを自動的にクロールし、要約し、その要約をタグとともに Flomo をメモアプリに追加しました。このケースでは、2つのサードパーティ MCP 服务:Firecrawl(ウェブクローリング用)と Flomo(メモ用)。

ステップ1:APIキーの取得

サードパーティのサービスを使用するため、まず、適切な API Key.

  • Firecrawl APIキーアクセス Firecrawl 公式ウェブサイト(https://www.firecrawl.dev/app/api-keys)にログインし、サイドバーにある API Keys メニューから API Key 交互だ。

    画像

  • フロモAPIアクセス Flomo 公式ウェブサイト(https://v.flomoapp.com/mine?source=incoming_webhook)、バックアップのために独自レコードのAPIアドレスをコピーしてください。

    画像

ステップ 2: Firecrawl と Flomo MCP サービスの有効化

かえる 阿里云百炼 な MCP マーケットプレイス、検索、見つける Firecrawl 歌で応える Flomo な MCP サービスサービスを開始する際、事前に取得した API Key またはAPIアドレス。

画像

ステップ 3: インテリジェント・ボディ・アプリケーションの作成と設定

再度アプリケーション管理にアクセスし、新しいSmartBodyアプリケーションを作成します。ベースモデルを選択する(こちらも推奨) 通义千问 Max)、"+MCP "ボタンで開いたばかりのMCPを追加する。 Firecrawl 歌で応える Flomo MCP サービス

画像

ステップ4:プロンプトを書く

AIがウェブをクロールし、要約し、記録するのを導くためのキューを書く。 Flomo ミッションの

原著者の経験では、ウェブページへの直接リンクを提供するだけでは、AIが正しく Firecrawl MCP.モデルにとって、どのパラメータを渡す必要があるのかが明確でない場合がある。このような場合は、明示的に MCP 問題を効果的に解決できるコールパラメータの例。

以下は参考となるキューワードである:

画像

# 角色
你是一位内容整理专家,负责查询和总结用户输入的网页内容,并将相关内容总结后用中文记录到 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
}
}

ステップ5:実行とテスト

ダイアログボックスに要約するウェブページへのリンクを入力する。スマートボディは、ダイアログ・ボックスから Firecrawl MCP ページ取得 Markdown その内容を要約して Flomo MCP タグ付けされた要約をユーザーの Flomo アカウント

画像
画像

この2つのケースを通してわかるように阿里云百炼 プラットフォームの全ライフサイクル MCP このサービスは、次のような機会を提供する。 MCP 造る Agents アプリケーションは、特にコンフィギュレーションとデプロイメントを簡素化し、使用への障壁を下げるという点で、大きな利便性を提供する。これは、外部ツールやサービスをAIアプリケーションに迅速に統合したいと考えている開発者やユーザーにとって、注目すべき発展である。

無断転載を禁じます:チーフAIシェアリングサークル " AliCloud百錬MCPサービス評価とエージェント構築の実践
ja日本語