星战科技xingzhan.cloud
返回市场
下一个JS-MCP服务器示例

下一个JS-MCP服务器示例

作者：MervinPraison6 星标更新：2025-10-25
安装使用来源：spider==github.com

项目介绍

基于AI的开发者仪表盘

一个现代、实时的基于AI的开发者仪表盘，使用Next.js 16构建，并利用模型上下文协议（MCP）提供对您的Next.js应用程序的智能洞察。

Next.js 16 React 19 TypeScript MCP

🚀 功能

📊 仪表盘首页

  • 路由检查器：查看所有带有元数据的路由（静态、动态、API）
  • 错误监控器：实时错误跟踪并有AI建议修复方案
  • 缓存分析器：可视化缓存策略及性能指标
  • 性能指标：构建时间、核心网络指标、响应时间
  • 统计概览：快速了解应用健康状况

🤖 AI助手

  • 关于您应用的自然语言查询
  • 访问MCP工具进行深度内省
  • 上下文建议与优化
  • 代码片段推荐

🔧 MCP配置

  • 服务器状态监控
  • 可用的MCP工具文档
  • AI代理配置指南
  • 示例提示和用例

⚙️ 设置

  • 仪表盘偏好设置
  • AI助手配置
  • MCP集成设置

🛠️ 技术栈

  • Next.js 16 - 内置MCP支持的应用路由器
  • React 19 - 服务端组件
  • TypeScript - 类型安全开发
  • Tailwind CSS - 现代且响应式的样式
  • shadcn/ui - 美观且可访问的组件
  • 模型上下文协议（MCP） - AI代理集成

📦 安装

  1. 安装依赖项：

    npm install

  2. 设置环境变量（可选）：

    cp .env.local.example .env.local

  3. 运行开发服务器：

    npm run dev

  4. 打开浏览器： 导航到 http://localhost:3000

🔌 MCP配置

在Next.js中启用MCP

MCP服务器已经在next.config.ts中启用：

const nextConfig: NextConfig = {
  experimental: {
    mcpServer: true,
  },
};

配置MCP客户端（用于AI代理）

创建一个.mcp/config.json文件：

{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    },
    "next-app": {
      "url": "http://localhost:3000/api/mcp",
      "transport": "http"
    }
  }
}

🎯 可用的MCP工具

仪表盘向AI代理暴露了以下MCP工具：

  1. get_routes - 列出所有带有元数据的应用程序路由
  2. get_errors - 获取应用程序的错误日志
  3. get_cache_status - 获取路由的缓存信息
  4. get_performance_metrics - 分析性能数据
  5. analyze_route - 对特定路由进行AI分析
  6. suggest_optimization - 获取AI优化建议

💬 AI代理示例提示

尝试这些提示与您的AI编码助手：

  • "哪些路由没有使用缓存？"
  • "显示我过去一小时的所有错误"
  • "分析/api/users路由的性能"
  • "为我的应用提出优化建议"
  • "哪些路由使用SSR而不是SSG？"
  • "导致/api/data慢响应的原因是什么？"

📁 项目结构

/app
  /api
    /mcp          # MCP端点
    /chat         # AI聊天端点
  /mcp-config     # MCP配置页面
  /settings       # 设置页面
  layout.tsx      # 根布局
  page.tsx        # 仪表盘首页
/components
  /dashboard      # 仪表盘组件
  /ui             # UI组件（shadcn）
/lib
  mcp-client.ts   # MCP客户端实用工具
  mock-data.ts    # 模拟数据生成器
  utils.ts        # 实用函数
/types
  mcp.ts          # MCP类型定义
  dashboard.ts    # 仪表盘类型

🎨 特性展示

路由检查器

  • 彩色状态指示器
  • 路由类型徽章（静态、动态、API）
  • 缓存状态可视化
  • 渲染策略显示

错误监控器

  • 基于严重性的分类
  • 堆栈跟踪查看器
  • 频率跟踪
  • 时间戳信息

缓存分析器

  • 命中/未命中比率可视化
  • 重新验证时间跟踪
  • 缓存大小指标
  • 路由特定见解

性能指标

  • 构建时间跟踪
  • 核心网络指标（LCP、FID、CLS）
  • 路由响应时间
  • 包大小分析

AI聊天助手

  • 实时流式响应
  • 上下文感知建议
  • 代码片段生成
  • MCP工具集成

🔒 安全注意事项

  • 默认情况下，MCP仅在开发环境中启用
  • 不要在生产环境中无认证地公开MCP端点
  • 将API密钥存储在环境变量中
  • 部署前审查MCP工具权限

🚀 部署

这是一个开发仪表盘。对于生产用途：

  1. 禁用生产中的MCP或添加认证
  2. 设置适当的错误日志记录（例如，Sentry）
  3. 使用真实的性能监控工具
  4. 安全配置环境变量

📚 更多学习资料

🤝 贡献

这是一个演示项目，展示了Next.js 16的MCP特性。您可以自由：

  • 报告问题
  • 提出改进意见
  • 添加新功能
  • 增强AI能力

📝 许可证

MIT许可证 - 您可以自由地将此项目作为自己的AI驱动仪表盘的起点！

🎉 致谢

使用以下技术构建：

  • Vercel的Next.js 16
  • 模型上下文协议
  • shadcn/ui 组件
  • Tailwind CSS
  • Lucide 图标

愉快地使用AI编程！🚀