# @21st-extension/toolbar 中文文档

规范地址：https://npmcn.com/package/%4021st-extension/toolbar/

版本：0\.5\.14
npm 元数据更新时间：2025-07-07T14:17:23.814Z
中文译文更新时间：2026-11-05T22:21:30.457Z
软件包许可：AGPL-3\.0-only

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%4021st-extension/toolbar
原文对照：https://npmcn.com/package/%4021st-extension/toolbar/?lang=original
项目主页：https://21st.dev/
源码仓库：https://github.com/21st-dev/21st-extension

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3.6 MB，18 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2025-06-26T13:03:16.008Z
- 最新版本发布：2025-07-07T14:17:23.610Z
- 近 30 天下载量：12803（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

21st.dev 工具栏 SDK用于AI Agent 交互.

## 安装

```sh
npm install @21st-extension/toolbar
```

也可以使用：`pnpm add @21st-extension/toolbar`、`yarn add @21st-extension/toolbar`、`bun add @21st-extension/toolbar`

## README

# ![21st.dev logo](https://21st.dev/brand/21st-logo-dark.png) 第21个.dev 工具栏

# 视觉氛围编码. 就在你的密码库里.

[![VS Code Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/stagewise.stagewise-vscode-extension?label=VS%20Code%20Marketplace)](https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension) [![GitHub Repo stars](https://img.shields.io/github/stars/stagewise-io/stagewise)](https://github.com/stagewise-io/stagewise) [![Join us on Discord](https://img.shields.io/discord/1229378372141056010?label=Discord&logo=discord&logoColor=white)](https://discord.gg/gkdGsDYaKA)

![stagewise demo](https://cdn.21st.dev/gif-cline-extesion.gif)

## 关于项目

**playwise 是一个浏览器工具栏,将您的前端 UI 连接到您的代码编辑器中的代码 AI 代理.**

-   QQ 选择网络应用程序中的任何元素
-   请留言
-   让你的人工智能特工做魔法

> 对厌倦将文件夹路径粘贴成提示的 devs来说是完美的. 阶段性地给出您的 AI 实时、 浏览器驱动的上下文 .

## \* 特性

由AI代理编辑前端代码:

-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}没有用
-   QQ 用插件自定义和扩展功能
-   将 DOM 元素和更多元数据发送给您的 AI 代理
-   🧪 举出一些例子来说明React, Vue, Svelte 等
-   QQ 从21st.dev 库搜索并整合 UI 组件
-   QQ 在智能辅助下检测运行时间出错
-   使用魔法聊天的 AI 驱动组件生成

## 地方发展

对于本地开发,请使用您的 API 服务器编辑 `TWENTY_FIRST_URL` 常数在 `toolbar/core/src/constants.ts`数字 :

```typescript
// For local development
export const TWENTY_FIRST_URL = 'http://localhost:3000';

// For production (default)
export const TWENTY_FIRST_URL = 'https://21st.dev';
```

## QQ 快速启动

### 1\. 国家 **安装代码编辑器扩展名( Cursor, Windsurf, VS 代码, Trae IDE, Kilo 代码)**

在此安装扩展名 : [https://marketplace.visiterstudio.com/items? itemName=相机.相机-vscode-extension 相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机-相机](https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension)

### 2\. 国家 **安装并注入工具栏**

> \[TIP\] 🪄 **自动安装工具栏(AI-guided):**
> 
> 1.  在光标中,按 `CMD + Shift + P`
> 2.  输入 `setupToolbar`
> 3.  执行命令和工具栏将自动输入QQ

或者按照手动方式:

安装 [@ 21st- extension/ 工具栏](https://www.npmjs.com/package/@21st-extension/toolbar)数字 :

```bash
pnpm i -D @21st-extension/toolbar
```

将工具栏注入您的应用程序 dev-mode :

```ts
// 1. Import the toolbar
import { initToolbar } from '@21st-extension/toolbar';

// 2. Define your toolbar configuration
const stagewiseConfig = {
  plugins: [],
};

// 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();
```

> 工具栏将 **自动连接** 到扩展站!

> \[大 🚫 **如果发送提示时无结果 :**
> 
> 如果您打开了多个光标窗口,工具栏可能会向错误的窗口发送提示,使其显得好像"没有发送提示". 为确保可靠运作:
> 
> -   使用相机时只打开一个光标窗口
> 
> 解决这件事的快到了!

### 具体框架的一体化实例

为了便于整合,我们提供了带有专用工具箱组件(例如:, `<TwentyFirstToolbar>`) (中文(简体) ). 您通常可以导入这些 `@21st-extension/toolbar-[framework-name]`。 。 。 .

反应.js

我们提供 `@21st-extension/toolbar-react` 用于 React 工程的软件包。 初始化您主条目文件中的工具栏( 例如 ), `src/main.tsx`),通过为它创建单独的反应根. 这样可以保证不会干扰你的主要应用树.

```tsx
// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { TwentyFirstToolbar } from '@21st-extension/toolbar-react';
import './index.css';

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

// Initialize toolbar separately
const toolbarConfig = {
  plugins: [], // Add your custom plugins here
};

document.addEventListener('DOMContentLoaded', () => {
  const toolbarRoot = document.createElement('div');
  toolbarRoot.id = 'stagewise-toolbar-root'; // Ensure a unique ID
  document.body.appendChild(toolbarRoot);

  createRoot(toolbarRoot).render(
    <StrictMode>
      <TwentyFirstToolbar config={toolbarConfig} />
    </StrictMode>
  );
});
```
下一个.js

使用 `@21st-extension/toolbar-next` next.js 应用程序的软件包。 包含 `<TwentyFirstToolbar>` 根布局文件中的组件(`src/app/layout.tsx`) (中文(简体) ).

```tsx
// src/app/layout.tsx
import { TwentyFirstToolbar } from '@21st-extension/toolbar-next';

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

对于 Nuxt.js 工程,您可以使用 `@21st-extension/toolbar-vue` 软件包。 设置 `<TwentyFirstToolbar>` 组件 `app.vue` 或相关的布局文件.

```vue
// app.vue
<script setup lang="ts">
import { TwentyFirstToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <ClientOnly>
      <TwentyFirstToolbar :config="config" />
    </ClientOnly>
    <NuxtWelcome />
  </div>
</template>
```
Vue.js (英语)

使用 `@21st-extension/toolbar-vue` vue.js 项目的软件包。 添加 `<TwentyFirstToolbar>` 组件到您的主要 App 组件(例如, `App.vue`) (中文(简体) ).

```vue
// src/App.vue
<script setup lang="ts">
import { TwentyFirstToolbar, type ToolbarConfig } from '@21st-extension/toolbar-vue';

const config: ToolbarConfig = {
  plugins: [], // Add your custom plugins here
};
</script>

<template>
  <TwentyFirstToolbar :config="config" />
  <div>
    <!-- Your app content -->
  </div>
</template>
```
斯维尔特基特

对于SvelteKit, 您可以使用工具栏集成 `@21st-extension/toolbar` 和斯维尔特的生命周期功能,或寻找一个专用 `@21st-extension/toolbar-svelte` 软件包。 创建一个组件,有条件地使/初始化客户端的工具栏(例如, `src/lib/components/TwentyFirstToolbarLoader.svelte` 或直接输入 `src/routes/+layout.svelte`) (中文(简体) ).

**使用 `onMount` 内 `+layout.svelte` (与 `@21st-extension/toolbar`:**

```svelte
<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';
  import { browser } from '$app/environment';
  import { initToolbar, type ToolbarConfig } from '@21st-extension/toolbar'; // Adjust path if needed

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

<slot />
```

**使用加载器组件(从仓库中取出的例子):** 实例存储器使用 `ToolbarLoader.svelte` 关闭 `ToolbarWrapper.svelte`。 。 。 . `ToolbarWrapper.svelte` 然后会打电话 `initToolbar` 从 `@21st-extension/toolbar`。 。 。 .

```svelte
<!-- examples/svelte-kit-example/src/lib/components/stagewise/ToolbarLoader.svelte -->
<script lang="ts">
import type { ToolbarConfig } from '@21st-extension/toolbar';
// ToolbarWrapper.svelte is a custom component that would call initToolbar
import ToolbarWrapper from './ToolbarWrapper.svelte'; 
import { browser } from '$app/environment';

const stagewiseConfig: ToolbarConfig = {
  plugins: [
    // ... your svelte plugin config
  ],
};
</script>

{#if browser}
  <ToolbarWrapper config={stagewiseConfig} />
{/if}
```

然后,你会使用 `TwentyFirstToolbarLoader` 在你身边 `src/routes/+layout.svelte`。 。 。 .

## 代理支持

| **探员** | **支助** |
| --- | --- |
| 光标 | ✅ |
| GitHub 副驾驶 | ✅ |
| 风起浪起 | ✅ |
| 线 | ✅ |
| Roo 代码 | ✅ |
| 拖车 IDE | ✅ |
| Kilo 代码 | ✅ |
| 克劳德代码 | QQ( 通过复制提示) |
| 双子座CLI | QQ( 通过复制提示) |
| 任何AI探员 | QQ( 通过复制提示) |

## \* 路线图

看看我们 [项目路线图](https://npmcn.com/package/%4021st-extension/toolbar/.github/ROADMAP.md) 用于当前特性、错误修正和进度.

## 许可证

由tiq UG(haftungsbeschränkt)开发,并在AGPLv3许可证下提供.

关于许可证模式的更多信息,请访问 [关于 GNU 许可证的 FAQ](https://www.gnu.org/licenses/gpl-faq.html)。 。 。 .

对于AGPLv3许可范围以外的使用情况,请自觉: [联系我们](https://npmcn.com/package/%4021st-extension/toolbar/#readme-contact-us-section)。 。 。 .

## 捐款

我们才刚开始 爱的捐献! 看看我们 [捐款额](https://github.com/stagewise-io/stagewise/blob/main/CONTRIBUTING.md) 指导参与。 对于虫子和新想法,请 [打开一个问题!](https://github.com/stagewise-io/stagewise/issues)

## 社区和支持

-   👾 [加入我们的Discord](https://discord.gg/gkdGsDYaKA)
-   打开一个 [gitHub 上的问题](https://github.com/stagewise-io/stagewise/issues) 为 dev 支持.

## 联系我们

有问题或想给商业或企业使用许可吗?

📧 **[销售量](mailto:sales@stagewise.io)**

## 常见问题

### @21st-extension/toolbar 是什么？

21st\.dev 工具栏 SDK用于AI Agent 交互\.

### 如何安装 @21st-extension/toolbar？

在项目目录运行 npm install @21st-extension/toolbar，或使用 pnpm add / yarn add / bun add。

### @21st-extension/toolbar 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @21st-extension/toolbar 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @21st-extension/toolbar 可以商用吗？

@21st-extension/toolbar 使用 AGPL-3\.0-only 许可。最严格的 Copyleft：除分发外，通过网络向用户提供基于它的服务也需要开源对应源码。闭源 SaaS 使用前务必评估。以上为概括，不构成法律意见，请以许可原文为准。

### @21st-extension/toolbar 的下载量有多少？

根据 npm 官方下载统计，@21st-extension/toolbar 在 2026/10/05 – 2026/11/03 这 30 天内被下载 12,803 次，日均约 427 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @21st-extension/toolbar 还在维护吗？

最新版本 0\.5\.14 发布于 2025/07/07（1\.3 年前）；至今共发布 14 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/06/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。