AI Annotator MCP 服务器实现

关键词

AI注释浏览器上下文实时通信插件开发元素标注

使用说明（Markdown 格式）

  • 项目简介

    • 该仓库实现了一个 MCP 服务器服务端，用于在 Claude 等 MCP 客户端环境中提供对浏览器端 AI 注释器的会话管理、工具执行和上下文信息获取等功能。实现包含两类传输路径：通过标准输入输出的 MCP CLI（stdio 传输）和基于 Socket.IO 的网页端会话传输（WebSocket/SSE 等也有支持）。核心目标是以统一的 MCP 协议格式向客户端暴露可执行的工具、资源和提示模版等能力。

  • 主要功能点

    • MCP 服务器核心：实现 MCP 服务端，注册并暴露多种工具，处理来自客户端的请求并返回 JSON-RPC 格式的响应。
    • 工具集成：如 annotator_list_sessions、annotator_get_page_context、annotator_select_feedback、annotator_capture_screenshot 等工具，支持跨浏览器会话的数据收集、页面上下文获取、元素选择等操作。
    • 浏览器会话桥接：通过 stdio 传输和 Socket.IO 传输，连接浏览器端注释器脚本，进行跨进程通讯。
    • 会话管理与无状态设计：实现会话注册、分发、以及会话选择逻辑，尽量保持无状态、多会话并发。
    • MCP 配置自动化：提供自动化 MCP 配置生成、合并与维护的能力，便于在项目中快速对接 Claude Code 等 MCP 客户端。

  • 安装步骤

      1. 将仓库作为插件集成到你的 Vite 项目中（插件会在开发服务器启动阶段启动一个 MCP 服务）。
      1. 配置运行服务器的端口、监听地址与公开地址等参数，通常默认端口为 7318。
      1. 根据需要选择传输方式：
      • stdio 模式（CLI 使用）：通过命令行启动 MCP 服务，支持与 Claude Code 的 MCP 客户端对接。
      • WebSocket/浏览器模式：将浏览器端的 annotator 脚本连接到 MCP 服务器，实现前端 UI 与后端工具的交互。
      1. 如需自动生成 MCP 配置，请启用自动设置 MCP 配置的选项，插件会按项目环境自动检测包管理器并输出相应的 MCP 配置片段。

  • 服务器配置（MCP 客户端所需，真实的启动命令由 MCP 客户端读取配置文件获得）

    配置信息的 JSON 结构用于 MCP 客户端读取以启动对接，不需要客户端手动编写，这里给出可参考的字段说明：

    • server name（服务器名称）
    • command（启动服务器的命令）
    • args（启动命令的参数数组）

    注：实际可用的命令和参数根据项目环境而定，插件在自动设置 MCP 配置时会依据包管理工具自动生成对应的启动命令与参数，例如：

    • 若使用 bunx 包管理器，命令为 bunx，参数为 ["vite-plugin-ai-annotator", "mcp", "-s", "<服务器地址>"]
    • 若使用 pnpm dlx，命令为 pnpm，参数为 ["dlx", "vite-plugin-ai-annotator", "mcp", "-s", "<服务器地址>"]
    • 若使用 npx，命令为 npx，参数为 ["vite-plugin-ai-annotator", "mcp", "-s", "<服务器地址>"] 以上仅为配置说明，实际启动地址通常为 http://<listenAddress>:<port>

  • 基本使用方法

    1. 启动 MCP 服务器（插件会暴露一个 MCP 端点，默认监听 7318 端口）。
    2. 在 Claude Code 等 MCP 客户端中将 ai-annotator 配置为 MCP 服务器，提供服务器的启动命令与参数（由客户端读取 JSON 配置，不需要客户端额外实现）。
    3. 客户端连接后，可以使用 annotator_list_sessions、annotator_get_page_context、annotator_select_feedback、annotator_capture_screenshot 等工具与浏览器端的 AI 注释器进行交互。
    4. 在浏览器端，使用 annotator-toolbar 与 MCP 服务器建立连接，并通过客户端请求触发页面上下文、元素捕获、文本选择等操作。

服务器信息

访问项目