MCP服务管理框架

//=====设置说明===== /* 设置说明：

1. 创建一个新的Angular项目： ng-new-mcp角度客户端--路由=false--样式=css

2. 用上面的代码替换生成的文件

3. 将配置文件复制到assets目录：

   • src/assets/mcp_server_discovery.json
   • src/assets/mcp_tool_context.json

4. 安装依赖项： npm安装

5. 启动开发服务器： ng发球

6. 确保您的MCP服务器在localhost:5656上运行

7. 访问应用程序http://localhost:4200

特征：

✅ 服务器发现和连接管理 ✅ 参数替换下的刀具执行
✅ 完成所有架构实体的CRUD操作 ✅ 采用JSON-API格式的高级过滤 ✅ 实时操作日志 ✅ 响应式UI设计 ✅ 错误处理和状态跟踪 ✅ CORS代理配置

使用示例：

1. 连接到MCP服务器：

   • 在服务器状态部分中单击服务器旁边的“连接”

2. 执行工具：

   • 使用“可用工具”部分中的“执行”按钮

3. 使用筛选器加载数据：

   • “高信用客户”为信用额度>5000的客户加载信用额度
   • “昂贵产品”装载单位价格>100的产品
   • “最近订单”加载2024年以来的订单

4. 发送电子邮件：

   • 点击任何客户旁边的“发送电子邮件”以触发电子邮件工具

5. 监控操作：

   • 在操作日志中查看所有操作及其状态

架构：

• MCPDiscoveryService：处理服务器发现和连接
• MCPToolsService：执行具有参数替换的工具
• DataService：为所有实体提供经过筛选的数据访问
• 反应式UI：使用可观察性进行实时更新
• 类型安全：所有数据模型的完整TypeScript接口

该框架完全可扩展，可用于生产！ */