一款辅助Cursor的开源神器，直接在浏览器选中元素调用AI Composer！ - 链载Ai

今天翻看帖子的时候，看到一个超级NB的开源工具，一定要安利一波

用过Cursor，Claude等工具的都知道，这些AI代码助手极大提高了开发者的编码效率，但它们存在一个共同的局限性：

无法直接"看到"你正在开发的前端界面，无法获取视觉上下文。

以前，你需要不断的尝试用截图或繁琐的DOM路径向AI解释"要修改的是这个按钮"，但是今天的这个工具肯定会改变你的工作流程的

Stagewise

它为AI代码助手提供了"眼睛"——一个浏览器工具栏，能够连接你的前端UI和代码编辑器中的AI助手。

通过Stagewise，你只需在网页上选择要修改的元素，添加评论，即可让AI助手精确定位并进行修改，无需再复制粘贴DOM路径或艰难描述界面元素位置。

工作演示效果如下：

工作原理

Stagewise的核心技术基于Model Context Protocol (MCP)，这是一种由Anthropic开发的开放协议，用于标准化应用程序如何向大型语言模型(LLM)提供上下文。（相信大家也已经听腻了）

Stagewise建立了一个完整的技术链路：

1. 浏览器工具栏（@stagewise/toolbar）：注入到你的前端应用，允许选择元素并添加注释

2. VS Code扩展：作为桥梁连接浏览器和AI代码助手

3. MCP服务器：提供上下文信息（DOM结构、截图、元数据）给AI代码助手

开始使用

Stagewise的安装过程分为两部分：

1. 安装扩展

在插件处安装 Stagewise 拓展，该扩展会自动安装Stagewise MCP服务器

如果你使用Cursor，它会提示你启用该服务器

然后我用Cursor打开一个项目以后，可以看到这里已经出现了一个MCP配置文件

2. 在项目中集成工具栏

AI引导方式

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

手动安装

在终端输入下方的命令：

pnpmi-D@stagewise/toolbar

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

// 1. Import the toolbarimport{ initToolbar }from'@stagewise/toolbar';
// 2. Define your toolbar configurationconststagewiseConfig = {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 initializesfunctionsetupStagewise(){// Only initialize once and only in development modeif(process.env.NODE_ENV==='development') { initToolbar(stagewiseConfig); }}
// Call the setup function when appropriate for your frameworksetupStagewise();

支持的框架

Stagewise为多种流行的前端框架提供了专门的集成包：

•Recat：@stagewise/toolbar-react

•Next.js：@stagewise/toolbar-next

•Vue.js/Nuxt：@stagewise/toolbar-vue

•Svelte/SvelteKit：@stagewise/toolbar配合Svelte生命周期函数

目前Cursor已经完全支持了，Github Copilot和其他平台还在开发中