MCP Server Control

MCP服务器控制

一个未来的Nuance卡驱动接口，用于管理模拟的Meta-Control协议（MCP）服务器、其人工智能代理和整体系统健康，由Google Gemini API提供支持。

*（一个时尚的深色主题仪表板，带有霓虹灯装饰，左侧显示AI代理状态，右侧显示交互式CLI。）*

______________________________________________________________________

关于项目

该应用程序充当一个复杂的前端客户端，为虚构的“元控制协议”服务器模拟一个高科技控制面板。它旨在展示一个强大而美观的用户界面，用于复杂的系统管理。其交互式智能的核心来自Google Gemini API，它为命令行界面提供动力，提供真实的响应和智能的命令建议。

这是一个 客户端应用程序。出于演示目的，模拟了“服务器”、“文件系统”和“代理状态”。在会话期间，文件系统在Gemini模型的内存中维护，由系统提示引导，而代理数据在客户端中硬编码。

主要特点

• AI家庭仪表板： 在视觉上吸引人的卡片布局中查看各种专业AI代理家族的状态、角色和独特的“超能力”。
• Gemini Powered CLI： 一种交互式终端，使用Gemini API：

- 模拟服务器文件系统和命令执行(ls, cat, mcp-status等等）。 - 维护命令历史中的上下文。 - 提供智能、上下文感知的命令建议。

• 系统状态概述： 一个仪表板选项卡，显示关于系统健康和代理活动的格式化实时（模拟）报告。
• 玻璃态和霓虹UI： 一种时尚的未来主义美学，使用玻璃般的面板和霓虹灯边框，带来身临其境的科幻体验。
• 持久命令历史记录： CLI历史记录使用IndexedDB在浏览器中本地保存，允许跨会话持久化。
• 响应式设计： 该界面功能强大，在各种屏幕尺寸上看起来都很棒。

技术栈

• 前端： 反应, TypeScript, 顺风CSS
• AI引擎： Google Gemini API(@google/genai)
• 客户端存储： 索引数据库 用于持久的CLI历史记录。
• 造型： 用于玻璃形态/霓虹灯效果的自定义CSS& Orbitron字体 对于科幻小说的标题。

入门指南

要启动并运行本地副本，请执行以下简单步骤。

先决条件

您需要一个Google Gemini API密钥来运行此应用程序。

• 在获取API密钥 谷歌人工智能工作室.

安装和设置

1. 克隆存储库：

   git clone https://github.com/your-username/mcp-server-control.git
   cd mcp-server-control

1. 安装NPM软件包：

   npm install

1. 设置环境变量：

应用程序配置为使用来自的API密钥 process.env.API_KEY在真实的开发环境中，您将创建 .env 项目根目录中的文件：

   API_KEY=YOUR_GEMINI_API_KEY_HERE

*注：对于这个特定的项目环境 API_KEY 假设已预先配置且可访问。*

1. 运行应用程序：

   npm run dev

运作原理

该应用程序是使用React构建的独立前端。没有传统的后端服务器。

• geminiService.ts：这是AI交互的核心。它将用户的命令和最近的历史记录发送到Gemini gemini-2.5-flash 模型。详细的系统提示指示模型充当MCP服务器的终端，管理其内存中的临时文件系统，并简洁地响应。
• dbService.ts：此服务管理与浏览器IndexedDB的所有交互，以存储、检索和清除CLI命令历史记录。
• 组件： UI被分解为可重用的React组件，用于代理列表、CLI、详细信息卡和状态报告。
• 状态管理： React挂钩(useState, useEffect)用于管理应用程序的状态，如所选代理、CLI历史和输入。