SuperAPI AI 工具集

iblai-vibe-agent-embed

智能体与模型

查看项目

更新于 10-16 03:37

技能介绍

用途:为 Next.js 应用添加智能体设置中的 Embed 标签页,提供嵌入配置界面,包含 CSS/JS 编辑器、自定义悬浮气泡样式、可见性控制、可分享链接与嵌入预览 iframe。它是 agent-settings 系列的一个标签页,所有标签页共用 AgentSettingsProvider 包装器。

前置条件:需先完成认证(/iblai-vibe-auth);需配置 MCP 服务器与技能(.mcp.json 中的 @iblai/mcp);路由需由 AgentSettingsProvider 包裹(参见 /iblai-vibe-agent-setting 第 2 步);需向用户询问真实的 mentorId(智能体 UUID),不可自行编造。

主要能力:AgentEmbedTab 组件有三个必填 props:urls(包含 dmUrl、axdUrl、mentorIframeUrl、authUrl)、CopyCodeBlock(带复制支持的代码片段渲染组件)、visibilityOptions(可见性下拉选项)。可选 props 包括 labels(覆盖用户可见文案)、ssoProviders、isSsoProvidersError、supportEmail。相关导出有 AGENT_EMBED_TAB_LABELS、EmbedTabLabels、EmbedUrlConfig、VisibilityOption、SsoProvider。均从 @iblai/iblai-js/web-containers/next 导入。

使用方式:先在项目根目录检查 iblai.env 是否包含 PLATFORM、DOMAIN、TOKEN 变量;若缺失可下载模板:curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env。然后在 app/(app)/agents/[mentorId]/embed/page.tsx 中挂载 AgentEmbedTab。可通过 MCP 工具 get_component_info("AgentEmbedTab") 和 get_component_info("AgentSettingsProvider") 查询组件信息。

验证:运行 /iblai-vibe-ops-test,要求 pnpm build 零错误、pnpm test(vitest)通过,并启动开发服务器进行触测:pnpm dev 与 npx playwright screenshot http://localhost:3000/agents/<id>/embed /tmp/agent-embed.png。

限制与注意事项:Redux store 必须包含 mentorReducer 与 mentorMiddleware;initializeDataLayer() 在 v1.2+ 需 5 个参数;@reduxjs/toolkit 通过 next.config.ts 的 webpack 别名去重;需安装 peer 依赖 sonner 与 @iblai/iblai-web-mentor(pnpm add sonner @iblai/iblai-web-mentor);AgentSettingsProvider 需在布局层级包裹路由。品牌规范参见 BRAND.md。其余环境细节请参考 docs/skill-setup.md。