mcpField
I
InBrowserMCP Project

InBrowserMCP Project

本地服务
github.com/LofiSu开发工具178 周前更新

关于 InBrowserMCP Project

InBrowserMCP Project 通过 Chrome 扩展连接 AI 模型与浏览器,配有 React 前端和 Node.js MCP 服务端,适用于需要在界面与扩展间传递浏览器操作及结果的项目。

主要功能

  1. 01用于命令和浏览器状态的 React 界面
  2. 02Node.js MCP 服务端
  3. 03通过 WebSocket 连接的 Chrome 扩展
  4. 04浏览器导航、点击和输入
  5. 05通过 SSE 返回页面结果

适用场景

  1. 01从前端发送浏览器命令
  2. 02浏览网页并操作页面控件
  3. 03通过扩展获取页面内容

MCP 相关

MCP 服务端将命令转换为 MCP 工具调用,并通过 WebSocket 将浏览器操作转发给 Chrome 扩展。扩展将操作结果返回服务端,再由服务端通过 SSE 向前端发送更新。

配置

本地服务的配置在各客户端中通用,复制后粘贴到客户端的 MCP 配置文件即可。

暂未收录安装方式

我们还没有获取到这个服务的安装包或远程地址,请按项目 README 中的说明安装。

代码仓库

工具

还没有获取到工具列表

本地服务需要在你的电脑上运行后才能读取工具,维护者暂未提供工具列表。

详细介绍

InBrowserMCP 项目

此项目实现了一个基于 Model Context Protocol(MCP)的系统,可让 AI 模型通过浏览器扩展与 Web 浏览器交互。

概述

该项目由三个主要部分组成:

  1. 前端(frontend/):一个基于 React 的 Web 应用,为用户提供与 AI 交互和查看浏览器状态的界面,并与 MCP 服务通信。
  2. MCP 服务(mcp-server/):一个实现 MCP 规范的 Node.js 后端服务,负责协调前端、AI 模型(隐式)和浏览器扩展之间的通信。
  3. 浏览器扩展(extension/):一个 Chrome 扩展,通过 WebSocket 连接到 MCP 服务,并根据从服务收到的指令执行浏览器操作(例如导航、点击、输入和获取内容)。

架构

+-----------------+      +-----------------+      +---------------------+
| Frontend (React)| <--> | MCP Server (Node)| <--> | Browser Extension   |
| (localhost:5173)|      | (localhost:3000) |      | (via WebSocket 8081)|
+-----------------+      +-----------------+      +---------------------+
       |                      ^
       | User Interaction       | AI Model Interaction (Conceptual)
       v                      |
+-----------------+      +-----------------+
| User's Browser  |      | AI Model        |
+-----------------+      +-----------------+
  • 前端将用户命令(或 AI 指令)发送给 MCP 服务。
  • MCP 服务会解析这些命令,可能与 AI 模型交互(此处未明确实现,但假定存在),并将操作转换为 MCP 工具调用。
  • MCP 服务通过 WebSocket 向 浏览器扩展发送浏览器操作指令。
  • 浏览器扩展在用户的浏览器中执行这些操作(例如导航、点击、抓取内容)。
  • 浏览器扩展将结果(例如页面快照或命令执行结果)发送回 MCP 服务。
  • MCP 服务处理结果,并通过服务器发送事件(SSE)将更新或最终响应流式传回 前端。

快速开始

请按照各组件对应的 README 文件中的说明操作:

常规工作流
  1. 启动 MCP 服务(cd mcp-server && pnpm dev)。
  2. 在 Chrome 中加载浏览器扩展(chrome://extensions/)。
  3. 启动前端(cd frontend && pnpm dev)。
  4. 在浏览器中打开前端应用(通常为 http://localhost:5173)。
  5. 前端会与服务建立 MCP 会话,并由服务连接到扩展。
  6. 使用前端发送命令,通过扩展控制浏览器。

贡献

(如适用,请添加贡献指南)

许可证

(请注明项目许可证,例如 MIT)

评论

支持 Markdown

第一次接触 MCP?

从协议是什么,到在客户端里装上第一个服务,这几条回答覆盖了大多数入门问题。

一个开放协议,规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话,MCP 服务负责提供工具、资源和提示模板,两者通过标准消息通信,同一个服务可以被不同客户端复用。