格拉法纳MCP用户界面

Name: 格拉法纳MCP用户界面
Author: aftab-s

作者：aftab-s3 星标更新：2025-11-01

安装使用来源：spider==github.com

项目介绍

Grafana MCP Demo - AI对话界面

一个完整的容器化演示，展示如何通过Grafana的模型上下文协议（MCP）服务器让AI风格的对话界面与Grafana指标和日志进行交互。

🎯 概述

此演示提供了一个完整的端到端解决方案，用于Grafana及朋友聚会，展示了以下内容：

AI对话界面 - 一个现代化的、以Grafana为主题的聊天UI，支持自然语言查询
实时指标 - Prometheus + Blackbox Exporter 收集应用程序和端点指标
日志聚合 - Loki + Promtail 收集结构化日志
交互式仪表板 - 预配置的Grafana开源仪表板
MCP集成 - Grafana的模型上下文协议服务器使AI交互成为可能

所有组件作为Docker容器运行，便于复制和演示。

什么是MCP？

模型上下文协议（MCP）是一个开放标准，用于连接AI助手到数据源。Grafana有一个官方的MCP服务器，它将AI工具与您的仪表板、指标和日志连接起来。您无需手动导航仪表板，只需用自然语言提问即可。

🏗️ 架构

┌─────────────────────────────────────────────────────────────┐
│                     Docker网络                          │
│                                                             │
│  ┌──────────┐     ┌──────────┐     ┌──────────┐           │
│  │   UI     │────▶│   MCP    │────▶│ Grafana  │           │
│  │  :8888   │     │  服务器  │     │   开源   │           │
│  └──────────┘     │  :3001   │     │  :3000   │           │
│                    └──────────┘     └────┬─────┘           │
│                                          │                  │
│  ┌──────────┐     ┌──────────┐     ┌────▼─────┐           │
│  │   演示   │────▶│Prometheus│────▶│   Loki   │           │
│  │   应用   │     │  :9090   │     │  :3100   │           │
│  │  :8081   │     └────┬─────┘     └────▲─────┘           │
│  └──────────┘          │                 │                 │
│       │                │                 │                 │
│       │           ┌────▼─────┐     ┌────┴─────┐           │
│       └──────────▶│ Blackbox │     │ Promtail │           │
│                   │ 导出器   │     │          │           │
│                   │  :9115   │     └──────────┘           │
│                   └──────────┘                             │
└─────────────────────────────────────────────────────────────┘

组件

组件	镜像	端口	目的
Grafana 开源	`grafana/grafana:latest`	3000	可视化和仪表板
Prometheus	`prom/prometheus:latest`	9090	指标收集和存储
Blackbox 导出器	`prom/blackbox-exporter:latest`	9115	端点探测
Loki	`grafana/loki:latest`	3100	日志聚合
Promtail	`grafana/promtail:latest`	-	日志收集代理
MCP 服务器	`mcp/grafana:latest`	3001	官方Grafana MCP服务器
自定义UI	`nginx:alpine`	8888	对话界面
演示应用	`python:3.11-slim`	8081	指标和日志生成器

注意： 使用Docker Hub上的官方mcp/grafana镜像 - 不需要自定义构建！

🚀 快速开始

先决条件

Docker Desktop或Docker引擎（20.10+）
Docker Compose（v2.0+）
至少4GB内存可用
端口3000、3001、8888、8081、9090、9115、3100可用

安装

1. 启动所有服务

# 导航到项目目录
cd grafana-mcp

# 启动所有容器
docker-compose up -d

2. 等待服务初始化（约30-60秒）

# 检查容器状态
docker-compose ps

3. 访问服务

服务	URL	凭证
对话界面	http://localhost:8888	无
Grafana	http://localhost:3000	admin / admin
Prometheus	http://localhost:9090	无
演示应用	http://localhost:8081	无

验证步骤

# 检查所有容器是否在运行
docker-compose ps

# 验证Grafana健康状况
curl http://localhost:3000/api/health

# 验证Prometheus
curl http://localhost:9090/-/healthy

# 验证Loki（启动后等待15秒）
curl http://localhost:3100/ready

# 检查演示应用指标
curl http://localhost:8081/metrics

MCP服务器配置

演示使用官方mcp/grafana镜像，并采用SSE（服务器发送事件）传输来访问HTTP/web API。

为什么选择SSE传输？

官方文档显示：

docker run -e GRAFANA_URL=http://localhost:3000 \
  -e GRAFANA_SERVICE_ACCOUNT_TOKEN=<token> \
  mcp/grafana -t stdio

然而，本演示使用：

command: ["-transport", "sse", "-address", "0.0.0.0:3001"]

传输选项：

stdio（默认） - 适用于CLI工具和桌面应用如Claude Desktop
sse（我们的选择） - 适用于HTTP/web API和基于浏览器的UI ✅
streamable-http - 适用于流式HTTP连接

我们选择SSE的原因：

自定义Web UI需要HTTP端点
从JavaScript启用REST API访问
适用于基于浏览器的对话界面
允许多个并发连接

认证选项

选项1：服务账户令牌（推荐用于生产环境）

在Grafana中创建服务账户：
- 转到配置 → 服务账户
- 点击“添加服务账户”
- 添加具有适当权限的令牌

设置环境变量：

GRAFANA_SERVICE_ACCOUNT_TOKEN=glsa_YourTokenHere

更新docker-compose.yml或创建.env文件

选项2：用户名/密码（演示/开发）

默认情况下，在此演示中使用简单方式：

environment:
  - GRAFANA_USERNAME=admin
  - GRAFANA_PASSWORD=admin

如果提供了令牌，MCP服务器将使用该令牌，否则回退到用户名/密码。

💬 使用演示

对话界面

打开UI，网址为 http://localhost:8888
等待右上角出现“已连接”状态
尝试这些示例查询：
- "显示所有可用的仪表板"
- "当前错误率是多少？"
- "显示来自演示应用的最近错误日志"
- "演示应用的p95延迟是多少？"
- "是否有任何失败的健康检查？"
- "Grafana中配置了哪些数据源？"
使用侧边栏中的快速操作进行常见查询
点击示例查询填充输入字段

生成演示流量

模拟流量模式以查看实时变化：

# 生成流量峰值
curl "http://localhost:8081/simulate/load?pattern=spike"

# 生成错误
curl "http://localhost:8081/simulate/load?pattern=errors"

然后询问UI：“刚刚发生了什么错误率变化？”

📊 预配置仪表板

访问Grafana中的仪表板，网址为 http://localhost:3000

1. MCP演示 - 应用程序指标

演示应用请求速率 - 实时按方法和状态显示请求速率
错误率 - 显示5xx错误的百分比并带有阈值指示器
响应时间（延迟） - 时间段内的p50和p95分位数
端点健康（Blackbox） - 所有端点的HTTP探测结果

2. MCP演示 - 应用程序日志

演示应用日志 - 带有过滤功能的实时日志查看器
按级别划分的日志量 - 条形图显示按严重性划分的日志分布

Prometheus查询

导航至 http://localhost:9090 并尝试：

# 请求速率
rate(demo_app_requests_total[5m])

# 错误率
sum(rate(demo_app_requests_total{status=~"5.."}[5m])) / sum(rate(demo_app_requests_total[5m]))

# p95延迟
histogram_quantile(0.95, sum(rate(demo_app_request_duration_seconds_bucket[5m])) by (le))

# 活跃连接
demo_app_active_connections

Loki查询

在Grafana Explore（http://localhost:3000/explore）中：

# 所有演示应用日志
{job="demo-app"}

# 仅错误日志
{job="demo-app"} |~ "ERROR"

# 包含特定文本的日志
{job="demo-app"} |~ "database"

# 每分钟计数错误
sum(count_over_time({job="demo-app"} |~ "ERROR" [1m]))

🛠️ 故障排除

常见问题

Docker Desktop未运行

症状： 连接期间发生错误

解决方法：

启动Docker Desktop
等待其完全初始化
运行docker ps进行验证
再次尝试docker-compose up -d

端口冲突

症状： 端口已被分配

解决方法：

# 查找使用该端口的进程（例如，3000）
netstat -ano | findstr :3000

# 终止进程
taskkill /PID <PID> /F

# 或者更改docker-compose.yml中的端口

容器立即退出

诊断：

# 检查失败容器的日志
docker-compose logs [服务名称]

常见修复方法：

# 移除卷并重新启动
docker-compose down -v
docker-compose up -d

# 增加Docker资源
# Docker Desktop → 设置 → 资源
# 将内存设置为4GB以上，CPU设置为2核以上

UI显示“断开连接”

解决方法：

# 检查MCP服务器状态
docker-compose logs mcp-server

# 验证Grafana是否可访问
curl http://localhost:3000/api/health

# 重启MCP服务器
docker-compose restart mcp-server

没有指标出现

解决方法：

# 检查Prometheus目标
# 访问 http://localhost:9090/targets（所有应为UP）

# 验证演示应用是否正在运行
curl http://localhost:8081/metrics

# 重启Prometheus
docker-compose restart prometheus

没有日志出现

解决方法：

# 检查Promtail状态
docker-compose logs promtail

# 重启Promtail
docker-compose restart promtail

完全重置

当其他方法都无效时：

# 停止并移除所有内容
docker-compose down -v

# 移除日志
Remove-Item -Recurse -Force logs\*

# 重新开始
docker-compose up -d

健康检查命令

# Grafana
curl http://localhost:3000/api/health

# Prometheus
curl http://localhost:9090/-/healthy

# Loki（启动后等待15秒）
curl http://localhost:3100/ready

# 演示应用
curl http://localhost:8081

# UI
curl http://localhost:8888

🎤 演示展示指南

演示前准备（演示前5分钟）

启动所有容器：docker-compose up -d
打开浏览器标签页：
- 标签页1：http://localhost:8888（自定义UI）
- 标签页2：http://localhost:3000（Grafana）
- 标签页3：http://localhost:9090（Prometheus）
登录Grafana（admin/admin，跳过密码更改）
确保指标正在流动

演示流程（20分钟）

第一幕：介绍（3分钟）

“今天我将展示如何使用自然语言与Grafana的可观测性数据通过模型上下文协议进行交互。”

解释MCP概念
展示架构图
指出所有在Docker中运行的组件

第二幕：组件巡览（4分钟）

# 显示运行的服务
docker-compose ps

浏览：

Grafana数据源（设置 → 数据源）
预配置的仪表板
Prometheus目标（http://localhost:9090/targets）

第三幕：对话界面演示（8分钟）

切换到自定义UI（标签页1）：

查询1：发现

显示所有可用的仪表板

查询2：指标

当前错误率是多少？

查询3：性能

演示应用的p95延迟是多少？

查询4：日志

显示来自演示应用的最近错误日志

第四幕：实时事件模拟（4分钟）

# 生成流量峰值
curl "http://localhost:8081/simulate/load?pattern=spike"

# 生成错误
curl "http://localhost:8081/simulate/load?pattern=  errors"

在UI中输入：

刚刚发生了什么错误率变化？

切换到Grafana以显示仪表板中的峰值。

第五幕：问答环节（3分钟）

常见问题：

Q: 这是使用ChatGPT还是Claude吗？
A: MCP服务器是模型无关的。此演示模拟了响应，但您可以连接任何LLM。
Q: 这可以在Grafana Cloud上工作吗？
A: 是的！适用于任何Grafana实例 - 开源版、企业版或云版。
Q: 关于安全性呢？
A: 这是一个演示。生产环境需要适当的认证、TLS和API令牌管理。

会间重置

# 快速重置（保留数据）
docker-compose restart

# 完全重置（新鲜数据）
docker-compose down -v
docker-compose up -d

📋 速查表

启动命令

# 启动所有服务
docker-compose up -d

# 查看日志
docker-compose logs -f

# 检查状态
docker-compose ps

访问URL

服务	URL
UI	http://localhost:8888
Grafana	http://localhost:3000（admin/admin）
Prometheus	http://localhost:9090
演示应用	http://localhost:8081

示例查询

复制粘贴这些到UI中：

显示所有可用的仪表板
当前错误率是多少？
演示应用的p95延迟是多少？
显示来自演示应用的最近错误日志
G