Web审核代理

企业级自主Web性能和安全审计员

![License: MIT](https://opensource.org/licenses/MIT) ![Python 3.9+](https://www.python.org/downloads/) ![Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) ![OpenAI](https://platform.openai.com/docs/guides/function-calling) ![Status: Production Ready](<>)

企业级自主AI系统 它通过OpenAI函数调用和Chrome DevTools MCP集成执行全面的web应用程序审计。通过高管级报告提供可操作的性能和安全见解。

🏗️ 系统架构

┌─────────────────┐    ┌──────────────────┐
│   Web Interface │◀───│    FastAPI       │
│   Jinja2 + HTML │───▶│    /audit        │
│   Templates     │    │    REST API      │
└─────────────────┘    └──────────────────┘
                                │ ▲
                                ▼ │
                       ┌──────────────────┐
                       │  Audit Service   │
                       │  Business Logic  │
                       │                  │
                       └──────────────────┘
                                │ ▲
                                ▼ │
                       ┌──────────────────┐    ┌─────────────────────┐
                       │   LLM Client     │    │   MCP Tool Client   │
                       │   OpenAI API     │───▶│   JSON-RPC          │
                       │   GPT-4o-mini    │◀───│   Communication     │
                       │   3-Phase Calls  │    │                     │
                       └──────────────────┘    └─────────────────────┘
                                │ ▲                        │ ▲
                                │ │                        ▼ │
                                │ │            ┌─────────────────────┐
                                │ │            │  Chrome DevTools    │
                                │ │            │  MCP Server         │
                                │ │            │  (Node.js Process)  │
                                │ │            │                     │
                                │ │            │   Browser Tools:    │
                                │ │            │   • navigate_page   │
                                │ │            │   • performance_*   │
                                │ │            │   • evaluate_script │
                                │ │            │   • take_screenshot │
                                │ │            └─────────────────────┘
                                ▼ │
                       ┌──────────────────┐
                       │  Complete Report │
                       │  Technical +     │
                       │  Executive Data  │
                       └──────────────────┘

🧠 三阶段人工智能架构

OpenAI LLM呼叫流

Phase 1: Function Calling
┌─────────────────────────────────────────────────────────────┐
│ OpenAI Call #1: Tool Selection                              │
│ ┌─────────────────┐    ┌─────────────────────────────────┐ │
│ │ System Prompt   │───▶│ AI selects browser tools        │ │
│ │ Web Audit Expert│    │ • navigate_page                 │ │
│ │ Persona         │    │ • performance_start_trace       │ │
│ └─────────────────┘    │ • evaluate_script               │ │
│                        │ • take_screenshot               │ │
│                        └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                                │
                                ▼
                    ┌─────────────────────┐
                    │ Execute MCP Tools   │
                    │ Chrome DevTools     │
                    │ Browser Automation  │
                    └─────────────────────┘
                                │
                                ▼
Phase 2: Structured Analysis
┌─────────────────────────────────────────────────────────────┐
│ OpenAI Call #2: Technical Audit Report                     │
│ ┌─────────────────┐    ┌─────────────────────────────────┐ │
│ │ Tool Results    │───▶│ AI analyzes browser data        │ │
│ │ • Performance   │    │ • Core Web Vitals extraction   │ │
│ │ • Security      │    │ • Vulnerability assessment     │ │
│ │ • Network       │    │ • Technical recommendations    │ │
│ └─────────────────┘    │ • Structured JSON output       │ │
│                        └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                                │
                                ▼
Phase 3: Executive Summary
┌─────────────────────────────────────────────────────────────┐
│ OpenAI Call #3: C-Suite Business Impact                    │
│ ┌─────────────────┐    ┌─────────────────────────────────┐ │
│ │ Technical Audit │───▶│ AI creates executive summary    │ │
│ │ Results         │    │ • Business impact assessment   │ │
│ │                 │    │ • ROI estimates & timelines    │ │
│ │                 │    │ • Risk prioritization          │ │
│ │                 │    │ • Investment recommendations   │ │
│ └─────────────────┘    └─────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                                │
                                ▼
                    ┌─────────────────────┐
                    │ Complete Report     │
                    │ Technical + Exec    │
                    │ Dual-Audience Value │
                    └─────────────────────┘

🎯 核心价值主张

自主智能

单输入：仅提供目标URL
零配置：自配置AI分析
真实浏览器数据：实时Chrome DevTools集成
执行界面：企业级web仪表板

企业级分析

性能指标：核心网络生命、Lighthouse评分、TTFB分析
安全评估：OWASP Top 10、安全标头、漏洞扫描
业务影响：通过投资回报率分析提出风险优先建议
AI驱动的洞察：执行报告的三阶段OpenAI分析
双重受众报告：技术细节+高管业务总结

生产集成

FastAPI后端：企业就绪的REST架构
CI/CD管道：自动质量门和SLO执行
执行报告：为C级管理层准备的仪表板和见解
批处理：多站点审计功能

🛠️ 工具和代理功能

工具/代理	功能	技术	输出
navigate_page	加载网站并捕获指标	Chrome DevTools MCP	导航数据、页面信息
性能_启动_跟踪	开始性能测量	Chrome DevTools API	核心Web Vitals跟踪
性能停止跟踪	最终性能测量	Chrome DevTools API	性能指标
evaluate_script	运行JavaScript进行安全检查	Chrome DevTools Runtime	安全标头，HTTPS
list_网络_请求	分析HTTP请求和标头	网络域API	安全标头、性能
take_screenshot	可视化页面状态捕获	page.capture截图	可视化验证
list_console_消息	监控JS错误/警告	运行时.consoleAPI调用	错误检测
🤖 AI审计代理	全面的网络分析	OpenAI 3阶段+MCP	技术+执行报告

📊 全面审计覆盖

绩效指标

核心网络生命体征（LCP、FID、CLS、INP）
灯塔性能得分
第一字节时间（TTFB）
首款内容丰富的涂料（FCP）
互动时间（TTI）
资源优化分析
控制台错误检测

安全评估

HTTPS验证和TLS配置
安全标头（CSP、HSTS、X-Frame-Options）
OWASP十大漏洞扫描
网络请求安全分析
证书验证
攻击面分析

🚀 快速入门指南

先决条件

Python 3.9+ 使用pip
Node.js 20+ （适用于Chrome DevTools MCP服务器）
OpenAI API密钥 具有GPT-4访问权限

核心依赖关系

开放人工智能：GPT-4o与函数调用集成
快速API：高性能web框架
派丹蒂克：数据验证和设置管理
Uvicorn：用于生产部署的ASGI服务器
Jinja2：web界面模板引擎
Chrome开发工具MCP：浏览器自动化协议

安装

选项1:Docker（推荐）

# Clone repository
git clone 
cd Ai-hackathon

# Configure environment
echo "OPENAI_API_KEY=your-key-here" > .env

# Build and start (single command)
make docker-up

# Other Docker commands
make docker-down    # Stop containers
make docker-clean   # Remove containers and images
make docker-logs    # Show container logs
make docker-fix     # Nuclear reset for Docker issues

方案2：地方发展

# Clone repository
git clone 
cd Ai-hackathon

# Install dependencies
make install

# Configure environment
echo "OPENAI_API_KEY=your-key-here" > .env

# Start the application
make run

使用选项

web界面

# Access professional dashboard
open http://localhost:9000

REST API

# Direct API call
curl -X POST "http://localhost:9000/audit" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com"}'

# API documentation
open http://localhost:9000/docs

Python API

# Direct API usage
import requests

response = requests.post("http://localhost:9000/audit",
    json={"url": "https://your-target-site.com"})
result = response.json()

print(f"Performance Score: {result['performance']['lighthouse_score']}")
print(f"Security Risk: {result['security']['risk_level']}")
print(f"Executive Summary: {result['executive_summary']['business_impact']}")
print(f"Investment Priority: {result['executive_summary']['investment_priority']}")

🎯 用例场景

开发团队

使用真实浏览器数据进行部署前验证
性能回归检测
安全合规性验证

DevOps和SRE

CI/CD与FastAPI端点的集成
具有自动阈值的SLO监控
通过主动扫描预防事故

高管领导力

企业级审计情报
风险评估与业务影响量化
具有绩效投资回报率的战略规划

🔧 技术栈

核心技术

后端：FastAPI，Python 3.9+
AI/LLM：带函数调用的OpenAI GPT-4o
浏览器自动化：Chrome DevTools MCP+Node.js
前端：Jinja2模板，HTML/CSS
数据验证：Pydantic模式
协议：JSON-RPC用于MCP通信

架构模式

清洁依赖注入
三相AI分析流水线
实时浏览器集成
执行级报告

Docker实现

多阶段构建：优化了Alpine Linux映像
服务编排：Docker Compose与健康检查
开发工作流程：简化了Make命令
生产就绪：适当的网络和卷管理

🚀 发出命令

# Development
make install      # Install dependencies
make run          # Start application locally
make stop         # Stop application
make clean        # Clean build artifacts

# Docker
make docker-up    # Build and start containers
make docker-down  # Stop containers
make docker-clean # Remove containers and images
make docker-logs  # Show container logs
make docker-fix   # Nuclear reset for Docker issues

______________________________________________________________________

状态：生产就绪| 许可证：MIT| 内置：FastAPI、OpenAI、Chrome DevTools MCP

_具有执行级智能的企业级网络审计_ 🏛️mance web框架

派丹蒂克：数据验证和设置管理
Uvicorn：用于生产部署的ASGI服务器
Jinja2：web界面模板引擎
Chrome开发工具MCP：浏览器自动化协议

安装

选项1:Docker（推荐）

# Clone repository
git clone 
cd AiHackanton

# Configure environment
echo "OPENAI_API_KEY=your-key-here" > .env

# Build and start with Docker
make docker-build
make docker-up

# Other Docker commands
make docker-down    # Stop containers
make docker-clean   # Remove containers and images
make docker-logs    # Show container logs

方案2：地方发展

# Clone repository
git clone 
cd AiHackanton

# Create virtual environment
python3 -m venv .venv1
source .venv1/bin/activate  # On Windows: .venv1\Scripts\activate

# Install Python dependencies
pip install -r requirements.txt

# Install Node.js dependencies (for Chrome DevTools MCP)
npm install -g @modelcontextprotocol/server-chrome-devtools

# Configure environment
echo "OPENAI_API_KEY=your-key-here" > .env

# Start the application
make run
# OR manually: PYTHONPATH=. python src/app/main.py

使用选项

Docker快速入门

# Start everything
make docker-up

# Access web interface
open http://localhost:9000

web界面

# Access professional dashboard
open http://localhost:9000

REST API

# Direct API call
curl -X POST "http://localhost:9000/audit" \
  -H "Content-Type: application/json" \
  -d '{"url": "https://example.com"}'

# API documentation
open http://localhost:9000/docs

Python API

# Direct API usage
import requests

response = requests.post("http://localhost:9000/audit",
    json={"url": "https://your-target-site.com"})
result = response.json()

print(f"Performance Score: {result['performance']['lighthouse_score']}")
print(f"Security Risk: {result['security']['risk_level']}")
print(f"Executive Summary: {result['executive_summary']['business_impact']}")
print(f"Investment Priority: {result['executive_summary']['investment_priority']}")

📁 项目架构

AiHackanton/
├── 🏗️ src/                         # Production backend
│   ├── app/                        # FastAPI application
│   │   ├── routes/                 # API endpoints
│   │   │   ├── audit.py            # Web audit REST endpoint
│   │   │   └── health.py           # Health check endpoint
│   │   └── main.py                 # FastAPI app setup & configuration
│   ├── business/                   # Core audit logic
│   │   └── audit_logic.py          # AuditService orchestration
│   ├── clients/                    # External service clients
│   │   ├── llm_client.py           # OpenAI GPT-4o-mini integration
│   │   ├── mcp_tool_client.py      # Chrome DevTools MCP client
│   │   └── service_factory.py      # Dependency injection factory
│   ├── config/                     # Configuration management
│   │   ├── config.py               # Application settings (Pydantic)
│   │   └── logging_config.py       # Multi-file logging setup
│   ├── schemas/                    # Pydantic data models
│   │   ├── requests.py             # API request validation
│   │   └── responses.py            # Audit response structure
│   ├── prompts/                    # LLM prompt templates
│   │   └── prompts.py              # OpenAI system & user prompts
│   ├── helpers/                    # Utilities and validators
│   │   ├── exceptions.py           # Custom exception classes
│   │   └── validators.py           # URL validation logic
│   ├── middleware/                 # HTTP middleware
│   │   └── logging_middleware.py   # Request/response logging
│   └── utils/                      # Utilities and tools
│       ├── logger.py               # Centralized logging setup
│       ├── log_context.py          # Correlation ID & performance tracking
│       └── mcp_tools_exporter.py   # MCP tools documentation utility
├── 🌐 frontend/                    # Web interface
│   ├── templates/                  # Jinja2 HTML templates
│   │   ├── base.html               # Base template layout
│   │   ├── index.html              # Landing page
│   │   ├── dashboard.html          # Audit dashboard
│   │   └── report.html             # Audit results display
│   ├── static/                     # Static assets
│   │   ├── css/                    # Stylesheets
│   │   ├── js/                     # JavaScript files
│   │   └── images/                 # Image assets
│   └── routes/                     # Web routes
│       └── web.py                  # Frontend route handlers
├── 📊 logs/                        # Application logs
│   ├── app.log                     # General application logs
│   ├── error.log                   # Error and exception logs
│   ├── metrics.log                 # Business metrics (METRIC level)
│   └── debug.log                   # Development debugging logs
├── .env                            # Environment variables
├── pyproject.toml                  # Project configuration & dependencies
└── README.md                       # Project documentation

🎯 用例场景

开发团队

使用真实浏览器数据进行部署前验证
性能回归检测
安全合规性验证

DevOps和SRE

CI/CD与FastAPI端点的集成
具有自动阈值的SLO监控
通过主动扫描预防事故

高管领导力

企业级审计情报
风险评估与业务影响量化
具有绩效投资回报率的战略规划

🔧 技术栈

核心技术

后端：FastAPI，Python 3.9+
AI/LLM：带函数调用的OpenAI GPT-4o-mini
浏览器自动化：Chrome DevTools MCP+Node.js
前端：Jinja2模板，HTML/CSS
数据验证：Pydantic模式
协议：JSON-RPC用于MCP通信

架构模式

清洁依赖注入
单代理AI分析
实时浏览器集成
执行级报告

______________________________________________________________________

状态：生产就绪| 许可证：MIT| 内置：FastAPI、OpenAI、Chrome DevTools MCP

_具有企业级智能的单代理网络审计_ 🤖

_具有执行级智能的企业级网络审计_ 🏛️

AI Hackathon

快速接入

详细介绍

Web审核代理

企业级自主Web性能和安全审计员

🏗️ 系统架构

🧠 三阶段人工智能架构

OpenAI LLM呼叫流

🎯 核心价值主张

自主智能

企业级分析

生产集成

🛠️ 工具和代理功能

📊 全面审计覆盖

绩效指标

安全评估

🚀 快速入门指南

先决条件

核心依赖关系

安装

选项1:Docker（推荐）

方案2：地方发展

使用选项

web界面

REST API

Python API

🎯 用例场景

开发团队

DevOps和SRE

高管领导力

🔧 技术栈

核心技术

架构模式

Docker实现

🚀 发出命令

安装

选项1:Docker（推荐）

方案2：地方发展

使用选项

Docker快速入门

web界面

REST API

Python API

📁 项目架构

🎯 用例场景

开发团队

DevOps和SRE

高管领导力

🔧 技术栈

核心技术

架构模式

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP