Visual MCP (Hfyeomans)

视觉MCP服务器

一个模型上下文协议（MCP）服务器，为用户界面（UI）开发提供视觉反馈功能。它能够截取屏幕截图，与参考设计进行对比，并提供可操作的反馈，帮助编码人员更快地迭代UI实现。

什么是Visual MCP？

Visual MCP 消除了编码人员构建的内容与您期望的视觉成果之间的差距。它使人工智能助手能够：

• 截取网页和桌面区域的屏幕截图
• 将实现与设计原型进行对比
• 检测并分析视觉差异
• 生成可操作的CSS和布局修复方案
• 实时监控应用程序中的视觉回归问题

非常适合： 用户界面开发迭代、设计质量保证验证、回归测试、A/B测试以及监控实时应用程序。

快速概览功能

其工作原理

┌─────────────────────────────────────────────────────────────┐
│                      Visual MCP Server                       │
├─────────────────────────────────────────────────────────────┤
│                                                               │
│  ┌─────────────┐      ┌──────────────┐      ┌────────────┐ │
│  │   MCP       │──────│  Screenshot  │──────│  Puppeteer │ │
│  │  Protocol   │      │    Engine    │      │  (Web)     │ │
│  │   Layer     │      │              │      └────────────┘ │
│  └─────────────┘      │              │      ┌────────────┐ │
│        │              │              │──────│  ScreenKit │ │
│        │              └──────────────┘      │  (macOS)   │ │
│        ▼                                    └────────────┘ │
│  ┌─────────────┐      ┌──────────────┐                     │
│  │   Tool      │──────│  Comparison  │                     │
│  │  Handlers   │      │    Engine    │──────Pixelmatch    │
│  └─────────────┘      └──────────────┘                     │
│        │                                                    │
│        │              ┌──────────────┐                     │
│        │──────────────│  Monitoring  │──────Auto-Feedback │
│        │              │    System    │                     │
│        │              └──────────────┘                     │
│        ▼                                                    │
│  ┌─────────────┐      ┌──────────────┐                     │
│  │   Claude    │──────│  AI Feedback │──────Claude API    │
│  │    Code     │      │   Analyzer   │                     │
│  └─────────────┘      └──────────────┘                     │
│                                                              │
└──────────────────────────────────────────────────────────────┘

流量：

1. AI代理调用MCP工具（如截图、视觉对比等）
2. 截图引擎捕捉目标（网页或桌面）
3. 对比引擎生成像素差异可视化
4. AI分析器生成可操作的反馈
5. 代理收到结构化结果以迭代实施

安装

先决条件

• Node.js 18及以上版本
• npm 或 yarn

全局安装（推荐）

全局安装Visual MCP，以便在任何项目目录中使用：

npm install -g @visualmcp/visual-mcp-server

在（某处）进行配置 ~/.claude.json （用户级别）：

{
  "mcpServers": {
    "visual-mcp": {
      "command": "visual-mcp"
    }
  }
}

输出目录： 默认情况下，截图/对比图会创建在您当前的工作目录中。若要确保位置一致：

{
  "mcpServers": {
    "visual-mcp": {
      "command": "visual-mcp",
      "env": {
        "VISUAL_MCP_OUTPUT_DIR": "$HOME/.visual-mcp/screenshots",
        "VISUAL_MCP_COMPARISONS_DIR": "$HOME/.visual-mcp/comparisons"
      }
    }
  }
}

使用 npx（无需安装）

无需安装即可运行 Visual MCP：

{
  "mcpServers": {
    "visual-mcp": {
      "command": "npx",
      "args": ["-y", "@visualmcp/visual-mcp-server"]
    }
  }
}

注： 首次运行时npx会进行下载（会有轻微延迟），然后缓存到本地。

本地开发安装

对于从源代码进行开发或测试：

# Clone the repository
git clone https://github.com/hfyeomans/VisualMCP.git
cd VisualMCP

# Install dependencies
npm install

# Build the project
npm run build

# Validate installation
npm run validate

验证脚本会检查先决条件，并为您的系统提供精确的MCP配置。

原生桌面捕获（可选）

用于捕获桌面区域的 macOS 15+（Sequoia）:

1. 包含捆绑的 Swift 辅助二进制文件（无需构建）
2. 当提示时，授予屏幕录制权限
3. 见 原生捕获指南 详情如下

注： 原生捕获功能需要 macOS 15 或更高版本。基于网页的捕获功能适用于所有平台。

MCP集成

推荐：全局安装

对于大多数用户来说，全局安装是最简单的：

{
  "mcpServers": {
    "visual-mcp": {
      "command": "visual-mcp"
    }
  }
}

备选方案：本地开发

如果您正在开发Visual MCP或需要特定版本：

{
  "mcpServers": {
    "visual-mcp": {
      "command": "node",
      "args": ["dist/index.js"],
      "cwd": "/absolute/path/to/VisualMCP"
    }
  }
}

LMStudio

在MCP服务器设置中进行配置：

{
  "name": "visual-mcp",
  "transport": {
    "type": "stdio",
    "command": "node",
    "args": ["dist/index.js"],
    "cwd": "/absolute/path/to/VisualMCP"
  }
}

其他MCP客户端

Visual MCP遵循 模型上下文协议 标准。使用上述命令配置stdio传输。

配置

Visual MCP 配备了合理的默认设置。可以通过环境变量进行覆盖，或者 .env 文件：

示例 .env：

VISUAL_MCP_OUTPUT_DIR=/Users/me/screenshots
VISUAL_MCP_TOLERANCE=3
VISUAL_MCP_LOG_LEVEL=debug

MCP 工具参考

1. 截图

截取网页或桌面区域的屏幕截图。

参数：

| 对象 | 否 | 截图选项（格式、质量等） |

目标类型： URL 目标

{
  type: 'url',
  url: string,              // Full URL to capture
  viewport?: {              // Optional custom viewport
    width: number,          // Viewport width in pixels
    height: number          // Viewport height in pixels
  }
}

(网页)： 区域目标

{
  type: 'region',
  x: number,                // X coordinate from left
  y: number,                // Y coordinate from top
  width: number,            // Region width in pixels
  height: number            // Region height in pixels
}

（桌面捕获 - 仅限 macOS 15+ 版本）：

选项： | 选项 | 类型 | 默认值 | 描述 | |--------|------|---------|-------------| format |（无对应中文翻译，原表头为分隔线）|（无对应中文翻译，原表头为分隔线）|（无对应中文翻译，原表头为分隔线）|（无对应中文翻译，原表头为分隔线）| 'png' | 'jpeg' | 'png' | | quality | 图像格式 | 90 | | 数字（1-100） | filename | JPEG 质量（PNG 忽略） | | fullPage | 字符串 | 自动生成 | 自定义文件名 | false |

| 布尔值 |

{
  filepath: string,         // Absolute path to screenshot
  width: number,           // Image width in pixels
  height: number,          // Image height in pixels
  format: 'png' | 'jpeg',  // Image format
  size: number,            // File size in bytes
  timestamp: string,       // ISO timestamp
  target: object           // Original target specification
}

| 捕获整个页面（仅URL） |

// Web page screenshot
{
  "target": {
    "type": "url",
    "url": "https://example.com",
    "viewport": { "width": 1920, "height": 1080 }
  },
  "options": {
    "format": "png",
    "fullPage": true
  }
}

// Desktop region (macOS 15+)
{
  "target": {
    "type": "region",
    "x": 0,
    "y": 0,
    "width": 1920,
    "height": 1080
  },
  "options": {
    "format": "jpeg",
    "quality": 85
  }
}

返回值：

• 示例：
• 用例：
• 捕获当前的实现状态
• 截图参考设计
• 监控应用程序用户界面

______________________________________________________________________

创建视觉测试基线

记录用户界面（UI）错误

2. 对比视觉元素

比较两幅图像，并以像素级精确度检测视觉差异。 参数： | 参数 | 类型 | 必需 | 描述 | currentImage |-----------|------|----------|-------------| |（无对应中文）|（无对应中文）|（无对应中文）|（无对应中文）| referenceImage | | 字符串 | 是 | 当前截图的路径 | options |

| 字符串 | 是 | 参考/基线图像的路径 |

| | 对象 | 否 | 对比配置 | 选项： tolerance | 选项 | 类型 | 默认值 | 描述 | 5 |--------|------|---------|-------------| | 中文翻译 | 中文 | 英文 | 其他语言 | threshold | 0.1 | 数字（0-100） | | 可接受差异百分比（高于此值 = 不匹配） | ignoreRegions | [] | 数字（0-1） |

| 像素差异敏感度 |

{
  x: number,      // Region X coordinate
  y: number,      // Region Y coordinate
  width: number,  // Region width
  height: number  // Region height
}

|

{
  differencePercentage: number,    // Total difference (0-100%)
  pixelsDifferent: number,         // Number of pixels changed
  totalPixels: number,             // Total pixels compared
  diffImagePath: string,           // Path to diff visualization
  isMatch: boolean,                // Within tolerance threshold
  regions: [                       // Detected difference regions
    {
      x: number,
      y: number,
      width: number,
      height: number,
      severity: 'low' | 'medium' | 'high'
    }
  ]
}

| 数组 |

// Basic comparison
{
  "currentImage": "/screenshots/current.png",
  "referenceImage": "/designs/expected.png"
}

// With ignore regions (e.g., timestamps, dynamic content)
{
  "currentImage": "/screenshots/current.png",
  "referenceImage": "/designs/expected.png",
  "options": {
    "tolerance": 3,
    "ignoreRegions": [
      { "x": 10, "y": 10, "width": 200, "height": 50 },  // Ignore header timestamp
      { "x": 0, "y": 900, "width": 1920, "height": 80 }  // Ignore footer
    ]
  }
}

// Strict comparison
{
  "currentImage": "/screenshots/current.png",
  "referenceImage": "/designs/expected.png",
  "options": {
    "tolerance": 0.5,
    "threshold": 0.05
  }
}

| 不参与比较的区域 |

• 忽略区域格式：
• 返回值：
• 示例：
• 用例：
• 验证实施是否符合设计要求

检测视觉回归 analyze_ui_feedback 比较更改前后的差异

______________________________________________________________________

A/B测试视觉差异

QA设计准确性

相关工具：

(分析差异图像) 3\. 分析用户界面反馈 利用人工智能分析，从视觉差异中生成可操作的反馈。 diffImagePath 参数： | 参数 | 类型 | 必需 | 描述 | options |-----------|------|----------|-------------|

|（无对应中文）| 无 | （无对应中文）| （无对应中文）|

| | 字符串 | 是 | 差异可视化路径（来自 compare_visuals） | | priority | 对象 | 否 | 分析配置 | 选项： context | 选项 | 类型 | 默认值 | 描述 | |--------|------|---------|-------------| suggestionsType | | | | | 'both' |

| 字符串数组 | 所有区域 | 要分析的重点区域 |

• 'layout' |
• 'colors' | 字符串 | - | 关于预期设计的额外上下文信息 |
• 'typography' |
• 'spacing' | 字符串 |
• 'content' | 生成建议的类型 |

优先领域：

• 'css' - 定位、对齐、间距
• 'general' - 色彩准确性，对比度
• 'both' - 字体大小、粗细、行高

- 边距、内边距、间距

{
  summary: string,              // Overall analysis summary
  issues: [                     // Detected issues
    {
      type: string,             // Issue category (layout, colors, etc.)
      severity: 'low' | 'medium' | 'high',
      description: string,      // What's wrong
      location: {               // Where the issue is
        x: number,
        y: number,
        width: number,
        height: number
      }
    }
  ],
  suggestions: [                // Actionable fixes
    {
      type: 'css' | 'general',
      title: string,            // Fix title
      description: string,      // Why this fix helps
      code?: string,            // CSS code (if type: 'css')
      priority: number          // Fix priority (1 = highest)
    }
  ],
  confidence: number            // Analysis confidence (0-100)
}

- 文本内容，图片

// Basic feedback
{
  "diffImagePath": "/comparisons/diff_12345.png"
}

// Focused analysis
{
  "diffImagePath": "/comparisons/diff_12345.png",
  "options": {
    "priority": ["layout", "spacing"],
    "context": "Button should be centered with 20px padding",
    "suggestionsType": "css"
  }
}

// General guidance only
{
  "diffImagePath": "/comparisons/diff_12345.png",
  "options": {
    "suggestionsType": "general",
    "context": "Landing page hero section"
  }
}

建议类型：

• \- CSS代码片段
• \- 一般指导
• \- CSS + 通用（默认）
• 返回值：
• 示例：

用例： compare_visuals 获取修复视觉错误的CSS补丁

______________________________________________________________________

了解发生了什么变化

优先考虑视觉上的改进

生成实施任务

从视觉差异中学习 相关工具： （生成差异图像以进行分析） target 4. 开始监控 开始对目标进行连续监测，并启用自动变化检测。 referenceImage 参数： | 参数 | 类型 | 是否必需 | 描述 | interval |-----------|------|----------|-------------| | 中文翻译 | 对应英文 | 中文意思 | 英文原词 | autoFeedback |

| 对象 | 是 | 要监控的目标（与 take_screenshot 相同） |

| | 字符串 | 是 | 用于比较的基线图像 | | interval | 编号 | 序号 | 截图间隔（秒）（1-300） | 5 | | 布尔值 | 否 | 自动生成关于更改的反馈 | autoFeedback 选项： true | 选项 | 类型 | 默认值 | 描述 |

|--------|------|---------|-------------|

{
  sessionId: string,           // Monitoring session ID
  target: object,              // Target being monitored
  referenceImage: string,      // Baseline image path
  interval: number,            // Capture interval
  startedAt: string            // ISO timestamp
}

| | | | |

• |
• | 数字（1-300） |
• | 捕获之间的间隔时间（秒） |
• |
• | 布尔值 |

| 自动生成AI反馈 |

monitoring/{sessionId}/
  ├── session.json          # Session metadata
  ├── baseline.png          # Reference baseline
  └── captures/
      ├── capture_001.png   # Each capture
      ├── capture_002.png
      ├── diff_001.png      # Diff visualizations
      └── feedback_001.json # AI feedback (if enabled)

返回值：

// Monitor localhost development
{
  "target": {
    "type": "url",
    "url": "http://localhost:3000"
  },
  "referenceImage": "/designs/final-design.png",
  "interval": 5,
  "autoFeedback": true
}

// Monitor desktop region
{
  "target": {
    "type": "region",
    "x": 100,
    "y": 100,
    "width": 1280,
    "height": 720
  },
  "referenceImage": "/baselines/window.png",
  "interval": 10,
  "autoFeedback": false
}

// Fast monitoring (1 second)
{
  "target": { "type": "url", "url": "http://localhost:8080" },
  "referenceImage": "/baseline.png",
  "interval": 1
}

监测行为：

• 在指定间隔时间捕获屏幕截图
• 将每次捕获与基线进行比较
• 检测差异是否超出容忍范围
• 可选地生成关于更改的人工智能反馈
• 在会话目录中存储监控历史

会话目录结构： stop_monitoring 示例：

______________________________________________________________________

用例：

实时开发反馈

编码过程中的回归检测

监控生产部署 追踪随时间变化的视觉变化 自动化视觉测试 sessionId 相关工具：

（结束会话并获取总结）

{
  sessionId: string,           // Session ID
  target: object,              // Target that was monitored
  duration: number,            // Total monitoring duration (seconds)
  captureCount: number,        // Total captures taken
  changesDetected: number,     // Number of times changes exceeded tolerance
  finalStatus: string,         // 'matched' | 'different' | 'error'
  sessionDirectory: string,    // Path to session data
  captures: [                  // All captures taken
    {
      timestamp: string,
      filepath: string,
      differencePercentage: number
    }
  ],
  significantChanges: [        // Changes that exceeded tolerance
    {
      timestamp: string,
      differencePercentage: number,
      diffImagePath: string,
      feedback?: object        // AI feedback (if enabled)
    }
  ]
}

5. 停止监控

// Stop monitoring session
{
  "sessionId": "monitor_abc123"
}

停止监控会话并获取摘要。

• 参数：
• | 参数 | 类型 | 必需 | 描述 |
• |-----------|------|----------|-------------|
• | 中文翻译 | 英文 | 中文 | 中文 | 中文 |
• |

| 字符串 | 是 | 要停止的监控会话ID | start_monitoring 返回：

______________________________________________________________________

示例：

用例：

结束监控会话 获取监测报告

// 1. Capture current implementation
const screenshot = await take_screenshot({
  target: { type: 'url', url: 'http://localhost:3000' },
  options: { filename: 'current.png' }
})

// 2. Compare with design
const comparison = await compare_visuals({
  currentImage: screenshot.filepath,
  referenceImage: '/designs/mockup.png',
  options: { tolerance: 3 }
})

// 3. Get actionable feedback
if (!comparison.isMatch) {
  const feedback = await analyze_ui_feedback({
    diffImagePath: comparison.diffImagePath,
    options: {
      priority: ['layout', 'spacing'],
      suggestionsType: 'css'
    }
  })

  // Apply CSS suggestions and repeat
}

分析捕获到的变更

• 查看反馈历史记录
• 存档监控数据
• 相关工具：
• （开始会话）

______________________________________________________________________

常见工作流程

工作流程1：用户界面开发迭代 场景：

// 1. Capture production-ready implementation
const screenshot = await take_screenshot({
  target: {
    type: 'url',
    url: 'https://staging.example.com',
    viewport: { width: 1920, height: 1080 }
  },
  options: { fullPage: true }
})

// 2. Strict comparison with approved design
const comparison = await compare_visuals({
  currentImage: screenshot.filepath,
  referenceImage: '/approved-designs/final.png',
  options: {
    tolerance: 1,  // Strict threshold
    ignoreRegions: [
      { x: 0, y: 0, width: 1920, height: 60 }  // Ignore nav bar
    ]
  }
})

// 3. Generate QA report
if (!comparison.isMatch) {
  const feedback = await analyze_ui_feedback({
    diffImagePath: comparison.diffImagePath,
    options: { suggestionsType: 'general' }
  })
}

根据设计原型构建组件

• 好处：
• 快速迭代周期
• 像素级精确实现
• 可操作的CSS修复方案

______________________________________________________________________

进步的直观证据

工作流程2：设计质量保证验证 场景：

// 1. Take baseline before changes
const baseline = await take_screenshot({
  target: { type: 'url', url: 'http://localhost:3000/dashboard' },
  options: { filename: 'baseline.png', fullPage: true }
})

// 2. ... make code changes ...

// 3. Capture after changes
const after = await take_screenshot({
  target: { type: 'url', url: 'http://localhost:3000/dashboard' },
  options: { filename: 'after-changes.png', fullPage: true }
})

// 4. Detect regressions
const comparison = await compare_visuals({
  currentImage: after.filepath,
  referenceImage: baseline.filepath,
  options: { tolerance: 2 }
})

// 5. Investigate unexpected changes
if (!comparison.isMatch) {
  const feedback = await analyze_ui_feedback({
    diffImagePath: comparison.diffImagePath
  })
}

在部署前验证实施准确性

• 好处：
• 在生产前发现视觉错误
• 保持设计一致性
• 自动化质量保证流程

______________________________________________________________________

文件视觉准确性

工作流程3：回归测试 场景：

// 1. Capture variant A
const variantA = await take_screenshot({
  target: { type: 'url', url: 'http://localhost:3000?variant=a' }
})

// 2. Capture variant B
const variantB = await take_screenshot({
  target: { type: 'url', url: 'http://localhost:3000?variant=b' }
})

// 3. Visual difference analysis
const comparison = await compare_visuals({
  currentImage: variantB.filepath,
  referenceImage: variantA.filepath,
  options: { tolerance: 0 }  // Detect all differences
})

// 4. Document differences
const feedback = await analyze_ui_feedback({
  diffImagePath: comparison.diffImagePath,
  options: {
    context: 'Comparing button placement variants',
    suggestionsType: 'general'
  }
})

检测代码更新后的视觉变化

• 好处：
• 捕捉到意外的视觉变化
• 安全重构
• 自动化回归检测

______________________________________________________________________

视觉变化记录

工作流程4：A/B测试对比 场景：

// 1. Start monitoring
const session = await start_monitoring({
  target: { type: 'url', url: 'http://localhost:3000' },
  referenceImage: '/designs/final.png',
  interval: 5,
  autoFeedback: true
})

// 2. Develop application...
// Monitor automatically detects changes and provides feedback

// 3. Stop and review
const summary = await stop_monitoring({
  sessionId: session.sessionId
})

console.log(`Captured ${summary.captureCount} screenshots`)
console.log(`Detected ${summary.changesDetected} significant changes`)

比较两种设计方案

• 好处：
• 视觉A/B对比
• 记录设计决策
• 评估视觉影响

______________________________________________________________________

测试变体

工作流程5：实时监控

场景： 在开发过程中监控应用程序 好处： 实时视觉反馈 自动化变化检测 历史捕获记录

发展监测

性能基准 捕捉性能

| 全高清（1920x1080）| ~300毫秒 | ~2200毫秒 | 原生速度快7倍 |

| 4K（3840x2160）| ~500毫秒 | ~2500毫秒 | 原生速度提升5倍 | | 内存使用量 | 约15MB | 约150MB | 原生版本轻10倍 | 对比性能

| | | | |

1. | 2张图片 | 1920x1080分辨率 | ~100毫秒 | 像素匹配 |
2. | 2张图片 | 3840x2160 | ~300毫秒 | 4K对比 |
3. | 带5个忽略区域 | 1920x1080分辨率 | ~120毫秒 | 低开销 |
4. 监控性能
5. | 时间间隔 | CPU 使用率 | 内存 | 可持续性 |

______________________________________________________________________

|----------|-----------|--------|-------------|

|（无对应中文翻译，表示分隔线）|（无对应中文翻译，表示分隔线）|（无对应中文翻译，表示分隔线）|（无对应中文翻译，表示分隔线）|

| 1秒 | 15-20% | ~200MB | 是（短期） | | 5秒 | 5-8% | 约150MB | 是（推荐） | | 30秒 | \ 隐私与安全 > 屏幕录制

1. 为您的应用程序（终端、节点、集成开发环境）启用权限 完全重启应用程序
2. 看

权限指南

• 调试模式sw_vers 启用详细日志记录： systeminfo 寻求帮助 lsb_release -a在报告问题之前：
• 启用调试日志记录node --version运行验证：
• 检查平台兼容性
• 评论 DEBUG=visual-mcp:*文档资料
• 搜索现有问题

______________________________________________________________________

在报告问题时，请包含：

• 操作系统及版本（ /
• / )
• )

______________________________________________________________________

错误消息（完整堆栈跟踪）

VisualMCP/
├── src/
│   ├── index.ts                   # MCP server entry
│   ├── core/                      # Core infrastructure
│   │   ├── config.ts              # Configuration management
│   │   ├── container.ts           # Dependency injection
│   │   ├── logger.ts              # Logging
│   │   └── errors.ts              # Error types
│   ├── handlers/                  # MCP tool handlers
│   │   ├── take-screenshot.ts     # Screenshot handler
│   │   ├── compare-visuals.ts     # Comparison handler
│   │   ├── analyze-feedback.ts    # Feedback handler
│   │   ├── start-monitoring.ts    # Start monitor handler
│   │   └── stop-monitoring.ts     # Stop monitor handler
│   ├── screenshot/                # Screenshot engine
│   │   ├── puppeteer.ts           # Web capture (Puppeteer)
│   │   ├── native-capture.ts      # Desktop capture (ScreenCaptureKit)
│   │   └── monitoring.ts          # Monitoring system
│   ├── comparison/                # Visual analysis
│   │   ├── differ.ts              # Image comparison (Pixelmatch)
│   │   └── analyzer.ts            # AI feedback analyzer
│   ├── interfaces/                # TypeScript interfaces
│   └── types/                     # Type definitions
├── bin/
│   └── screencapture-helper       # Swift helper binary (macOS)
├── docs/                          # Documentation
├── test-app/                      # Test application
├── cli-tools/                     # Testing tools
├── screenshots/                   # Screenshot output
├── comparisons/                   # Diff output
├── monitoring/                    # Monitoring sessions
└── dist/                          # Built JavaScript

______________________________________________________________________

调试日志（含

)

1. 最小化复现案例
2. 文档
3. 原生桌面捕获指南
4. \- macOS ScreenCaptureKit 的使用 npm test
5. 屏幕录制权限设置

- 权限指南

• 平台兼容性
• \- 平台支持的功能
• 项目结构
• 做出贡献
• 欢迎投稿！请：

______________________________________________________________________

为仓库创建分支（或：克隆仓库）

创建一个特性分支 为更改编写测试 运行测试套件：

______________________________________________________________________

提交拉取请求

• 需要帮助的领域： Windows原生捕获实现
• Linux原生捕获实现 性能优化 额外的测试覆盖率
• 文档改进 许可证
• MIT 许可证 - 详见 许可证
• 文件中有详细信息。 致谢

______________________________________________________________________

建立在 模型上下文协议