AI导哈

MCP仪表盘管理工具

一个基于Next.js的生产就绪仪表盘，用于管理MCP（模型上下文协议）服务器和工具，并集成LLM功能。

  • by hardikrathod777
  • TypeScript
  • 本地部署
  • 3 星标
  • 更新于
在 GitHub 查看 hardikrathod777/MCP-Studio

使用说明

MCP仪表板-模型上下文协议管理器

一个全面的、可用于生产的Next.js仪表板，用于管理具有LLM集成的MCP（模型上下文协议）服务器和工具。

🌟 特性

核心功能

  • 🔧 LLM配置：支持多个LLM提供商（Anthropic Claude、OpenAI GPT、自定义API）
  • 🖥️ MCP服务器管理：添加、配置、测试和管理多个MCP服务器
  • ⚡ 工具发现：从连接的MCP服务器自动发现和管理工具
  • 💬 聊天界面：使用连接的MCP工具与LLM进行交互式聊天
  • 📊 分析仪表板：实时令牌使用跟踪和成本估算
  • 💾 持久化存储：用于配置和聊天历史记录的本地存储
  • 📤 导入/导出：备份和还原配置

高级功能

  • 多种服务器类型：支持URL（SSE）和STDIO MCP服务器
  • 系统提示：可定制的系统提示，用于指导LLM行为
  • 工具选择：选择要启用的MCP工具
  • 连接测试：使用前测试MCP服务器连接
  • 代币分析：跟踪输入/输出令牌和估计成本
  • 对话历史：保存和查看过去的交互
  • 深色模式：漂亮的暗模式支持
  • 响应式设计：适用于台式机、平板电脑和移动设备

🚀 快速开始

先决条件

  • Node.js 18.x或更高版本
  • npm或纱线

安装

  1. 克隆或下载项目
cd mcp-dashboard
  1. 安装依赖项
npm install
  1. 运行开发服务器
npm run dev
  1. 打开浏览器 导航至 http://localhost:3000

📖 使用指南

初始设置

  1. 配置您的LLM
    • 首次启动时，您将看到设置屏幕
    • 选择您的法学硕士提供者（Anthropic、OpenAI或Custom）
    • 输入您的API URL（例如。， https://api.anthropic.com/v1/messages)
    • 提供您的API密钥
    • 指定模型（例如。， claude-sonnet-4-20250514)
    • 点击“继续到仪表板”

添加MCP服务器

  1. 导航到MCP服务器选项卡

  2. 填写服务器详细信息：

    • 名字：您的服务器的友好名称（例如“Gmail MCP”）
    • 类型：选择URL（SSE）或STDIO
    • URL/命令：要运行的服务器终结点或命令
    • 参数 （用于STDIO）：逗号分隔的参数

  3. 点击“添加服务器”

  4. 测试连接：单击刷新图标以测试连接

MCP服务器配置示例

基于URL的服务器（Gmail）：

Name: Gmail MCP
Type: URL
URL: https://gmail.mcp.claude.com/mcp

基于STDIO的服务器：

Name: Local MCP Server
Type: STDIO
Command: npx
Arguments: -y, @modelcontextprotocol/server-filesystem, /path/to/directory

使用聊天界面

  1. 导航到聊天界面选项卡

  2. 配置系统提示 （右面板）：

    • 自定义LLM的行为方式
    • 默认提示指导工具使用
    • 点击“保存提示”以保持

  3. 开始聊天:

    • 在输入框中键入您的消息
    • 按Enter键或单击发送
    • LLM将自动使用连接的MCP工具
    • 每次响应时都会显示工具使用情况

监控分析

  1. 导航到“分析”选项卡
  2. 查看指标：
    • 使用的令牌总数
    • 输入/输出令牌细分
    • 预计成本
    • 服务器状态
    • 对话统计

管理配置

导出配置：

  • 单击标题中的下载图标
  • 保存服务器和设置（API密钥除外）

导入配置：

  • 单击标题中的上传图标
  • 选择以前导出的JSON文件
  • 配置将被恢复

🏗️ 建筑

技术栈

  • 框架：Next.js 14（应用路由器）
  • 语言：TypeScript
  • 样式：顺风CSS
  • 图标：Lucide React
  • 状态管理：反应挂钩
  • 存储：浏览器本地存储

项目结构

mcp-dashboard/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Main dashboard component
│   └── globals.css         # Global styles
├── package.json
├── tsconfig.json
├── tailwind.config.js
└── next.config.js

状态管理

该应用程序使用React钩子进行状态管理：

  • llmConfig：LLM提供程序配置
  • mcpServers：已配置的MCP服务器列表
  • mcpTools：从服务器中发现的工具
  • messages：聊天记录
  • tokenUsage：代币消费分析

数据持久层

所有数据都存储在浏览器LocalStorage中：

  • llmConfig：LLM配置（API密钥已加密）
  • mcpServers：服务器配置
  • chatMessages：对话历史
  • tokenUsage：令牌分析
  • systemPrompt：自定义系统提示

🔐 安全

  • API密钥：本地存储，从不发送给第三方
  • 仅限HTTPS：始终使用HTTPS端点
  • 无后端：所有处理都发生在客户端
  • 本地存储：数据保留在浏览器中

🎨 定制

更改颜色

编辑 tailwind.config.js 和 globals.css 要自定义配色方案，请执行以下操作：

/* globals.css */
:root {
  --primary: 262 83% 58%;  /* Purple */
  --secondary: 210 40% 96.1%;
  /* ... */
}

添加新功能

代码库是模块化的，易于扩展：

  • 通过修改来添加新选项卡 activeTab 状态
  • 通过扩展来创建新的服务器类型 MCPServer 接口
  • 在“分析”选项卡中添加分析小部件

📊 代币定价

当前定价估算（可在代码中配置）：

  • 克劳德·十四行诗：$3/M输入代币，$15/M输出代币
  • 调整 calculateCost() 功能

🐛 故障排除

服务器连接失败

  • 验证服务器URL是否正确
  • 检查服务器是否正在运行且可访问
  • 确保服务器上配置了CORS

聊天不起作用

  • 验证API密钥是否正确
  • 检查API URL是否与您的提供商匹配
  • 确保连接的服务器处于活动状态

工具未出现

  • 首先测试服务器连接
  • 验证服务器是否正确实现MCP协议
  • 检查浏览器控制台是否有错误

🚀 部署

为生产而建

npm run build
npm start

部署到Vercel

npm install -g vercel
vercel

部署到Netlify

npm run build
# Upload the .next folder to Netlify

🤝 贡献

这是一个完整、独立的项目。要修改：

  1. 分叉或复制代码
  2. 进行更改
  3. 彻底测试
  4. 部署您的版本

📝 许可证

麻省理工学院许可证-请在您的项目中自由使用！

🙏 致谢

  • 使用Next.js和React构建
  • 采用Tailwind CSS设计
  • Lucide的图标
  • 基于Anthropic的模型上下文协议

📧 支持

对于问题或疑问：

  1. 检查故障排除部分
  2. 查看代码注释
  3. 查阅Anthropic的MCP文件

建于❤️ 对于MCP社区

相关 MCP