Deezer音乐搜索 - ChatGPT MCP集成
一个通过模型上下文协议（MCP）集成Deezer API的Next.js应用程序，能够在ChatGPT中直接实现音乐搜索功能，并以美观的界面展示搜索结果。
概述
这个项目展示了如何使用（某技术或工具）构建一个音乐搜索应用程序 OpenAI 应用程序开发工具包 (Apps SDK) 以及模型上下文协议（MCP）。它连接到Deezer API，并在ChatGPT内部以现代、交互式的小部件形式显示搜索结果。
特点/特性
- 🎵（音乐符号，无实际翻译内容，可表示音乐或旋律） 音乐搜索在Deezer上使用简单或高级查询搜索曲目
- 🎨 表示涂鸦或绘画相关的表情符号，可翻译为“🎨（涂鸦/绘画）”。在具体语境中，可根据需要进一步解释或描述为“🎨（涂鸦艺术）”、“🎨（绘画创作）”等。 现代用户界面（Modern UI）展示精美的结果，包括专辑封面、艺术家信息和音频预览
- 🎧（耳机图标，无实际文字含义，可理解为“耳机”或保持原样不翻译） 音频预览在小部件中直接收听30秒的曲目预览
- 🔍 翻译成中文是：放大镜（或用于表示搜索、查看细节等动作的符号） 高级过滤器按艺术家、专辑、曲目、时长、BPM（每分钟节拍数）等条件筛选
- 🌓 深色模式全面支持深色模式
- 📱 响应式的在所有屏幕尺寸上都能完美运行
使用示例
一旦连接到ChatGPT，您就可以使用自然语言来搜索音乐：
基本搜索
- “搜索Eminem”
- “查找Coldplay的歌曲”
- “给我播放德雷克的歌”
高级搜索
- “按艺术家查找曲目：Aloe Blacc 的曲目：《我需要一美元》”
- “搜索歌曲，要求时长至少300秒，最高BPM不超过140”
- 查找艺术家：“披头士乐队”，专辑：“艾比路”
高级搜索筛选器
Deezer API支持以下高级过滤器：
| 过滤器 | 描述 | 示例 |
|---|---|---|
artist:"name" | 按艺术家名称搜索 | artist:"coldplay" |
album:"title" | 按专辑名称搜索 | album:"parachutes" |
track:"name" | 按曲目名称搜索 | track:"yellow" |
label:"name" | 按唱片公司搜索 | label:"parlophone" |
dur_min:seconds | 最短持续时间 | dur_min:180 |
dur_max:seconds | 最长持续时间 | dur_max:300 |
bpm_min:value | 最低每分钟节拍数（BPM） | bpm_min:120 |
bpm_max:value | 最大BPM（每分钟节拍数） | bpm_max:140 |
你可以组合多个过滤器： artist:"aloe blacc" track:"i need a dollar" dur_min:200
关键组件
1. MCP 服务器路由（app/mcp/route.ts)
将Deezer搜索工具暴露给ChatGPT的核心MCP服务器。
Deezer搜索工具：
- 接受搜索查询，可选严格模式和排序功能
- 支持基本和高级搜索语法
- 返回包含曲目信息、艺术家详情和专辑封面的结构化数据
- 包含API故障的错误处理
工具配置：
{
query: string, // Search query (basic or advanced)
strict?: boolean, // Disable fuzzy search
order?: enum // Sort order (RANKING, TRACK_ASC, etc.)
}2. 小部件用户界面（Widget UI）app/page.tsx)
一个以美观、交互式格式展示搜索结果的React组件。
特点：
- 响应式布局的专辑封面显示
- 曲目信息，包括标题、艺术家和专辑
- 持续时间格式化和显式内容徽章
- 30秒预览的集成音频播放器
- 在Deezer上链接到完整曲目和艺术家页面
- 带有有用搜索示例的空状态
- 错误处理和显示
- 全面支持深色模式
入门指南
安装
pnpm install
# or
npm install发展
pnpm dev
# or
npm run dev开放 http://localhost:3000 翻译为中文是：“本地主机上的3000端口”。不过，通常在中文语境下，我们可能会简化为“本地3000端口”或直接说“localhost:3000”，因为“localhost”在中文中也常被直接使用，无需额外翻译 查看应用程序在本地运行的情况。
测试MCP服务器
MCP服务器的访问地址为：
http://localhost:3000/mcp你可以使用MCP检查器进行测试，或者将其连接到ChatGPT进行测试。
连接到ChatGPT
- 部署到Vercel （或您偏好的托管服务）：
vercel deploy- 添加到ChatGPT：
- 导航至 设置 → 连接器 → 创建 - 添加您的MCP服务器URL： https://your-app.vercel.app/mcp - 给它起个名字，比如“Deezer音乐搜索”
- 开始搜索:
- 在ChatGPT中，询问搜索音乐：“搜索Eminem的音乐” - 结果将显示在精美的小部件中！
注： 将MCP服务器连接到ChatGPT需要开发者模式的访问权限。请参阅 连接指南 用于设置说明。
项目结构
app/
├── mcp/
│ └── route.ts # MCP server with Deezer search tool
├── hooks/ # React hooks for ChatGPT SDK integration
├── layout.tsx # Root layout with SDK bootstrap
├── page.tsx # Deezer search results UI
└── globals.css # Global styles (Tailwind)
middleware.ts # CORS handling for RSC
next.config.ts # Asset prefix configuration
baseUrl.ts # Base URL configuration for deployments它是如何运作的
- 用户查询用户要求ChatGPT搜索音乐（例如，“搜索Eminem的音乐”）
- 工具调用ChatGPT 称呼助手为
deezer_search带有搜索查询的工具 - API请求MCP服务器从Deezer API获取结果
- 结构化响应结果以包含轨道信息的结构化数据形式返回
- 小部件渲染ChatGPT在iframe中渲染小部件以显示结果
- 交互式用户界面用户可以试听预览、查看专辑封面，并点击跳转到Deezer
API 参考文档
Deezer搜索工具
工具ID： deezer_search
参数：
query（字符串，必填）：搜索查询（基本或带过滤器的高级搜索）strict(布尔值，可选)：禁用模糊搜索模式order（枚举，可选）：排序顺序
- RANKING （默认） - TRACK_ASC / TRACK_DESC - ARTIST_ASC / ARTIST_DESC - ALBUM_ASC / ALBUM_DESC - RATING_ASC / RATING_DESC - DURATION_ASC / DURATION_DESC
退货：
query所使用的搜索查询results包含以下内容的轨道对象数组：
- 轨道信息（标题、时长、是否包含成人内容标志） - 艺术家详情（姓名、链接、图片） - 专辑信息（标题、封面图片） - 预览URL（30秒音频片段） - Deezer链接
total找到的结果总数
技术栈
- 框架Next.js 15.5 配备 App Router
- 造型Tailwind CSS 4
- MCP模型上下文协议与
mcp-handler - APIDeezer公共API（无需认证）
- 部署已准备好部署到Vercel，支持自动环境检测
了解更多
部署
这个项目旨在与（其他系统/项目）无缝协作 Vercel（注：Vercel是一个用于部署和托管静态网站及服务器端渲染应用的平台，直接音译为“维尔塞尔”或保持原英文名不译也是可接受的，具体取决于语境和读者群体） 部署：
vercel deploy该 baseUrl.ts 配置自动检测Vercel环境变量并设置正确的资产URL：
- 通过（某种方式）生成生产URL
VERCEL_PROJECT_PRODUCTION_URL - 通过以下方式预览/分支URL：
VERCEL_BRANCH_URL - 在iframe中为正确加载资源而进行的资产前缀处理
许可证
麻省理工学院（MIT）