本文为您全面解析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构建了一条完整的技术链路：
- 浏览器工具栏（@stagewise/toolbar）：注入到前端应用中，允许用户选择元素并添加备注
- VS Code扩展：作为桥梁连接浏览器与AI代码助手
- 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的开源特性也使其未来有望支持更多编辑器与平台，值得持续关注。