gpt-vis-mcp

BoyYangzai/gpt-vis-mcp

3.3

If you are the rightful owner of gpt-vis-mcp and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

GPT-Vis MCP is an intelligent data visualization tool based on the Model Context Protocol (MCP), designed to enhance user experience by automatically generating appropriate charts based on user data analysis requests.

Tools

  1. check_if_needs_visualization

    Determines if a user's query requires data visualization and recommends chart type with confidence level.

  2. create_data_visualization

    Generates visual charts based on provided data, automatically inferring field mappings.

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