Memory Context Manager_v2

🚀 MCP 服务 UI - Memory Context Manager v2

一个美观、现代的 Memory Context Manager v2 MCP 服务 Web 界面，使用 RedwoodJS 和 Chakra UI 构建。此 UI 展示了我们的 Continuous Self-Evolution System，并提供对自主 AI 能力的实时监控。

✨ 功能

🎯 仪表板概览

• 通过美观的进度条实时监控系统健康状况
• 演进引擎状态，展示持续自我改进情况
• MCP 服务指标，显示连接状态和工具可用性
• 近期活动动态，追踪所有系统操作
• 快捷操作，即时控制系统

🧠 演进引擎界面

• 全面的演进指标，附带详细分类
• 计划任务管理，包含优先级和时间安排
• 近期演进历史，展示学习进度
• 学习来源追踪，记录从文档摄取的内容
• 系统健康监控，涵盖后台进程

🎨 现代 UI/UX

• Chakra UI 组件，实现一致且易于访问的设计
• 响应式布局，适用于所有设备
• 自定义主题，采用品牌色彩和演进点缀色
• 交互元素，带有悬停效果和动画
• 专业仪表板布局，配备侧边栏导航

🏗️ 架构

前端技术栈

• RedwoodJS - 全栈 React 框架
• Chakra UI - 现代组件库
• TypeScript - 类型安全开发
• React Icons - 精美图标

后端集成

• MCP 服务 - Memory Context Manager v2
• 演进引擎 - 持续自我改进
• 实时数据 - 实时系统监控
• API 端点 - RESTful 通信

🚀 快速开始

前提条件

• Node.js 18+
• Yarn 包管理器
• 正在运行的 MCP 服务（Memory Context Manager v2）

安装

1. 克隆仓库

   git clone <repository-url>
   cd mcp-server-ui
   

2. 安装依赖项

   yarn install
   

3. 启动开发服务

   yarn rw dev
   

4. 打开浏览器 访问 http://localhost:8910

📱 页面与功能

🏠 仪表板页面 (/)

• 系统健康概览：包含进度条的实时指标
• 演进引擎状态：当前演进进度和统计数据
• MCP 服务状态：连接状态和工具可用性
• 近期活动：系统操作时间线
• 快捷操作：即时控制系统的按钮

⚡ 演进引擎页面 (/evolution-engine)

• 演进指标：系统改进情况的详细分类
• 计划任务：管理即将执行的演进任务
• 近期演进：已完成改进的历史记录
• 学习来源：文档来源和学习进度
• 系统健康：后台进程和资源使用情况

🎨 设计系统

调色板

• 品牌色彩：用于主要元素的专业蓝色调
• 演进色彩：用于演进相关功能的紫色点缀
• 状态颜色：绿色（成功）、黄色（警告）、红色（错误）
• 中性色彩：用于文本和边框的灰度色阶

组件库

• 卡片：简洁、凸起的内容容器
• 进度条：直观展示指标
• 徽章：状态指示器和标签
• 表格：有序展示数据
• 选项卡：组织内容分区
• 提醒：重要信息通知

🔧 配置

环境变量

# MCP Server Configuration
MCP_SERVER_URL=http://localhost:8000
MCP_SERVER_TIMEOUT=30000

# Evolution Engine Settings
EVOLUTION_CHECK_INTERVAL=5000
EVOLUTION_MAX_CONCURRENT=3

主题自定义

可在 web/src/App.tsx 中自定义 Chakra UI 主题：

const theme = extendTheme({
  colors: {
    brand: {
      /* Custom brand colors */
    },
    evolution: {
      /* Custom evolution colors */
    },
  },
  components: {
    Button: {
      /* Custom button styles */
    },
  },
})

📊 数据集成

MCP 服务通信

• 实时更新：来自演进引擎的实时数据
• 状态监控：服务健康状况和连接状态
• 工具管理：可用的 MCP 工具及其状态
• 性能指标：系统性能指标

Evolution Engine 数据

• 学习进度：文档摄取状态
• 演进指标：随时间推移的性能提升
• 任务调度：即将执行的演进任务
• 系统健康状况：资源使用情况和后台进程

🚀 部署

生产构建

# Build the application
yarn rw build

# Start production server
yarn rw serve

Docker 部署

# Build Docker image
docker build -t mcp-server-ui .

# Run container
docker run -p 8910:8910 mcp-server-ui

🔍 监控与分析

系统指标

• 整体健康评分：系统性能综合评分
• 性能指标：速度和效率指标
• 智能评分：AI 能力测量
• 适应性评级：系统灵活性和学习能力

演进跟踪

• 成功率：成功演进的百分比
• 学习来源：文档来源及其影响
• 改进趋势：随时间推移的性能变化
• 资源使用情况：内存和 CPU 消耗

🧪 测试

运行测试

# Unit tests
yarn rw test

# Integration tests
yarn rw test --watch

# E2E tests
yarn rw test:e2e

测试覆盖率

# Generate coverage report
yarn rw test --coverage

🤝 贡献

开发工作流

1. Fork 仓库
2. 创建功能分支
3. 进行更改
4. 为新功能添加测试
5. 提交拉取请求

代码规范

• TypeScript：启用严格类型检查
• ESLint：代码质量与一致性
• Prettier：代码格式化
• Chakra UI：组件库使用

📚 文档

API 参考

• MCP 服务工具：可用的 MCP 服务函数
• Evolution Engine：持续自我改进 API
• 系统健康状况：监控和指标端点

组件库

• Chakra UI 组件：用法示例和属性
• 自定义组件：专用于仪表板的组件
• 布局系统：响应式设计模式

🌟 展示

此 UI 展示了我们的持续自我演进系统的强大功能：

• 🎯 自主学习：系统自动从文档中学习
• 📈 性能提升：实时指标展示系统演进
• 🔄 后台处理：无需用户干预即可持续优化
• 🧠 智能适应：系统适应新的知识来源
• 📊 可视化监控：精美的仪表板，便于监督系统

🔮 未来增强

计划功能

• 实时 WebSocket 更新，提供实时数据
• 高级分析，包含图表
• 用户管理，支持基于角色的访问控制
• API 文档，支持交互式测试
• 移动应用，便于随时随地监控

集成可能性

• Grafana 仪表板，用于高级指标
• Slack 通知，用于系统警报
• GitHub 集成，用于基于代码的学习
• CI/CD 流水线，用于自动化部署

📄 许可证

本项目采用 MIT 许可证授权，详情请参阅 LICENSE 文件。

🙏 致谢

• 感谢 RedwoodJS 团队 提供出色的全栈框架
• 感谢 Chakra UI 团队 提供精美的组件库
• 感谢 MCP 社区 提供 Model Context Protocol
• 感谢 开源贡献者 提供灵感和工具

---

使用 RedwoodJS + Chakra UI 倾心打造 ❤️

展示自主 AI 系统的未来 🚀🧠✨