AI导哈

天气分析仪表盘

Weather MCP项目的公共网站和分析仪表盘，提供实时天气数据分析和项目文档。

  • by weather-mcp
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 weather-mcp/website

使用说明

气象MCP网站

Weather MCP项目的公共网站和分析仪表板，托管于 天气-mcp.dev.

概述

Next.js应用程序的作用如下：

  1. 项目主页 -简介、功能和文档
  2. 分析仪表板 -MCP服务器使用情况的公共实时分析
  3. 文档中心 -综合指南和API参考资料
  4. 社区门户 -GitHub链接、讨论和贡献

特性

首页

  • 项目概述和价值主张
  • 快速入门指南
  • 功能亮点
  • 安装说明
  • 社区统计数据（活动安装、API调用、正常运行时间）

分析仪表板

  • 实时使用统计
  • 工具流行度图表
  • 性能指标（响应时间、缓存命中率）
  • 错误跟踪和趋势
  • 地理分布（国家一级）
  • API服务使用情况（NOAA与Open-Meteo）

文档

  • 入门指南
  • api参考
  • 配置选项
  • MCP集成指南
  • 隐私政策
  • 分析透明度

技术栈

  • 框架：Next.js 14（应用路由器）
  • 语言：TypeScript
  • 样式：顺风CSS
  • 图表：Recharts
  • 数据获取：SWR（用于实时更新）
  • 部署：Vercel或自托管

入门指南

先决条件

  • Node.js 20+
  • npm或pnpm

发展

  1. 安装依赖项：
npm install
  1. 设置环境变量：
cp .env.example .env.local

编辑 .env.local:

# Analytics API endpoint
NEXT_PUBLIC_ANALYTICS_API=https://analytics.weather-mcp.dev/v1

# Optional: Analytics refresh interval (ms)
NEXT_PUBLIC_REFRESH_INTERVAL=30000
  1. 启动开发服务器：
npm run dev
  1. 打开 http://localhost:3000

为生产而建

npm run build
npm start

项目结构

website/
├── src/
│   ├── pages/
│   │   ├── index.tsx          # Homepage
│   │   ├── dashboard.tsx      # Analytics dashboard
│   │   └── docs/              # Documentation pages
│   │       ├── getting-started.tsx
│   │       ├── api-reference.tsx
│   │       └── privacy.tsx
│   ├── components/
│   │   ├── layout/            # Layout components
│   │   ├── dashboard/         # Dashboard-specific components
│   │   │   ├── ToolUsageChart.tsx
│   │   │   ├── PerformanceMetrics.tsx
│   │   │   ├── ErrorSummary.tsx
│   │   │   └── GeoMap.tsx
│   │   └── common/            # Reusable components
│   ├── api/
│   │   └── analytics.ts       # API client for analytics-server
│   ├── styles/
│   │   └── globals.css        # Global styles + Tailwind
│   └── utils/
│       ├── formatters.ts      # Data formatting utilities
│       └── constants.ts       # App constants
├── public/
│   ├── favicon.ico
│   ├── logo.svg
│   └── images/
└── next.config.js

关键页面

/（主页）

  • 英雄部分，项目介绍
  • 功能展示
  • 快速入门指南
  • 安装说明
  • GitHub和文档的链接

/仪表板

  • 概述统计数据（总呼叫数、成功率、平均响应时间）
  • 交互式图表：
    • 随时间推移的工具使用情况
    • 响应时间百分比
    • 错误率
    • 高速缓存性能
  • 通过SWR实时更新
  • 可按时间范围（24小时、7天、30天）过滤

/docs

  • 入门指南
  • 安装和配置
  • 使用示例
  • api参考
  • 隐私和分析信息
  • 故障排除

API集成

网站从分析服务器API获取数据：

// src/api/analytics.ts
export async function getOverviewStats(period: string) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_ANALYTICS_API}/stats/overview?period=${period}`
  );
  return response.json();
}

使用SWR进行自动缓存和重新验证：

// In dashboard component
const { data, error } = useSWR(
  '/stats/overview',
  () => getOverviewStats('7d'),
  { refreshInterval: 30000 } // Refresh every 30 seconds
);

样式

带有自定义主题的顺风CSS：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3B82F6',    // Blue
        secondary: '#10B981',  // Green
        accent: '#F59E0B',     // Amber
      }
    }
  }
}

部署

Vercel（推荐）

  1. 将GitHub存储库连接到Vercel
  2. 在Vercel仪表板中设置环境变量
  3. 推送到主服务器时自动部署

自托管（Docker）

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

使用docker compose进行部署：

website:
  build: ../website
  ports:
    - "3000:3000"
  environment:
    - NEXT_PUBLIC_ANALYTICS_API=https://analytics.weather-mcp.dev/v1

演出

  • 主页和文档的静态生成
  • 仪表板增量静态再生（ISR）（每60秒重新验证一次）
  • 客户端数据获取以进行实时更新
  • 通过Next.js图像组件进行图像优化
  • 代码拆分和延迟加载

贡献

看 ../docs/contributing.md 关于贡献指南。

许可证

麻省理工学院

链接

相关 MCP