AI导哈

图表生成工具

一个使用MCP和LLM技术生成图表的示例项目，结合LangChain和MCP-ECharts实现图表渲染。

  • by fankangsong
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 fankangsong/generate-chart-app

使用说明

一个 mcp + llm 生成 chart 的示例项目 An example project for generating charts using MCP + LLM

概览

这是一个 langchain + mcp-echarts 的示例项目，其中使用 langchina 生态工具来编写核心的代码，使用 nuxt 来作为接口和视图开发的框架，外部依赖 mpc-echarts 来渲染图表，大模型根据提问来生成 mcp 参数，最终通过 mcp-echarts 生成图表到前端页面渲染；

mcp-echarts 启动

mcp-echarts 是一个 MCP 服务，启动方式：

# 全局安装
pnpm i -g mcp-echarts

# 启动
mcp-echarts -t sse

访问 http://localhost:3033/heath

返回如下内容启动成功：

{
  "status": "healthy",
  "service": "mcp-echarts"
}

大模型接口

验证你的 LLM 模型是否支持 function call，可以运行下面的命令：

curl --location --request POST 'http://127.0.0.1/v1/chat/completions' \
--header 'Content-Type: application/json' \
--data-raw '{
  "model": "gpt-4o-mini",
  "messages": [
    {
      "role": "user",
      "content": "北京的天气如何"
    }
  ],
  "tools": [
    {
      "type": "function",
      "function": {
        "name": "get_weather",
        "description": "获取天气",
        "parameters": {
          "type": "object",
          "properties": {
            "city": { "type": "string" }
          },
          "required": ["city"]
        }
      }
    }
  ]
}'

如果返回内容包含 choices 字段，说明支持 function call：

{
  "id": "chatcmpl-66aa9fc8-1d7f-46cc-b1c2-2b5a466d7bb0",
  "object": "chat.completion",
  "created": 1761296168,
  "model": "qwen3-coder-30b-a3b-instruct-fp8",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": null,
        "refusal": null,
        "annotations": null,
        "audio": null,
        "function_call": null,
        "tool_calls": [
          {
            "id": "chatcmpl-tool-c4e0efe92fff4ddaabb0e60f41d6c99c",
            "type": "function",
            "function": {
              "name": "get_weather",
              "arguments": "{\"city\": \"北京\"}"
            }
          }
        ],
        "reasoning_content": null
      },
      "logprobs": null,
      "finish_reason": "tool_calls",
      "stop_reason": null
    }
  ],
  "service_tier": null,
  "system_fingerprint": null,
  "usage": {
    "prompt_tokens": 274,
    "total_tokens": 296,
    "completion_tokens": 22,
    "prompt_tokens_details": null
  },
  "prompt_logprobs": null,
  "kv_transfer_params": null
}

启动项目

  1. 参考 .env.example 创建 .env 文件
  2. 安装依赖：pnpm install
  3. 启动项目：pnpm dev

相关 MCP