辅助Cursor的开源神器 浏览器选中元素调用AI Composer

本文为您全面解析Stagewise——一款具有突破性的AI代码辅助工具，它让AI能够直接“看见”您的界面元素。通过浏览器工具栏与编辑器AI助手的无缝集成，您无需再繁琐地描述或截图，即可精准定位并修改网页上的任意元素。下面将详细介绍其核心功能、工作机制以及完整的安装与集成方法。

核心内容

• Stagewise工具栏：在浏览器中选择元素，直接与AI代码助手进行交互
• 基于Model Context Protocol (MCP)的上下文提供技术
• 安装与集成：VS Code扩展 + 项目中集成工具栏的详细步骤

为什么需要Stagewise？

使用过Cursor、Claude等AI开发工具的开发者都会发现，这些AI代码助手虽然大大提升了编码效率，但它们普遍存在一个瓶颈：无法直接“看到”您正在开发的前端界面，无法获取视觉上下文。过去，您需要反复尝试截图或使用复杂的DOM路径向AI解释“哪些元素需要修改”。而Stagewise的出现，将彻底改变这一工作流程。

Stagewise是什么？

Stagewise为AI代码助手提供了“眼睛”——一个浏览器工具栏，能够连接您的前端UI与代码编辑器中的AI助手。通过Stagewise，您只需在网页上选中要修改的元素，添加注释，即可让AI助手精确定位并执行修改，无需再复制粘贴DOM路径或费力描述界面元素的位置。

工作演示效果如下：

工作原理

Stagewise的核心技术基于Model Context Protocol (MCP)，这是一种由Anthropic开发的开放协议，用于标准化应用程序向大型语言模型(LLM)提供上下文信息的方式。

Stagewise构建了一条完整的技术链路：

1. 浏览器工具栏（@stagewise/toolbar）：注入到前端应用中，允许用户选择元素并添加备注
2. VS Code扩展：作为桥梁连接浏览器与AI代码助手
3. MCP服务器：向AI代码助手提供上下文数据（包括DOM结构、截图、元信息等）

开始使用

Stagewise的安装过程分为两个主要部分：

1. 安装扩展

在插件市场中安装 Stagewise 扩展，该扩展会自动部署Stagewise MCP服务器。如果使用Cursor，系统会提示您启用该服务器。当使用Cursor打开项目后，即可看到自动生成的MCP配置文件。

提示：安装扩展后，请务必确认MCP服务器已正常启动。在Cursor中，MCP配置会自动生成，无需手动添加。

2. 在项目中集成工具栏

AI引导方式

在Cursor中，按下 Ctrl+Shift+P，输入 setupToolbar，然后按回车执行命令。

手动安装

在终端中执行以下命令：

pnpm i -D @stagewise/toolbar

将工具栏注入到您的应用程序开发模式中：

// 1. Import the toolbar
import { initToolbar } from '@stagewise/toolbar';

// 2. Define your toolbar configuration
const stagewiseConfig = {
  plugins: [
    {
      name: 'example-plugin',
      description: 'Adds additional context for your components',
      shortInfoForPrompt: () => {
        return "Context information about the selected element";
      },
      mcp: null,
      actions: [
        {
          name: 'Example Action',
          description: 'Demonstrates a custom action',
          execute: () => {
            window.alert('This is a custom action!');
          },
        },
      ],
    },
  ],
};

// 3. Initialize the toolbar when your app starts
// Framework-agnostic approach - call this when your app initializes
function setupStagewise(){
  // Only initialize once and only in development mode
  if (process.env.NODE_ENV === 'development') {
    initToolbar(stagewiseConfig);
  }
}

// Call the setup function when appropriate for your framework
setupStagewise();

重要：请务必仅在开发模式下初始化工具栏（如上述代码中的NODE_ENV === 'development'检查），以免在生产环境中暴露调试工具。

支持的框架

Stagewise为多种主流前端框架提供了专用集成包：

• Recat：@stagewise/toolbar-react
• Next.js：@stagewise/toolbar-next
• Vue.js/Nuxt：@stagewise/toolbar-vue
• Svelte/SvelteKit：@stagewise/toolbar配合Svelte生命周期函数

目前Cursor已获得全面支持，Github Copilot及其他平台的适配正在开发中。

常见问题

Q1：安装后工具栏未在浏览器中显示，怎么办？

请检查以下几点：1）项目是否正确安装了@stagewise/toolbar依赖；2）代码中已成功调用initToolbar()；3）当前运行环境是否为开发模式（NODE_ENV === 'development'）。如果使用了React/Next等框架的专用包，请确保导入路径正确无误。

Q2：如何确认MCP服务器已成功连接？

在Cursor中，打开命令面板（Ctrl+Shift+P），搜索“Stagewise: Show Status”，查看状态面板是否显示“Connected”。如果显示未连接，可尝试重启VS Code或重新安装扩展。

Q3：能否同时支持多个AI代码助手？

目前仅官方完全支持Cursor。Github Copilot及其他平台（如Continue.dev）的支持仍在开发中，请留意Stagewise官方更新动态。

Q4：在Vue项目中使用时，工具栏初始化的最佳时机是什么？

建议在Vue应用的mounted生命周期钩子中调用initToolbar()，或确保DOM已可用时在created中调用。对于Nuxt，可将其放在plugins目录下的客户端插件中。

按照上述步骤操作，您即可让AI代码助手直接“看见”您的界面元素，显著提升前端开发中的交互效率。Stagewise的开源特性也使其未来有望支持更多编辑器与平台，值得持续关注。

你是一名 AI 行业编辑，请围绕下面这条热点输出一份资讯解读：
热点：辅助Cursor的开源神器 浏览器选中元素调用AI Composer要求：
1. 先用一句话解释这条热点在讲什么
2. 再总结它为什么重要
3. 说明会影响哪些 AI 产品或内容方向
4. 最后给出 3 个适合资讯站使用的标题