搜索
  • 你有用Stagewise这款工具提高你的开发效率吗？
  • 发布于 2个月前
  • 465 热度
    0 评论
前言
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：https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension 安装 stagewise 扩展。
 配置方式
自动安装（AI 引导）
.在 Cursor 编辑器中，按下 CMD + Shift + P
.输入 setupToolbar
执行命令后，工具栏会自动初始化
手动安装
 pnpm i -D @stagewise/toolbar
然后在你的应用初始化代码中注入 stagewise：
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
// 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
// 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
<!-- 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
<!-- 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 仓库：https://github.com/stagewise-io/stagewise

总结
stagewise 是一款正在改变前端开发流程的强大工具。它不仅提升了开发者与 AI 之间的互动效率，还通过灵活的架构支持多种前端框架和 AI 平台。无论你是个人开发者还是企业团队，都可以从中受益。如果你希望提升开发效率、减少重复劳动，stagewise 绝对值得一试！现在就去安装体验吧！
用户评论
可能感兴趣的话题