尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

bb 插件开发入门:如何用 Plugin SDK 从零构建第一个可用插件(8 步完整教程)

bb 插件开发入门:如何用 Plugin SDK 从零构建第一个可用插件(8 步完整教程) bb 插件开发入门如何用 Plugin SDK 从零构建第一个可用插件8 步完整教程【免费下载链接】bbThe agent IDE that builds itself项目地址: https://gitcode.com/gh_mirrors/bb14/bbbb 是一款The agent IDE that builds itself的 AI 智能体开发环境而bb 插件开发正是它最迷人的扩展方式用一个 TypeScript 包 Plugin SDKget-bb/plugin-sdk你就能给 bb 加上后台服务、HTTP/RPC 接口、CLI 子命令、侧边栏页面和设置页。本文是一份面向新手的 bb 插件开发完整教程——只需 8 步从零构建你的第一个可用插件 第 1 步理解 bb 插件是什么一个 bb 插件本质上是一个TypeScript 包它在 bb 服务器进程内运行可以包含两部分入口作用是否必须server.tsbb.server后端RPC、HTTP 路由、存储、事件、CLI 命令、后台服务✅ 核心app.tsxbb.app前端React UI 插槽、侧边栏页面、设置页可选插件拥有完整的信任权限能访问插件专属的 SQLite 数据库、密钥存储和日志。完整契约定义在 packages/plugin-sdk/src/backend-contract.ts 和 packages/plugin-sdk/src/app-contract.ts。第 2 步一条命令生成插件脚手架在装有 bb 的机器上运行bb plugin new mypluginbb plugin new会在当前目录生成./bb-plugin-myplugin——一个可以直接运行的 todo list 示例插件自带后端server.ts、侧边栏页面app.tsx、bb mypluginCLI 命令和一个 skill并自动装好 npm 依赖包括精确锁定版本的get-bb/plugin-sdk。脚手架源码见 packages/templates/src/plugin-scaffold.ts。第 3 步看懂插件清单 package.json清单就是package.json关键是bb字段bb.name/bb.description— 插件的展示名称与描述必填bb.branding.icon— 图标必填如icon: Zap或./assets/icon.svgbb.server/bb.app— 前后端入口engines.bb与engines.bbPluginSdk— 声明兼容的 bb 与最低 SDK 版本参考一个真实示例examples/plugins/thread-chat-demo/package.json。第 4 步编写后端入口 server.ts后端入口默认导出一个接收完整插件 API 的工厂函数import type { BbPluginApi } from get-bb/plugin-sdk; export default async function plugin(bb: BbPluginApi) { // 在这里注册 RPC、CLI 命令、存储、事件…… }SDK 提供的能力一览每个一行bb.rpc.register— 定义前后端数据通道配合defineRpcContract Zod 校验bb.cli.register— 注册一个bb name子命令人类和 Agent 都能调用bb.storage.kv/bb.storage.database()— 插件自己的 JSON 存储与 SQLite 数据库bb.realtime.publish— 向前端页面推送实时信号bb.http.route— 挂载 HTTP 路由bb.events.on— 监听线程创建/空闲/失败等事件bb.onDispose— 卸载时的清理钩子第 5 步构建前端页面 app.tsx前端入口通过definePluginApp注册 UI 插槽常用插槽包括navPanel自带侧边栏入口 路由、settingsSection设置页、threadPanelAction等。核心钩子useRpctypeof contract()— 类型安全地调用后端 RPCuseRealtime(事件名, 回调)— 监听后端实时推送保持列表常新UI 组件采用 shadcn 模式bb plugin new已预置components/ui/下的组件源码想加更多组件可运行npx shadcn add bb/name。样式使用 Tailwind且只用主题令牌如bg-background以自动适配主题。第 6 步本地安装与热重载开发bb plugin install . # 把当前目录注册为插件 bb plugin dev # 监听源码每次保存自动重建 重载bb plugin dev是编辑循环的灵魂它忽略dist/与node_modules/前端改动会热更新到已打开的页面无需刷新浏览器。第 7 步构建与测试构建bb plugin build将插件编译进dist/后端server.js、前端app.jsapp.css全程不依赖运行中的 bb 服务器。测试SDK 自带测试工具get-bb/plugin-sdk/testing提供createFakePluginHost后端与renderSlot前端可在无 bb 环境下做行为断言。用法与保真边界详见 packages/plugin-sdk/README.md。第 8 步发布、更新与维护市场安装支持git:仓库、npm:包、本地path:三种来源如bb plugin install git:github.com/acme/repomain市场目录用bb marketplace add source挂载自己的插件市场清单版本策略engines.bbPluginSdk声明最低 SDK 版本bb plugin outdated/bb plugin update管理兼容更新Fork 内置插件想魔改 bb 自带插件查看 docs/forkable-plugins.md 了解Forkable规则进阶学习资源资源路径插件命令与编写完整参考packages/templates/src/templates/bb-guide-plugins.md脚手架实现源码packages/templates/src/plugin-scaffold.ts官方参考插件slack-bot、composer 定制等examples/plugins/内置插件示例tasks、memory、docsplugins/插件 API 完整类型声明packages/plugin-sdk/提示脚手架里的 todo list 插件是活教材——删掉你不需要的部分从它开始改造比从零手写快 10 倍。现在打开终端输入bb plugin new你的第一个 bb 插件 5 分钟就能跑起来【免费下载链接】bbThe agent IDE that builds itself项目地址: https://gitcode.com/gh_mirrors/bb14/bb创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表