MCP协议第一课，生成一个旅游助手
本次我们利用高德地图的MCP工具+Minimax语音生成工具 以及genmi大模型，加之Cursor作为MCP Client。实现一个旅游景点介绍HTML页面生成工具，该HTML页面还具有语音播报的功能。
在这个助手的开发过程中，会让人理解什么是现在主流的Vibe Coding能力。
就是氛围编程，强调程序员由原本的书写代码改为指导AI生成代码，测试以及优化程序代码。在此过程中，书写代码的流程为说一句话，AI自动生成代码，检视代码，再进行一轮沟通。
回到助手的开发流程：
首先需要我们获取到相关MCP工具的密钥，因为在这里我们先不考虑本地化部署MCP 工具，直接采用线上托管的方式使用。
因此需要相关的密钥
在分别注册高德个人开发者获取到密钥之后
以及注册MiniMax开放平台来提供语音服务后。
之后利用ModelScope上托管的Mcp Server来进行MiniMax的实际调用。
在ModelScope之中填入相关信息，诸如MiniMax_API_HOST
MiniMAX_API_KEY。
之后就是在Cursor之中，配置相关信息
|
{
“mcpServers”: { “MiniMax-MCP”: { “type”: “sse”, “url”: “https://mcp.api-inference.modelscope.cn/在ModelScope托管的url/sse”, “env”: { “MINIMAX_GROUP_ID”: “1在账户信息里复制的GroupID一串数字” } }, “amap-amap-sse”: { “url”: “https://mcp.amap.com/sse?key=在高德开放平台获得的应用密钥” } } } |
在Cursor配置完成相关JSON之中，刷新MCP服务列表，
之后我们进行简单的测试工作，首先在Chat对话框中，输入获取西安主要的旅游景点信息。
这时候会发现Cursor作为client端工具，会自动拉取MCP工具，完成相关任务。
当这一步确认无误之后，就可以进行我们这个MCP工具的开发工作了。
首先要求MCP根据高德的返回，将景点分类之后写入到一个markdown文档之中。
其会自动的将其分类并进行markdown的生成。
其次是将这个markdown上传到Minimax
交给Cursor，其会阅读这个markdown，并利用Minimax进行语音文件的生成。
并将语音文件的连接嵌入到Markdown文档之中
最后我们准备一个Web制作相关的prompt，将生成的Markdown以及Prompt一同交给Cursor，让其进行生成。
|
Markdown
# 页面提示词 ## 网页风格指南 你是一位国际顶尖的数字景区导览设计师和前端开发专家，擅长将传统景区介绍与现代网页设计完美融合，创造出令人身临其境的视觉体验。请设计高品质景区介绍手机h5网页，将景区信息以生动优雅的方式呈现，让用户在浏览前就能感受到景区魅力。 **可选设计风格： **1. **文化复古风格** 适合历史文化类景区，使用仿古纸张纹理背景，搭配书法或篆刻风格的标题。色调以米黄、棕色等复古色系为主，点缀传统中国色。排版可参考古籍设计，正文使用简体宋体增强文化氛围。可加入水墨画元素作为分隔符或装饰。文案语调应庄重有文化底蕴，介绍中可穿插诗词或历史典故。 2. **现代简约风格** 采用极简设计理念，主色调限制在2-3种，确保视觉统一性。排版注重网格系统，所有元素严格对齐。字体选用无衬线体，增强现代感。景点信息使用卡片式设计，便于用户快速浏览。图标采用线性设计，保持风格一致性。动效应简洁克制，仅用于增强用户体验的关键环节。整体设计追求”少即是多”的理念，让内容成为主角。 **必要页面组件：** 1. **景区名称列表**： 1. 景区名称 2. 音频开始按钮：点击音频可以直接播放，播放时可以暂停，暂停的音频还可以继续播放 2. **景区介绍**： 1. 默认收缩，点击景区名称可弹出详细介绍 ## 技术规范 * 资源引用： * 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文件，包含所有景区介绍内容 * 代码应当简洁高效，注释充分，易于维护 * 确保在不同尺寸的移动设备上都能良好展示 * 所有文字内容使用中文输出 * 确保文字的可读性，背景与文字有足够对比度 |
之后交给Agent生成HTML页面
最终得到了一个HTML，可以在本地进行简单的预览。
这就是一个简单的MCP使用教程以及Vibe Coding体验。