Superflows开发者仪表盘使用教程:Playground、Actions与开发者模式实战

Superflows开发者仪表盘使用教程:Playground、Actions与开发者模式实战 Superflows开发者仪表盘使用教程Playground、Actions与开发者模式实战【免费下载链接】superflowsOpen-source toolkit to build an AI copilot for SaaS products项目地址: https://gitcode.com/gh_mirrors/su/superflowsSuperflows 是一款开源的 SaaS 产品 AI Copilot 工具包让软件用户能用自然语言提问AI 助手自动调用产品 API 完成查询与任务。它的开发者仪表盘集成了 Playground 测试区、Actions 接口管理和开发者模式三大核心功能帮助你在 AI 助手上线前完成配置、调试与评估。认识Superflows开发者仪表盘Superflows 解决的是这样一个问题当 CRM 用户问我们跟出版行业关过单吗涉及哪些人时AI 助手能自动调用后端 API 查到答案甚至写代码分析数据、画图表。登录仪表盘后顶部导航栏实现见 components/navbar.tsx提供了 7 个功能入口导航项作用Playground测试你的 AI 助手如何响应用户问题Actions管理 AI 可以调用的 API 接口AI配置模型与 AI 行为参数Project项目级设置Transcripts查看历史对话记录Usage用量统计Chat to Docs接入静态文档问答RAG右上角还有一个Setup checklist进度环按 4 步引导你完成上传 API 规范 → 连接 API → 使用 Playground → 集成到产品。Playground上线前测试AI助手的最佳场地Playground 是仪表盘首页pages/index.tsx页面说明写得很直白这里用于在生产环境部署前测试你的 AI 助手。尝试你用户会问的那些问题看看它的反应。主区域就是聊天窗口输入问题后可以看到 AI 助手的完整回答包括它规划、调用接口、生成代码分析的全过程。窗口顶部有历史对话建议方便复用你测试过的典型问题。右侧边栏components/playground.tsx提供 3 个关键配置1. Mock API Responses不连真实API也能跑通开启后Superflows 会用 GPT 模拟生成 API 响应——在还没有自己的后端 API 时就能完整体验 AI 助手的规划与回答流程。这对新手非常友好可以先跑通整个链路再对接真实服务。2. User description告诉AI用户是谁每次 API 请求都可以附带一段用户描述提问者的身份、访问 API 需要的信息如用户 ID、以及回答的语气要求。例如Bill 是 Acme Corp 的销售他的项目 ID 是 f35ahe2g1p。他对统计术语不熟请用通俗英语回答他的问题。3. API Key安全传入鉴权信息如果你的 API 需要鉴权可以在这里填入 API Key它会通过 Authorization 头传递。官方承诺这个 Key 只保存在浏览器本地永远不会写入数据库。开发者模式透视AI助手的思考过程在聊天窗口左上角components/playgroundChatbot.tsx 第 65 行有一个Developer mode开关。普通模式下用户只看到最终答案打开开发者模式后你会看到 AI 助手背后的完整思考过程它如何拆解问题、规划了哪些步骤、调用了哪些接口、生成了什么分析代码。这是排查为什么答案不对最直接的调试手段。同样的开关还出现在另外两个场景方便你在不同环节做调试答案审核页components/approval/verifyAnswerScreen.tsx审核离线生成的答案时查看生成过程Transcripts 记录页pages/analytics/index.tsx回看历史对话的完整推理链路Actions管理AI助手可调用的接口Actions 页面pages/actions.tsx是开发者仪表盘的控制中枢AI 能做什么完全由这里的配置决定。上传OpenAPI规范一键导入接口最快的方式点击右上角Upload按钮上传一份 OpenAPISwagger规范文件所有接口会自动解析成一个个 Action 卡片。没有规范文件也可以点 Add them manually 手动逐个录入。分组与批量启停精细控制接口权限每个 Action 卡片显示 HTTP 方法、路径、名称和描述点击即可激活/停用。Actions 页面components/actions/actionsSection.tsx还提供了一批实用控制分组管理用 Add group 创建接口组整组勾选 Active 统一启停Set active by HTTP method按 GET / POST 等方法批量开关比如只允许查询、禁止写入Show inactive显示已停用的 Action方便随时找回多 API 切换一个项目可接入多个 API顶部 Tab 自由切换查看系统提示词与Token预警右上角的 ... 菜单里有View system prompt可以直接查看 AI 助手收到的完整系统提示词——理解它为什么这么回答的钥匙。页面底部还有两条贴心提示激活的 Action 超过 20 个时会警告性能可能下降若提示词总长度超出模型上限GPT-3.5 为 4096 token会弹出红色错误条点击即可查看提示词、按需禁用部分 Action。集成与本地运行测试满意后Superflows 提供开箱即用的 React 组件1 行代码就能把 AI 助手以弹窗形式嵌入你的产品想本地开发 Superflows 本身按 README.md 的说明克隆仓库、安装依赖并启动本地 Supabase 即可git clone https://gitcode.com/gh_mirrors/su/superflows cd superflows npm i npx supabase start make run小结从测试到上线的完整路径 步骤在哪个页面做什么① 配置Actions上传 OpenAPI 规范分组管理、启停接口② 测试Playground开 Mock 模式跑通链路填用户描述与 API Key③ 调试开发者模式透视思考过程定位问题④ 集成产品前端用 React 组件 1 行代码嵌入Superflows 开发者仪表盘把配置 → 测试 → 调试三个环节浓缩在同一个界面里让你不用写一行胶水代码就能为 SaaS 产品装上一个可靠的 AI 助手。输出文章【免费下载链接】superflowsOpen-source toolkit to build an AI copilot for SaaS products项目地址: https://gitcode.com/gh_mirrors/su/superflows创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考