MCP API Monitor

API监控平台

一个全面的平台，用于管理API、MCP和具有智能代码分析和监控功能的AI模型。

特性

🔐 认证

• 用户注册：使用名称、电子邮件和密码创建帐户
• 用户登录：安全登录系统
• 会话管理：使用localStorage进行持久登录

➕ 添加API/MCP

• AI驱动的代码分析：粘贴您的API代码示例，让AI提取：

- API端点URL - HTTP方法（GET、POST、PUT、DELETE等） - API密钥和标头 - 数据结构和字段 - 请求/响应模式

• 自动模式检测：AI分析代码以理解数据结构
• 保存和监视：保存分析的API以进行持续监控

📊 仪表盘

• 概览统计:

- 监测的API总数 - 活动API计数 - AI模型总数

• API卡：视觉卡片显示：

- API名称和说明 - 状态（活动/非活动） - HTTP方法 - 检测到的字段数 - 通话记录计数

• 搜索：实时搜索所有受监控的API

🔍 API详细信息视图

点击任何API卡查看：

• 端点信息：完整的URL、方法、API密钥
• 数据模式：检测到的字段和结构
• 示例代码：分析的原始代码
• 呼叫记录:

- 每次通话的时间戳 - 请求方法和端点 - 响应状态（成功/错误） - 响应数据预览

• 测试API：进行API实时调用并查看结果

🤖 AI模型管理

• 添加AI模型：导入和管理AI模型配置：

- 型号名称 - 类型（自定义、OpenAI、人类） - 能力（文本生成、分析等） - API终点 - API密钥 - 型号名称/版本 - 上下文窗口大小

• 型号表：在表中查看所有配置的模型
• 删除模型：从收藏中删除模型

入门指南

1.打开应用程序

# If you have a local server running
open http://localhost:8000

# Or simply open index.html in your browser
open index.html

2.注册/登录

• 点击“注册”选项卡
• 输入您的姓名、电子邮件和密码
• 点击“注册”创建帐户
• 如果您已经有帐户，请使用“登录”

3.添加您的第一个API

1. 导航至“添加API/MCP”页面
2. 粘贴API代码示例（例如，带有端点和头的fetch函数）
3. 点击“🤖 用AI分析”
4. 查看提取的信息
5. 添加名称和描述
6. 点击“💾 保存API/MCP“

4.监控API

• 在仪表板上查看所有API
• 点击任何API卡查看详细信息
• 使用“🧪 测试API进行实时调用
• 查看通话记录和回复

5.管理人工智能模型

• 首选🤖 AI模型”页面
• 点击“➕ 添加AI模型”
• 填写模型配置
• 保存以添加到您的收藏中

API代码示例

async function fetchRecipeEntities() {
    const response = await fetch(`https://app.base44.com/api/apps/6907f8149df3a6b0ccf8bfb3/entities/Recipe`, {
        headers: {
            'api_key': '674dc575177a4851b7a276bf7084f85b',
            'Content-Type': 'application/json'
        }
    });
    const data = await response.json();
    return data;
}

AI将自动提取：

• 端点： https://app.base44.com/api/apps/.../entities/Recipe
• 方法： GET
• API密钥： 674dc575177a4851b7a276bf7084f85b
• 标题： Content-Type: application/json

数据存储

所有数据都使用localStorage本地存储在浏览器中：

• 用户帐户
• 受监控的API
• AI模型配置
• API调用历史记录

备注：数据存储在本地，如果清除浏览器数据，数据将被清除。

项目结构

kcanva01/
├── index.html          # Main application HTML
├── styles.css          # Complete styling
├── app.js              # Application logic
├── recipe-types.ts     # TypeScript types (legacy)
└── README.md           # This file

技术细节

AI代码分析

当前实现使用模式匹配来提取API信息。在生产中，这将连接到实际的人工智能模型API（如您可以在人工智能模型部分配置的模型），以执行更复杂的代码分析。

API测试

当您单击“测试API”时，应用程序：

1. 向端点发出实时HTTP请求
2. 记录响应
3. 将通话添加到历史记录中
4. 显示成功/错误状态

浏览器兼容性

适用于所有现代浏览器：

• Chrome/Edge（最新）
• Firefox（最新）
• Safari（最新）

未来的增强功能

• \[\]连接到实际的人工智能API进行代码分析
• \[\]数据持久性后端集成
• \[\]实时API监控
• \[\]警报和通知
• \[\]API文档生成
• \[\]导出/导入配置
• \[\]团队协作功能

许可证

API和人工智能模型管理的开发工具。