svelte-grab MCP 服务端

关键词

模型上下文Claude CodeHTTP APIStreamableHTTPJSON-RPC

使用说明（简要、易操作）

  • 项目简介

    • 这是一个 MCP 服务器实现，能够接收来自浏览器端 svelte-grab 的上下文数据，通过 MCP 协议向支持的代理提供工具接口，并可通过两种传输模式与代理通信：HTTP（StreamableHTTP/JSON-RPC）和 STDIO（直接通过标准输入输出）。
    • 服务器还提供健康检查接口、上下文接收端点、以及 MCP 工具集合，方便代理读取最近抓取的上下文、历史记录及分析结果。

  • 主要功能点

    • HTTP MCP 端口：提供健康检查、接收浏览器上下文的 /health、/context，以及 MCP 协议端点 /mcp。
    • MCP 工具：get_element_context、undo_last_action、get_session_history、get_a11y_report、get_style_context、get_error_context、get_profiler_report、list_available_tools 等，可供 MCP 客户端查询与执行。
    • 可选传输模式：StreamableHTTP（HTTP 传输用于 MCP 客户端），或 Stdio（直接与 Claude Code 之类的代理通过 stdio 集成）。
    • 会话与上下文管理：存储最近的浏览器抓取上下文、分工具上下文缓存、会话历史等。
    • 兼容性与扩展性：设计上允许通过 MCP Server 实例自定义工具、扩展能力。

  • 安装步骤

    • 克隆并安装依赖：在项目根目录执行安装命令，确保 Node.js 环境就绪。
    • 构建与启动 MCP 服务器：
      • 通过命令行启动（HTTP 模式）：
        • 启动 MCP 服务器（HTTP 传输）: npx svelte-grab mcp --port=4723
      • 通过命令行启动（STDIO 模式，直接与 Claude Code 集成）:
        • 启动 MCP 服务器（stdio 传输）: npx svelte-grab mcp --stdio
      • 也可使用独立二进制 mcp 直接启动（端口可选）:
        • npx svelte-grab-mcp --port 4723
        • 或 npx svelte-grab-mcp --stdio
    • 运行时注意事项：
      • HTTP 模式需要开放端口，确保防火墙允许访问 http://localhost:4723/mcp
      • STDIO 模式适用于直接与 Claude Code 等代理集成，使用相应的启动方式即可
    • Claude Code 集成示例（HTTP/http-transport 不需要客户端代码，仅在 Claude 配置中指定服务器即可）

  • 服务器配置（MCP 客户端需要的最小信息） 说明：以下配置用于 MCP 客户端连接本 MCP 服务器。服务器名称与启动方式需要按实际运行模式选择（HTTP/stdio）。以下示例采用 STDIO 模式，若使用 HTTP，请将相应字段调整为 HTTP 配置。 { "serverName": "svelte-grab", "startCommand": "npx", "startArgs": ["svelte-grab-mcp", "--stdio"] }

  • 基本使用方法

    • 浏览器侧：在 Svelte 应用中启用 SvelteGrab 组件并开启 MCP 支持，当浏览器抓取上下文时，若开启了 MCP，抓取的上下文将自动发送到 MCP 服务端。
    • MCP 客户端侧：连接到上述 MCP 服务器，调用工具如 get_element_context、get_session_history、get_a11y_report 等获取对应数据，或者通过 get_element_context 直接将最近抓取的上下文用于代理生成代码建议。
    • 运行后若要切换传输模式，请按需使用 HTTP 端口（4723）或 STDIO 模式（直接标准输入输出）。

服务器信息

访问项目