用cherry studio+高德 + MiniMax 逛午门，解锁 “听” 古代大臣挨揍现场的奇妙体验

Undoom

发布于 2025-06-16 11:05:18

36100

代码可运行

文章被收录于专栏：学习学习

运行总次数：0

代码可运行

前言

想借助 MCP 解锁故宫午门的宫廷隐秘？选蓝耘 MCP 广场准没错！这里 MCP 资源超丰富，高德、MiniMax 等各类 MCP 随心挑。教程细致到 “保姆级”，新手也能轻松拿捏操作逻辑。关键还有高效搜索功能，关键词一输，所需内容秒定位。再搭配 Cherry Studio 工具，能顺滑实现 MCP 链接，让我们用多元 MCP 合力搭建 “聆听故宫秘事” 的奇妙通道，深挖午门里帝王将相那些不为人知的过往～

关于cherry studio配置MCP的前置教程

如果想正常的运行MCP的话，你得进行依赖的安装操作这里我们是需要安装Uv和Bun两个依赖的这个安装界面我们直接点击右上角的-左边的对号就行了，如果你没有安装下面两个依赖的话他是一个红色的叉叉的

我们这里添加点击添加服务器，选择从JSON导入

因为JSON导入的话难度比较低，如果是快速创建的话我们既要配置这个还要配置那个，就很麻烦，JSON导入的话我们直接把代码已复制粘贴进去就行了

如果是JSON的话，我们将蓝耘MCP广场中的对应MCP的JSON代码进行复制操作

这里我们将代码添加进去后，选择确定，这里会显示服务器添加成功，但是下面会报错，这里大家不要慌，我们点击右边的按钮进行打开试试，先让他进行一个链接操作

如果你的小电脑变成了绿色的话，那么就说明你的MCP链接成功了

获取MiNiMax和高德地图MCP

MiNiMax的配置

这里我们要用到的MCP是MiNiMax和高德地图MCP 下面就教大家如何进行接入操作我们在蓝耘MCP广场进行MiNiMax的搜索点击第三个我们就可以进入到详细界面了

下面是相关的实例代码

{
  "mcpServers": {
    "MiniMax": {
      "command": "uvx",
      "args": [
        "minimax-mcp"
      ],
      "env": {
        "MINIMAX_API_KEY": "<insert-your-api-key-here>",
        "MINIMAX_MCP_BASE_PATH": "<local-output-dir-path>",
        "MINIMAX_API_HOST": "https://api.minimaxi.chat",
        "MINIMAX_API_RESOURCE_MODE": "<optional, [url|local], url is default, audio/image/video are downloaded locally or provided in URL format>"
      }
    }
  }
}

从这个JSON代码中我们可以看出我们需要获取到api-key、本地实现路径、api调用地址、以及资源格式这里的资源格式有两种，一种是cur一种是local api调用地址的话我们选择https://api.minimax.chat就行了，因为我们是国内版本的如果你是国外版本的haul你就得加上i了https://api.minimaxi.chat

现在我们需要获取api了

MiniMax是实现语音讲解的关键！它能根据文本生成自然的语音讲解。

根据蓝耘的教程，并且蓝耘在这里还温馨标识了中文文档的地址，如果不会进行配置的话可以根绝蓝耘提供的教程进行配置

我们要先登录官网注册：https://platform.minimaxi.com/login 点击开始注册

来到注册页，我们填写自己的信息，个人信息就可以了

就像这样

注册成功了以后，来到“平台介绍”，我们点击个人账户

1.点击“接口密钥”；2.点击“创造新的密钥”

填入密钥名，比如“导游”

点击复制，然后保存起来，保存到记事本或其他地方

说明：minimax给了15元的新人额度，大胆用！但是使用有个前提，你得进行实名认证操作，不然是不能进行api调用操作的

地址的话我们就本地创建一个文件夹然后复制地址就行了将对应的信息填写到上面的JSON代码中

{

  "mcpServers": {

    "minimax-mcp-js": {

      "command": "npx",

      "args": [

        "minimax-mcp-js"

      ],

      "env": {

        "MINIMAX_API_HOST": "https://api.minimax.chat",

        "MINIMAX_API_KEY": "你的api",

        "MINIMAX_MCP_BASE_PATH": "D:\\Blue_Cloude",

        "MINIMAX_RESOURCE_MODE": "url"

      }

    }

  }

}

你如果不会使用的话可以模仿下我，如果你还是不会的话，可以来到蓝耘MCP广场的工具详情界面，将你的相关信息输入进去，他就会生成一个专属的MCP的JSON代码，一样是可以进行正常使用的

这里我们在cherry studio进行MiNiMax的链接依照上面的教程来就行了

搞定了就是这个样子

高德MCP的配置

在蓝耘MCP广场中搜索高德地图

这里相关的详细信息

并且提供了如何快速进行接入的文档

然后我们进行高德MCP的配置

打开高德开放平台官网：https://lbs.amap.com/

通过支付宝，进行登录；

点击以后呢，我们扫码登录

勾选同意，然后点击授权

来到这里，我们首先要注册称为高德地图的开发者，高德开发平台是他们的对外合作平台

我们要输入我们的手机号，进行验证码登录

这时候高德要验证，我们是不是骗子，所有要我们验证自己的身份

我们选择个人支付宝扫码认证

点击了以后呢，看到下图红框的地方了吗，这是个快速认证通道，我们直接点击

因为我们刚刚用支付宝登录了，这里只要再次授权就可以了

为什么要两次授权呢？第一次授权是授权登录，第二次授权是查看我们是不是骗子

根据下面的顺序，点击授权

授权以后，我们填入邮箱进行验证

输入你可以接收验证码的邮箱，获取验证码，然后输入

注册成功啦，我们等待进入控制台

接下来，我们要创建一个应用，高德地图创建应用的目的是，如果我们有很多APP要用，分类型就好管理了根据下面的1（应用管理）、2（我的应用）、3（创建新应用）步骤，进行点击

应用名称随便填

应用类型，我们选择第一个出行，确认新建

我们点击“添加key”，这个相当于门禁卡，我们去访问高德地图的时候，需要通过门禁，才能进去

1：我们名称随便填；2：选择web服务；3：勾选同意；4：提交

提交了以后呢，我们就会看到这样的key，一定要复制下来

当你获取到了API了之后，来到我们高德MCP的页面

将你的MCP输入进去，就能生成一个专属的MCP代码了

{
  "mcpServers": {
    "amap-maps": {
      "type": "sse",
      "url": "http://xxxxxxxxxxxxxxxx.mcp.lanyun.net:8088/sse/MiniMax-MCP"
    }
  }
}

获取到代码后，我们进行MCP的绑定操作

配置好了就是这个样子

实操

接下来，我们要通过高德，获取景点的详细信息

例如我说，“根据高德地图，获取故宫景区内的主要景点” 我们来到cherry studio的主界面，点击MCP服务器

将两个MCP服务器都勾选上

这里我们对ai说：调用高德MCP获取故宫景点的信息

在百度百科上搜索相关历史典故，名称由来等，对每个景点生成一个详细介绍结合一些历史电视剧的情节然后他会给我们生成一段文字命令他，生成一个新的文件，自己手动新建也可以这个是调用后的结果

我们将上面的内容进行保存，保存在一个md文件中我们新建一个文件，叫提示词.md

# 页面提示词

## 网页风格指南

你是一位国际顶尖的数字景区导览设计师和前端开发专家，擅长将传统景区介绍与现代网页设计完美融合，创造出令人身临其境的视觉体验。

请设计高品质景区介绍手机h5网页，将景区信息以生动优雅的方式呈现，让用户在浏览前就能感受到景区魅力。

**可选设计风格：**

1. **文化复古风格**
   适合历史文化类景区，使用仿古纸张纹理背景，搭配书法或篆刻风格的标题。色调以米黄、棕色等复古色系为主，点缀传统中国色。排版可参考古籍设计，正文使用简体宋体增强文化氛围。可加入水墨画元素作为分隔符或装饰。文案语调应庄重有文化底蕴，介绍中可穿插诗词或历史典故。

2. **现代简约风格**
   采用极简设计理念，主色调限制在2-3种，确保视觉统一性。排版注重网格系统，所有元素严格对齐。字体选用无衬线体，增强现代感。景点信息使用卡片式设计，便于用户快速浏览。图标采用线性设计，保持风格一致性。动效应简洁克制，仅用于增强用户体验的关键环节。整体设计追求"少即是多"的理念，让内容成为主角。

**必要页面组件：**

1. **景区名称列表**：
   2. 景区名称
   3. 音频开始按钮：点击音频可以直接播放
4. **景区介绍**： 
   5. 默认收缩，点击景区名称可弹出详细介绍

## 技术规范

* 资源引用：
  * Tailwind CSS: `https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css`
  * Font Awesome: `https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css`
  * 中文字体: `https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap`
  * Alpine.js: `https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js`

* 音频处理：
  * 使用HTML5 audio元素实现音频播放
  * 实现自定义播放控制按钮
  * 支持语音解说的暂停/继续功能

## 输出要求

* 提供一个完整的HTML文件，包含所有景区介绍内容
* 代码应当简洁高效，注释充分，易于维护
* 确保在不同尺寸的移动设备上都能良好展示
* 所有文字内容使用中文输出
* 确保文字的可读性，背景与文字有足够对比度

## 待处理内容：

如果你的cherry不工作了，你也可以试着用cursor和trae进行链接试试让他们生成对应的文档这里我们在内容中带上这两个文档，让他根据要求生成有声网页

这里还能看到返回的链接

然后我们将代码进行整合一下就行了效果如下：

后期我们是可以进行进一步的优化操作的

具体代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>故宫景点导览</title>

    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">

    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">

    <script src="https://unpkg.com/alpinejs@3.10.5/dist/cdn.min.js" defer></script>

    <style>

        body {

            font-family: 'Noto Serif SC', serif;

            background-color: #f9f6f1;

        }

        .site-title {

            font-family: 'Noto Serif SC', serif;

            color: #8b4513;

        }

        .spot-card {

            background-color: #fff;

            border: 1px solid #e8e4e1;

            transition: all 0.3s ease;

        }

        .spot-card:hover {

            transform: translateY(-2px);

            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

        }

        .play-button {

            background-color: #8b4513;

            color: #fff;

            transition: all 0.3s ease;

        }

        .play-button:hover {

            background-color: #6b3410;

        }

        .spot-content {

            display: none;

        }

        .spot-content.active {

            display: block;

        }

    </style>

</head>

<body class="min-h-screen py-8 px-4">

    <div class="max-w-3xl mx-auto" x-data="{

        activeSpot: null,

        audioPlayers: {

            yuhuage: {

                url: 'https://minimax-algeng-chat-tts.oss-cn-wulanchabu.aliyuncs.com/audio%2Ftts-mp3-20250615124709-EezzOBtq.mp3?Expires=86401749962829&OSSAccessKeyId=LTAI5tGLnRTkBjLuYPjNcKQ8&Signature=5FY56nP7PZMan%2BtY7S%2B7p7sB6NU%3D',

                isPlaying: false,

                audio: null

            },

            taihedian: {

                url: 'https://minimax-algeng-chat-tts.oss-cn-wulanchabu.aliyuncs.com/audio%2Ftts-mp3-20250615124902-YOEDPAda.mp3?Expires=86401749962942&OSSAccessKeyId=LTAI5tGLnRTkBjLuYPjNcKQ8&Signature=TZFQIvZjtiYg7pEmzk%2FAXlez73o%3D',

                isPlaying: false,

                audio: null

            },

            qianqinggong: {

                url: 'https://minimax-algeng-chat-tts.oss-cn-wulanchabu.aliyuncs.com/audio%2Ftts-mp3-20250615125004-lEHxeDfK.mp3?Expires=86401749963004&OSSAccessKeyId=LTAI5tGLnRTkBjLuYPjNcKQ8&Signature=%2FI%2FRtw%2BB7IGEqS%2FU8ncYhsje0bY%3D',

                isPlaying: false,

                audio: null

            }

        },

        toggleSpot(spot) {

            this.activeSpot = this.activeSpot === spot ? null : spot;

        },

        initAudio(spot) {

            if (!this.audioPlayers[spot].audio) {

                this.audioPlayers[spot].audio = new Audio(this.audioPlayers[spot].url);

                this.audioPlayers[spot].audio.addEventListener('ended', () => {

                    this.audioPlayers[spot].isPlaying = false;

                });

            }

        },

        playAudio(spot) {

            this.initAudio(spot);

            // 停止其他正在播放的音频

            Object.keys(this.audioPlayers).forEach(key => {

                if (key !== spot && this.audioPlayers[key].isPlaying) {

                    this.audioPlayers[key].audio.pause();

                    this.audioPlayers[key].audio.currentTime = 0;

                    this.audioPlayers[key].isPlaying = false;

                }

            });

            if (this.audioPlayers[spot].isPlaying) {

                this.audioPlayers[spot].audio.pause();

                this.audioPlayers[spot].isPlaying = false;

            } else {

                this.audioPlayers[spot].audio.play();

                this.audioPlayers[spot].isPlaying = true;

            }

        }

    }">

        <h1 class="site-title text-4xl font-bold text-center mb-12">故宫景点导览</h1>

        <div class="space-y-6">

            <!-- 雨花阁 -->

            <div class="spot-card rounded-lg overflow-hidden">

                <div class="p-4 flex justify-between items-center cursor-pointer" @click="toggleSpot('yuhuage')">

                    <h2 class="text-xl font-semibold">雨花阁</h2>

                    <div class="flex items-center space-x-4">

                        <button class="play-button rounded-full p-3" @click.stop="playAudio('yuhuage')">

                            <i class="fas" :class="audioPlayers.yuhuage.isPlaying ? 'fa-pause' : 'fa-play'"></i>

                        </button>

                        <i class="fas" :class="activeSpot === 'yuhuage' ? 'fa-chevron-up' : 'fa-chevron-down'"></i>

                    </div>

                </div>

                <div class="spot-content p-4 bg-gray-50" :class="{ 'active': activeSpot === 'yuhuage' }">

                    <p class="text-gray-700 leading-relaxed">

                        雨花阁位于故宫内西路春华门内，是宫中最大的藏传佛教密宗佛堂。它始建于清乾隆十四年（1749年），是乾隆皇帝仿照西藏阿里古格的托林寺坛城殿而建的。雨花阁的名称由来，一说与南京雨花台的传说有关，相传梁武帝时云光法师在此讲经，感动上天，天花散落如雨，故名"雨花台"，雨花阁可能取此意境。另一说，更直接的是因其在春华门内，取"春花秋雨"之意，象征着自然的美好与佛教的禅意。

                    </p>

                </div>

            </div>

  

            <!-- 太和殿 -->

            <div class="spot-card rounded-lg overflow-hidden">

                <div class="p-4 flex justify-between items-center cursor-pointer" @click="toggleSpot('taihedian')">

                    <h2 class="text-xl font-semibold">太和殿</h2>

                    <div class="flex items-center space-x-4">

                        <button class="play-button rounded-full p-3" @click.stop="playAudio('taihedian')">

                            <i class="fas" :class="audioPlayers.taihedian.isPlaying ? 'fa-pause' : 'fa-play'"></i>

                        </button>

                        <i class="fas" :class="activeSpot === 'taihedian' ? 'fa-chevron-up' : 'fa-chevron-down'"></i>

                    </div>

                </div>

                <div class="spot-content p-4 bg-gray-50" :class="{ 'active': activeSpot === 'taihedian' }">

                    <p class="text-gray-700 leading-relaxed">

                        太和殿，俗称"金銮殿"，是紫禁城内等级最高、体量最大的建筑，也是中国现存最大的木结构大殿。它始建于明永乐十八年（1420年），初名奉天殿。嘉靖年间改称皇极殿。清顺治二年（1645年）改名为太和殿。"太和"二字取自《周易·乾卦》"乾道变化，各正性命，保合太和，乃利贞"之意，象征宇宙万物和谐，寓意国家政权稳固、天下太平。

                    </p>

                </div>

            </div>

  

            <!-- 乾清宫 -->

            <div class="spot-card rounded-lg overflow-hidden">

                <div class="p-4 flex justify-between items-center cursor-pointer" @click="toggleSpot('qianqinggong')">

                    <h2 class="text-xl font-semibold">乾清宫</h2>

                    <div class="flex items-center space-x-4">

                        <button class="play-button rounded-full p-3" @click.stop="playAudio('qianqinggong')">

                            <i class="fas" :class="audioPlayers.qianqinggong.isPlaying ? 'fa-pause' : 'fa-play'"></i>

                        </button>

                        <i class="fas" :class="activeSpot === 'qianqinggong' ? 'fa-chevron-up' : 'fa-chevron-down'"></i>

                    </div>

                </div>

                <div class="spot-content p-4 bg-gray-50" :class="{ 'active': activeSpot === 'qianqinggong' }">

                    <p class="text-gray-700 leading-relaxed">

                        乾清宫是紫禁城内廷的中心建筑，是明清两代皇帝处理政务和日常起居的正殿。"乾"取自《周易》"乾"卦，象征君权至上；"清"意为清净，表示皇帝居所的庄严神圣。乾清宫始建于明永乐十八年（1420年），建筑规制为重檐庑殿顶，面阔九间，进深五间。殿内陈设以龙为主题，突出皇权至上的理念。这里是皇帝日常召见大臣、批阅奏章的地方，也是举行登基大典、皇帝大婚等重要典礼的场所。

                    </p>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

打开编译器终端输入命令python -m http.server 8000就能进行预览操作了效果还是很不错的，后期可以尝试部署到edge上

总结

蓝耘 MCP 广场与 Cherry Studio 的组合，不仅是技术工具的应用，更是一场 “让历史‘发声’” 的数字实验如果你也想体验下不妨来试试蓝耘MCP广场呢如果你也想体验的话但是还没有注册的话可以点击注册，输入相关信息就可以完成注册了。

https://cloud.lanyun.net/#/registerPage?promoterCode=5663b8b127

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除

音频

高德地图

配置

设计

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度