使用指南
高级

用外部 Agent 开发工作台

用官方工作台模板,让 Claude Code、Codex 这类 Agent 在你电脑上写工作台,本地预览,打包后导入 Floatboat。

工作台可以直接在 Floatboat 里用对话做出来。如果你平时就用 Claude Code、Codex 写代码,也可以换个做法:拿官方模板在自己电脑上开发,做好后打包成一个文件,导入 Floatboat,再上架到市场。

这一页要用到终端。没用过终端也没关系,先看工作台,让 Floatboat 里的 Agent 帮你做就行。

准备

开始前先把这几样装好:

  • Node.js 22(22.16 或更新的 22.x 版本)和 pnpm 10.22。
  • Git,以及一个 GitHub 账号。
  • Claude Code 或 Codex,或者别的能在终端里干活的 Agent。

开发时想试调用模型、读日历这类 Floatboat 能力,再把 Floatboat 打开并登录。只做界面和本地数据,可以不开。

从模板开始

这三步做完,你就有了一个属于自己的工作台项目。

用模板建一个仓库

打开 floatboat-workbench-template,点 Use this template 建一个你自己的仓库,再克隆到电脑上。

安装依赖

在仓库目录里运行:

pnpm install --frozen-lockfile --ignore-scripts

这两个参数的意思是:严格按模板锁好的版本装,并且不运行依赖包自带的安装脚本。照着复制就好,不用改。

给工作台起名字

pnpm workbench:init -- --registry shop-inventory --name "网店库存" --description "记录进货和销量,提醒补货"

--registry 是注册名,也就是工作台在市场里的固定名字。一旦上架就改不了,所以现在就想好。它只能用小写字母、数字、- 和 _。

名称(--name)和简介(--description)可以用中文。

让 Agent 来写

模板里已经给 Agent 准备好了说明和技能。它会照着里面的规矩写代码,顺手把说明文档和清单文件也维护好。

  • Claude Code:在仓库目录里启动,输入 /floatboat-workbench,接着说你想做什么。
  • Codex:输入 $floatboat-workbench,接着说你想做什么。

比如开网店的可以说:“做一个网店库存工作台:能录入进货和每天的销量,库存低于 10 件时标红,每周一生成补货清单。”换成你自己的事也一样,老师可以做作业登记,自由职业者可以做报价和收款记录。

你的业务代码都在 app/ 目录里。工作台叫什么、是第几版、要用哪些 Floatboat 能力,写在 app/manifest.json 这份清单里,Agent 会跟着一起改。

在本地预览

写好一部分,就可以在浏览器里看看效果。依次运行:

pnpm workbench:check
pnpm test
pnpm dev

前两条做检查和测试,第三条启动预览。pnpm dev 会打出一个本机地址,用浏览器打开就能看到工作台。

之后你每保存一次代码,它会先检查改动,通过了才刷新页面。检查没通过时,页面保持上一个能用的版本,不会坏掉。

如果 Floatboat 开着并且已登录,pnpm dev 会自动连上它,调用模型、日历、自动化这些都能直接试。Floatboat 没开时,这些调用会返回“未连接”,其他部分照常能用。

要用的能力,先写进清单

工作台要用哪些 Floatboat 能力,写在清单的 capabilities 里,例如 llm、calendar、automation。

写了也不等于一定有权限:每次调用时,Floatboat 还会按当前登录的账号再检查一次。全部能力和用法见工作台技术说明。

打包并导入 Floatboat

做到满意了,把它打成一个文件,装进 Floatboat。

打包

pnpm run package

它会在 artifacts/ 目录里生成一个 .fbworkbench 文件。

留意命令是 pnpm run package,不是 pnpm pack。两个名字很像,但 pnpm pack 生成的文件 Floatboat 不认。

预览时存的测试数据,默认不会打进包里。

在 Floatboat 里导入

打开 Floatboat,点侧边栏的「我的」,切到「工作台」,点「导入工作台」,选刚才那个 .fbworkbench 文件。

Floatboat 的「我的」页,「工作台」标签下有「网店库存」和「顾客回访」两张卡片。编号 2 框出右上角的「导入工作台」按钮,它旁边是「从分享口令导入」和「创建工作台」;编号 1 框出「网店库存」卡片底部的商店图标,上架时点的就是它。

接下来 Floatboat 会装好依赖、构建,并给它单独新建一个空间,这一步要等一会儿。导入完成后,按提示把它要用的文件或服务连上。

上架到市场

导入的工作台和在 Floatboat 里做的一样,可以上架到工作台市场。免费上架谁都可以;想收费,要先加入创造者计划。

更新版本

想发一个新版本时:

  1. 在模板仓库里改好代码。
  2. 把 app/manifest.json 里的 version 往上加,比如从 1.0.0 改成 1.1.0。
  3. 在 changelog 里写上这次改了什么。
  4. 重新打包。

上架过的版本号不能再用,所以每次提交的版本号都要比之前的大。

遇到问题?

pnpm install 或构建报错。 先运行 node -v 看看版本。模板要的是 Node 22.x(22.16 起),23 或更高的版本不支持,换回 22 再试。

导入时 Floatboat 说文件不对。 确认选的是 pnpm run package 在 artifacts/ 里生成的 .fbworkbench 文件,而不是 pnpm pack 生成的那个。

工作台里调用模型提示未连接。 打开 Floatboat 并登录,再刷新预览页。如果同时开着好几个 Floatboat,按模板里 docs/platform.md 的说明,指定要连哪一个。

Agent 写的连接器调用跑不通。 常见原因是动作名猜错了。让 Agent 先运行 pnpm workbench:catalog,查到确切的动作名再写。

接下来

本页目录