用途:在 Next.js 应用中添加智能体 LLM 标签页,提供可搜索的 LLM 提供商卡片网格,并通过弹窗在选定提供商内选择具体模型。它是更广泛的 agent-settings 系列中的一个标签,所有标签共享同一个 AgentSettingsProvider 包装器。
主要能力:渲染 AgentLLMTab 组件,展示提供商卡片与模型选择弹窗;支持通过 labels 覆盖用户可见文案,通过 showConfigurationHeader 控制配置头显示。组件从 @iblai/iblai-js/web-containers/next 导入,相关导出包括 AGENT_LLM_TAB_LABELS、LLMTabLabels、LLMProviderDetails、LLMProvider、Provider。
使用方式:前置条件为已配置认证(/iblai-auth)、已配置 MCP 服务器与技能(.mcp.json 中的 @iblai/mcp)、路由已被 AgentSettingsProvider 包装,并向用户索取真实的 mentorId(智能体 UUID),不得自行编造。项目根目录需有 iblai.env,包含 PLATFORM、DOMAIN、TOKEN;缺失时提示下载模板:curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env。AgentLLMTab 唯一必填 prop 为 getLLMProviderDetails,用于将提供商名称映射为显示信息(logo URL、显示名称),由宿主应用提供。示例路由为 app/(app)/agents/[mentorId]/llm/page.tsx。可选通过 labels 自定义文案,如 header.title。可用 MCP 工具 get_component_info("AgentLLMTab") 与 get_component_info("AgentSettingsProvider") 查询组件信息。
验证与运行:完成前必须运行 /iblai-ops-test;pnpm build 需零错误,pnpm test 的 vitest 需通过;随后启动开发服务器 pnpm dev,并用 npx playwright screenshot http://localhost:3000/agents/<id>/llm /tmp/agent-llm.png 做触屏测试。
限制与注意事项:不要为 ibl.ai SDK 组件添加自定义样式、颜色或 CSS 覆盖,组件自带样式;除非用户明确要求,否则不要实现深色模式。构建自定义 UI 时遵循 ibl.ai 品牌:主色 #0058cc,渐变 linear-gradient(135deg, #00b0ef, #0058cc),按钮 bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white,字体为系统 sans-serif 栈,风格为 shadcn/ui new-york 变体。组件层级优先使用 ibl.ai SDK 组件,其次使用 shadcn/ui(npx shadcn@latest add <component>),存在等价组件时不要自写。遵循 BRAND.md。Redux store 必须包含 mentorReducer 与 mentorMiddleware;initializeDataLayer() 为 5 个参数(v1.2+);@reduxjs/toolkit 通过 next.config.ts 中的 webpack 别名去重;需安装 peer 依赖 sonner 与 @iblai/iblai-web-mentor(pnpm add sonner @iblai/iblai-web-mentor)。AgentSettingsProvider 必须在布局层级包装路由。iblai.env 不是 .env.local 的替代品,仅保存 DOMAIN、PLATFORM、TOKEN 三个简写变量,Next.js 运行时环境变量仍从 .env.local 读取。默认包管理器为 pnpm,未安装时回退 npm。