AI导哈

AI开发者仪表盘

一个基于Next.js 16和模型上下文协议(MCP)的实时AI开发者仪表盘，提供Next.js应用的智能洞察和分析工具。

  • by MervinPraison
  • TypeScript
  • 本地部署
  • 8 星标
  • 更新于
在 GitHub 查看 MervinPraison/next-js-mcp-server-example

使用说明

AI赋能的开发者仪表板

现代的、实时的 AI赋能的开发者仪表板 使用Next.js 16构建，该版本利用模型上下文协议（MCP）为您的Next.js应用程序提供智能洞察。

🚀 特点

📊（图表/数据表格） 仪表盘主页

  • 路线检查员查看所有带有元数据的路由（静态、动态、API）
  • 错误监视器实时错误追踪，AI建议修复方案
  • 缓存分析器视觉缓存策略与性能指标
  • 性能指标构建时间、核心网页指标、响应时间
  • 统计概览快速了解您的应用程序健康状况

🤖 机器人 人工智能助手

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

🔧（扳手或修理工具的符号，可意译为“修理”或根据上下文具体翻译） MCP配置

  • 服务器状态监控
  • 可用的MCP工具文档
  • 人工智能代理配置指南
  • 示例提示和使用场景

⚙️ 通常表示“齿轮”或“设置/配置”相关的图标，在中文中可以简单翻译为“齿轮”或根据上下文翻译为“设置”、“配置”等。 设置

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

🛠️ 技术栈

  • Next.js 16 - 带内置MCP支持的App Router
  • React 19 - 服务器组件
  • TypeScript - 类型安全开发
  • Tailwind CSS - 现代、响应式的风格设计
  • shadcn/ui（可译为“shadcn用户界面库”或根据具体语境简化为“shadcn UI”，但通常保留原样以指代特定的开源UI组件库） - 美观、易用的组件
  • 模型上下文协议（MCP） - AI代理集成

📦 安装

  1. 安装依赖项： ```bash（注：此行通常表示接下来是一段 Bash 命令或脚本） npm install ```

  2. 设置环境变量（可选）： ```bash（注：`bash` 是一种常见的 Unix/Linux 命令行解释器，此处直接保留原样，不进行翻译） 复制 .env.local.example 文件到 .env.local ```

  3. 运行开发服务器： ```bash（注：此行通常表示接下来将输入Bash命令，中文翻译中保留原样以指示代码块） npm 运行 dev（即执行开发模式） ```

  4. 打开您的浏览器： 导航至 http://localhost:3000 翻译为中文是：“本地主机的3000端口”。不过，在实际使用中，这个网址通常不直接翻译，因为它是一个特定于开发或测试环境的本地URL，用于访问运行在本地计算机上的Web服务器。所以，更自然的表达可能是“访问本地运行的Web服务器（端口3000）”

🔌 MCP 配置

在 Next.js 中启用 MCP

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

```typescript（译文：TypeScript代码块） const nextConfig: NextConfig = { 实验性：{ mcpServer: true，翻译为中文是：“mcp服务器：启用”， }， }; ```

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

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

```json { "mcpServers": { "next-devtools": { "command": "npx",， "args": ["-y", "next-devtools-mcp@最新版本"] }， "next-app": { "url": "http://localhost:3000/api/mcp"， "transport": "http" 翻译成中文是：“传输协议”：“HTTP” } } } ```

🎯 可用的MCP工具

仪表板为AI代理提供了以下MCP工具：

  1. 获取路由 - 列出所有带有元数据的应用程序路由
  2. 获取错误信息 - 从应用程序中获取错误日志
  3. 获取缓存状态 - 获取路由的缓存信息
  4. 获取性能指标 - 分析性能数据
  5. 分析路线 - 对特定路线的AI分析
  6. 建议优化 - 获取AI优化建议

💬 示例AI代理提示

尝试在你的AI编程助手中使用这些提示：

  • “哪些路线没有使用缓存？”
  • “显示过去一小时内的所有错误”
  • “分析 /api/users 路由的性能”
  • “为我的应用程序提供建议以进行优化”
  • “哪些路线使用的是SSR，哪些是SSG？”
  • “是什么导致了 /api/data 接口响应缓慢？”

📁 项目结构

（该英文短语“```”在中文中没有直接对应的翻译，因为它通常用于表示代码块或命令的开始和结束，而不是一个具体的词汇或短语。因此，这里可以将其翻译为“（表示代码或命令开始的符号）”或根据上下文进行具体说明。） /app（应用程序） /api（通常表示应用程序编程接口的路径或端点） /mcp # MCP 端点 /chat # AI聊天接口 /mcp-config # MCP 配置页面 /设置 # 设置页面 layout.tsx # 根布局 page.tsx # 首页仪表盘 /组件 /dashboard # 仪表盘组件 /ui # UI 组件（shadcn） /lib（通常指Linux系统中的库文件目录） mcp-client.ts # MCP客户端实用工具 mock-data.ts # 模拟数据生成器 utils.ts # 工具函数 /类型 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（可能是指“Middleware Composition Protocol”或其他相关特性，具体需根据上下文确定）功能的演示项目。请随意：

  • 报告问题
  • 提出改进建议
  • 添加新功能
  • 提升人工智能能力

📝 许可证

MIT 许可证 - 欢迎将此项目作为起点，用于开发您自己的 AI 驱动仪表板！

🎉 致谢

构建于：

  • 由Vercel提供的Next.js 16
  • 模型上下文协议
  • shadcn/ui 组件
  • Tailwind CSS
  • 清晰图标

与AI一起愉快编程！ 🚀

相关 MCP