我要投稿

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

发布日期：2025-05-12 21:09:17 浏览次数： 2013

作者：二爷Hack

微信搜一搜，关注“二爷Hack”

今天翻看帖子的时候，看到一个超级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，然后按回车执行命令

手动安装

在终端输入下方的命令：

pnpm i -D @stagewise/toolbar

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

// 1. Import the toolbarimport { initToolbar } from '@stagewise/toolbar';
// 2. Define your toolbar configurationconst 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 initializesfunction 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 frameworksetupStagewise();