stagewise：让AI与代码编辑器无缝连接

作者：程序员成长指北

原文：mp.weixin.qq.com/s/oEdVbrDil...

前言

Stagewise 是一个旨在提高开发效率的工具，它允许 Cursor、GitHub Copilot 和 Windsurf 等工具与浏览器交互，支持对任何 DOM 元素进行注释，并将实际上下文发送给 Windsurf，提供了一种时间节省的方法，减少手动选择文件的需要，支持 React、Next.js、Vue 和 Nuxt.js 等框架。今日前端早读课文章由@飘飘分享。

在现代前端开发中，开发者常常需要在浏览器和代码编辑器之间来回切换，尤其是在调试和修改 UI 时。为了简化这一流程，提高开发效率，stagewise 应运而生。stagewise 是一个创新的浏览器工具栏插件，它将前端 UI 元素直接连接到你的 AI 代码助手，帮助开发者节省时间、减少重复操作。

🌟 什么是 stagewise？

stagewise 是一款集成在浏览器中的工具栏插件，旨在连接前端 UI 和 AI 代理（AI Agent）。通过这个工具，你可以：

在网页应用中选择任意元素
直接在页面上对该元素进行评论
让 AI 代理自动处理相关任务

stagewise 的核心理念是让 AI 更智能地理解你正在编辑的内容，从而提供更精准的帮助。相比传统的开发方式，它无需手动复制路径或反复粘贴信息，而是直接通过浏览器为 AI 提供实时上下文。

⚡ stagewise 的核心优势

1、开箱即用

安装后即可立即使用，无需复杂配置。

2、高度可定制

支持自定义配置文件，满足不同项目需求。

3、支持 MCP 服务器

可连接你自己的 MCP（Model Control Protocol）服务器，实现更强大的 AI 功能。

4、不影响包体积

工具完全独立于你的应用打包过程，不会增加应用体积。

5、丰富的功能支持

能够向 AI 代理发送 DOM 元素、截图和元数据。
支持直接在浏览器中对元素进行注释。
提供 React、Vue、Svelte 等框架的示例环境。

💡 如何安装和使用？

✅ 安装扩展

你可以从 Visual Studio Marketplace：marketplace.visualstudio.com/items?itemN... 安装 stagewise 扩展。

🔧 配置方式

自动安装（AI 引导）

在 Cursor 编辑器中，按下 CMD + Shift + P
输入 setupToolbar
执行命令后，工具栏会自动初始化

手动安装

css 复制代码

 pnpm i -D @stagewise/toolbar

然后在你的应用初始化代码中注入 stagewise：

javascript 复制代码

import { initToolbar } from '@stagewise/toolbar';

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!');
                    },
                },
             ],
         },
     ],
};

function setupStagewise(){
    if(process.env.NODE_ENV==='development'){
        initToolbar(stagewiseConfig);
    }
}

setupStagewise();

📦 支持主流前端框架

stagewise 提供了针对主流前端框架的专用组件，方便快速集成：

React.js

javascript 复制代码

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { StagewiseToolbar } from'@stagewise/toolbar-react';
import './index.css';

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

 document.addEventListener('DOMContentLoaded',()=>{
    const toolbarRoot = document.createElement('div');
    toolbarRoot.id ='stagewise-toolbar-root';
    document.body.appendChild(toolbarRoot);
    createRoot(toolbarRoot).render(
        <StrictMode>
            <StagewiseToolbar config={{
                plugins:[]// Add your custom plugins here
            }}/>
        </StrictMode>
    );
});

Next.js

javascript 复制代码

// src/app/layout.tsx
import { StagewiseToolbar } from '@stagewise/toolbar-next';

export default function RootLayout({
   children,
}: Readonly<{
    children: React.ReactNode;
}>){
    return(
        <html lang="en">
            <body>
                <StagewiseToolbar
                   config={{
                       plugins:[],// Add your custom plugins here
                   }}
                />
               {children}
             </body>
         </html>
    );
}

Vue.js / Nuxt.js

xml 复制代码

<!-- app.vue -->
<script setup lang="ts">
import { StagewiseToolbar, type ToolbarConfig } from '@stagewise/toolbar-vue';
const config: ToolbarConfig ={
    plugins:[],// Add your custom plugins here
};
</script>

<template>
    <NuxtRouteAnnouncer />
    <ClientOnly>
        <StagewiseToolbar :config="config"/>
    </ClientOnly>
    <NuxtWelcome />
</template>

SvelteKit

xml 复制代码

<!-- src/routes/+layout.svelte -->
<script lang="ts">
import { onMount } from 'svelte';
import { browser }from '$app/environment';
import { initToolbar, type ToolbarConfig } from '@stagewise/toolbar';

onMount(()=>{
    if(browser){
        const  stagewiseConfig: ToolbarConfig ={
           plugins:[
              // Add your Svelte-specific plugins or configurations here
           ],
         };
         initToolbar(stagewiseConfig);
     }
});
</script>

<slot />

🤖 支持的 AI Agents

Agent	是否支持
Cursor	✅
Windsurf	✅
GitHub Copilot	进行中
Cline	❌
BLACKBOXAI	❌
Console Ninja	❌
Continue.dev	❌
Amazon Q	❌
Cody	❌
Qodo	❌

GitHub 仓库：github.com/stagewise-i...

🎯 总结

stagewise 是一款正在改变前端开发流程的强大工具。它不仅提升了开发者与 AI 之间的互动效率，还通过灵活的架构支持多种前端框架和 AI 平台。无论你是个人开发者还是企业团队，都可以从中受益。

如果你希望提升开发效率、减少重复劳动，stagewise 绝对值得一试！现在就去安装体验吧！