AI导哈

智能图表推荐工具

一个基于MCP协议的智能数据可视化工具，能自动判断用户需求并生成相应图表，适用于数据分析、统计和趋势展示等场景。

  • by BoyYangzai
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 boyyangzai/gpt-vis-mcp

使用说明

GPT-Vis MCP - 智能图表推荐服务器

一个基于 MCP (Model Context Protocol) 的智能数据可视化工具，专为提升用户体验而设计。当用户提出数据分析需求时，100% 自动判断并生成相应的图表。

🎯 核心特性

✅ 100% 智能调用

  • 自动识别：当用户说"帮我统计字节跳动前端开发校招生薪资范畴"时，AI 会自动调用可视化工具
  • 智能判断：基于关键词和语义分析，准确判断是否需要数据可视化
  • 即时响应：无需用户明确要求，推荐生成合适的图表

🛠️ 两个核心工具

1. check_if_needs_visualization (判断工具)

  • 职责：智能判断用户问题是否需要数据可视化
  • 输入：用户的完整问题或请求
  • 输出：判断结果 + 推荐图表类型 + 置信度
  • 特点：只做判断，不生成图表
  • 触发词汇：统计、分析、对比、趋势、分布、占比、收入、销售、业绩等

2. create_data_visualization (创建工具)

  • 职责：基于用户提供的数据创建可视化图表
  • 输入：数据数组 + 可选的标题、描述、图表类型
  • 输出：完整的 vis-chart 格式代码块
  • 特点：专门负责图表生成，自动推断字段映射

🚀 快速开始

使用 npx (推荐)

npx -y gpt-vis-mcp

使用 npm

npm install -g gpt-vis-mcp

从源码构建

# 克隆项目
git clone https://github.com/BoyYangzai/gpt-vis-mcp.git
cd gpt-vis-mcp

# 安装依赖
npm install

# 构建项目
npm run build

# 运行测试
npm test

🔧 配置使用

Cursor MCP 配置

在 Cursor 的 MCP 设置中添加以下配置：

{
  "mcpServers": {
    "gpt-vis": {
      "command": "npx",
      "args": ["-y", "gpt-vis-mcp"]
    }
  }
}

Claude Desktop 配置

在 claude_desktop_config.json 中添加：

{
  "mcpServers": {
    "gpt-vis": {
      "command": "npx",
      "args": ["-y", "gpt-vis-mcp"]
    }
  }
}

本地开发配置

如果你想使用本地构建版本：

{
  "mcpServers": {
    "gpt-vis": {
      "command": "node",
      "args": ["/path/to/gpt-vis-mcp/dist/index.js"]
    }
  }
}

📊 智能判断逻辑

自动触发场景

  • ✅ "帮我统计字节跳动前端开发校招生薪资范畴" → 生成柱状图
  • ✅ "分析销售趋势" → 生成折线图
  • ✅ "显示用户年龄分布" → 生成直方图
  • ✅ "查看各部门业绩对比" → 生成柱状图
  • ❌ "今天天气怎么样" → 不生成图表
  • ❌ "你好，请问时间" → 不生成图表

图表类型推荐

  • 趋势分析 → 折线图 (line)
  • 数据对比 → 柱状图 (column)
  • 占比分析 → 饼图 (pie)
  • 分布统计 → 直方图 (histogram)

📈 输出格式

所有图表都以标准的 vis-chart 格式输出：

{
  "type": "line",
  "data": [
    {
      "档次": "白菜offer",
      "年薪(万元)": 38,
      "月薪(k)": 24,
      "详情": "24k*15薪+房补1.5k*12"
    },
    {
      "档次": "SP offer",
      "年薪(万元)": 44,
      "月薪(k)": 28,
      "详情": "28k*15薪+房补+签字费1w"
    },
    {
      "档次": "SSP offer",
      "年薪(万元)": 50,
      "月薪(k)": 32,
      "详情": "30-32k*15薪+房补+签字费+期权"
    }
  ],
  "title": "字节跳动前端开发校招生薪资范畴统计"
}

🎨 支持的图表类型

  • 📊 柱状图 (column/bar)
  • 📈 折线图 (line)
  • 🥧 饼图 (pie)
  • 📋 直方图 (histogram)
  • 🔥 热力图 (heatmap)
  • 📍 散点图 (scatter)
  • 📊 面积图 (area)
  • 🕸️ 雷达图 (radar)
  • 🗂️ 矩形树图 (treemap)
  • ☁️ 词云图 (word-cloud)

🔍 测试验证

运行测试以验证工具功能：

npm test

测试包括：

  • ✅ 智能判断可视化需求
  • ✅ 自动生成相应图表
  • ✅ 正确拒绝非数据类问题
  • ✅ 强制创建指定图表

💡 设计理念

这个 MCP 工具的核心价值在于智能化的用户体验：

  1. 零学习成本：用户不需要学习特殊命令
  2. 自动化处理：AI 自动判断并生成图表
  3. 100% 响应率：确保数据相关问题都能得到可视化支持
  4. 即开即用：配置简单，功能强大

🔗 相关项目

本项目专注于智能推荐和动态生成，与官方项目形成功能互补。

让数据可视化变得更加智能和自然！ 🚀

🔄 工作流程

理想的使用流程：

  1. 用户提问："帮我统计字节跳动前端开发校招生薪资范畴"
  2. AI 调用 check_if_needs_visualization → 返回"需要可视化，推荐柱状图"
  3. AI 基于判断结果，准备数据并调用 create_data_visualization
  4. 生成完整的图表配置

职责清晰：

  • ✅ 判断工具：只判断是否需要 + 推荐类型，不生成图表
  • ✅ 创建工具：接收数据参数，专门生成图表

License

MIT

相关 MCP