搜索趋势可视化工具

一个结合Next.js的Google Trends可视化工具和Model Context Protocol (MCP)服务器的项目,用于展示搜索词的相对兴趣趋势。

  • by ainightshift
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ainightshift/google_trends_mcp

使用说明

搜索趋势探索器

这个项目结合了使用Next.js构建的Google Trends可视化工具和一个模型上下文协议(MCP)服务器,该服务器以工具的形式提供了相同的数据,您可以将其连接到OpenAI或任何兼容MCP的客户端。这两种体验都调用 SearchAPI.io 检索某个搜索词过去12个月的相关兴趣数据。

先决条件

  • Node.js 18.18+(建议使用以避免引擎警告)
  • A. SEARCH_API_KEY 来自 SearchAPI.io

创建一个 .env 与……一起保存文件

SEARCH_API_KEY=your_key_here

运行 Next.js 用户界面

npm install
npm run dev

访问 http://localhost:3000 使用网页界面。

运行MCP服务器

MCP服务器提供了一个名为(此处应接具体工具名称,但原文未给出)的单一工具 fetch_google_trends 可通过HTTP流式传输。

npm install
npm run mcp:dev

服务器监听在 http://localhost:3000/mcp (向……致敬/表示敬意 PORT 环境变量) 并且也用于 GET /healthz 用于渲染健康检查。

从MCP客户端连接

  • MCP 检查器: npx @modelcontextprotocol/inspector --server http://localhost:3000/mcp
  • OpenAI/其他代理: 添加一个指向相同位置的HTTP MCP工具 /mcp 终端节点。

当被调用时, fetch_google_trends 期望一个JSON有效载荷:

{
  "term": "electric cars",
  "geo": "US",            // optional Google Trends geo code
  "category": "0"         // optional Google Trends category id
}

该工具返回一个包含规范化时间线点的结构化JSON响应。

将MCP服务器部署到Render.com

  1. 创建一个新的 网络服务(或称Web服务) 来自这个仓库。
  2. 将启动命令设置为:
    npm run mcp:start
    
  3. 添加环境变量 SEARCH_API_KEY。
  4. (可选)配置渲染健康检查以触发 /healthz.

Render 将注入 PORT服务器会自动遵守这一点。

测试与代码检查(或代码规范检查)

npm run lint

项目结构亮点

  • app/ – 使用UI的Next.js应用路由器和 /api/trends 终端节点。
  • lib/trends.ts – 由API路由和MCP工具共用的共享搜索API客户端。
  • mcp/server.ts – Express + MCP 服务器,用于暴露(或提供) fetch_google_trends 工具。