一个 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
}启动项目
- 参考
.env.example创建.env文件 - 安装依赖：
pnpm install - 启动项目：
pnpm dev