关键词

浏览器上下文AI助手代码编辑器前端开发VS Code扩展

项目简介

stagewise 是一个由浏览器工具栏和 VS Code 扩展组成的工具，旨在为您的 AI 代码助手提供实时、来源于浏览器前端界面的上下文信息。它允许开发者直接在浏览器中选中页面元素、添加注释，并将这些丰富的上下文（包括 DOM 结构、样式、截图等）传递给代码编辑器中的 AI Agent，从而帮助 AI 更准确地理解用户的意图并进行代码修改。

主要功能点

  • 浏览器元素选中与注释: 在开发模式下，直接在浏览器中激活工具栏，选中页面上的任何元素并添加评论。
  • 实时上下文传递: 将选中的 DOM 元素、相关元数据（如 React 组件信息、样式等）以及屏幕截图发送到 VS Code 扩展。
  • MCP 服务器托管: VS Code 扩展内置并托管一个 MCP 服务器，接收来自工具栏的上下文信息，并向兼容 MCP 的 AI Agent（如 Cursor IDE）暴露这些信息和相关工具。
  • AI Agent 集成: AI Agent 可以通过 MCP 协议访问 stagewise 服务器提供的上下文，并调用服务器注册的工具（例如获取控制台日志）。
  • 框架无关性: 工具栏设计为可注入到任何前端项目中（React, Vue, Svelte 等均有示例）。

安装步骤

stagewise MCP 服务器是作为 stagewise VS Code 扩展的一部分提供的。用户无需单独安装服务器，只需安装 VS Code 扩展即可：

  1. 在 VS Code Marketplace 中搜索 'stagewise'。
  2. 安装名为 'stagewise' 的扩展。

安装扩展后，当您打开兼容的编辑器（目前主要指 Cursor IDE），扩展会自动启动内置的 MCP 服务器。

服务器配置

stagewise MCP 服务器由 VS Code 扩展自动安装、启动和管理。当您使用 Cursor IDE 时，扩展会尝试自动将自身注册为 MCP 服务器。

Cursor IDE 会通过一个 'mcp.json' 文件来发现和连接 MCP 服务器。stagewise 扩展会自动修改位于项目根目录或用户主目录下的 '.cursor/mcp.json' 文件，添加以下格式的配置条目：

  • 'server name': 'stagewise' (MCP 服务器的唯一名称)
  • 'command': 由 VS Code 扩展进程内部管理，用户无需关心具体命令。
  • 'args': 启动参数列表，通常为空或包含内部参数，用户无需手动设置。
  • 'url': 'http://localhost:端口号/sse' (服务器监听的地址和端口，端口号由扩展动态查找可用端口决定，默认从 5746 开始。通信协议目前主要使用 SSE)。

注意: 对于大多数用户来说，这个过程是自动完成的，无需手动编辑 'mcp.json' 文件。如果使用 Cursor IDE 并开启了 MCP 支持，系统会在服务器启动时提示您启用 stagewise 服务器。

基本使用方法

  1. 安装扩展: 按照上述步骤安装 stagewise VS Code 扩展。
  2. 注入工具栏: 在您的前端项目开发模式下，安装 '@stagewise/toolbar' npm 包，并按照示例（通常在应用的入口文件）初始化 'initToolbar'。您也可以在 Cursor IDE 中使用 'CMD + Shift + P' 并输入 'setupToolbar' 命令来尝试 AI 引导的自动注入。
  3. 启动项目: 运行您的前端应用项目，并在浏览器中打开它。同时确保您的 VS Code（Cursor IDE）是打开状态。
  4. 使用工具栏: 在浏览器中找到 stagewise 工具栏图标，点击激活。选中页面元素，输入评论，然后提交。
  5. 在编辑器中使用: 返回您的代码编辑器，AI Agent（如 Cursor）将接收到您在浏览器中提供的上下文信息。您现在可以向 Agent 提问或发出指令，Agent 将利用这些上下文信息来帮助您。Agent 也可以调用由 stagewise MCP 服务器暴露的工具。

信息

分类

开发者工具

访问项目