Back to Details

iblai-account

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/iblai-account

/iblai-account

Add an account/organization settings page with tabs for Organization info, User Management, Integrations, Advanced settings, and Billing.
Account Page
AI Assistant: Do NOT add custom styles, colors, or CSS overrides to ibl.ai SDK components. They ship with their own styling. Keep the components as-is. Do NOT implement dark mode unless the user explicitly asks for it.
When building custom UI around SDK components, use the ibl.ai brand:
  • Primary: 
    #0058cc
    , Gradient: 
    linear-gradient(135deg, #00b0ef, #0058cc)
  • Button: 
    bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white
  • Font: System sans-serif stack, Style: shadcn/ui new-york variant
  • Use shadcn components for custom UI -- they share the same Tailwind theme and render in ibl.ai brand colors automatically.
You MUST run 
/iblai-test
before telling the user the work is ready.
After all work is complete, start a dev server (
pnpm dev
) so the user can see the result at http://localhost:3000.
iblai.env
is NOT a 
.env.local
replacement — it only holds the 3 shorthand variables (
DOMAIN
, 
PLATFORM
, 
TOKEN
). Next.js still reads its runtime env vars from 
.env.local
.
Use 
pnpm
as the default package manager. Fall back to 
npm
if pnpm is not installed. The generated app should live in the current directory, not in a subdirectory.
添加包含组织信息、用户管理、集成、高级设置和账单选项卡的账户/组织设置页面。
账户页面
AI助手提示： 请勿为ibl.ai SDK组件添加自定义样式、颜色或CSS覆盖，它们自带样式，请保持组件原有状态。除非用户明确要求，否则不要实现dark mode。
围绕SDK组件构建自定义UI时，请使用ibl.ai品牌规范：
  • 主色: 
    #0058cc
    , 渐变: 
    linear-gradient(135deg, #00b0ef, #0058cc)
  • 按钮: 
    bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white
  • 字体: 系统无衬线字体栈, 样式: shadcn/ui new-york 变体
  • 自定义UI请使用shadcn组件——它们共用同一套Tailwind主题，会自动适配ibl.ai品牌色渲染。
告知用户工作已完成前，你必须先运行
/iblai-test
。
所有工作完成后，启动开发服务器(
pnpm dev
)，用户即可在http://localhost:3000查看结果。
iblai.env
不是
.env.local
的替代品——它仅存储3个简写变量(
DOMAIN
、
PLATFORM
、
TOKEN
)，Next.js仍然从
.env.local
读取运行时环境变量。
默认使用
pnpm
作为包管理器，如果未安装pnpm则回退到
npm
。生成的应用应放在当前目录下，不要放在子目录中。

Prerequisites

前置要求

  • Auth must be set up first (
    /iblai-auth
    )
  • MCP and skills must be set up: 
    iblai add mcp
  • 必须先完成Auth配置(
    /iblai-auth
    )
  • 必须完成MCP和skills配置：
    iblai add mcp

Step 0: Check for CLI Updates

步骤0：检查CLI更新

Before running any 
iblai
command, ensure the CLI is up to date. Run 
iblai --version
to check the current version, then upgrade directly:
  • pip: 
    pip install --upgrade iblai-app-cli
  • npm: 
    npm install -g @iblai/cli@latest
This is safe to run even if already at the latest version.
运行任何
iblai
命令前，请确保CLI为最新版本。运行
iblai --version
查看当前版本，然后直接升级：
  • pip: 
    pip install --upgrade iblai-app-cli
  • npm: 
    npm install -g @iblai/cli@latest
即使已经是最新版本，运行该命令也不会有问题。

Step 1: Check Environment

步骤1：检查环境

Before proceeding, check for a 
iblai.env
in the project root. Look for 
PLATFORM
, 
DOMAIN
, and 
TOKEN
variables. If the file does not exist or is missing these variables, tell the user: "You need an 
iblai.env
with your platform configuration. Download the template and fill in your values: 
curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env
"
继续操作前，请检查项目根目录下是否存在
iblai.env
文件，确认里面包含
PLATFORM
、
DOMAIN
和
TOKEN
变量。如果文件不存在或缺少这些变量，请告知用户： "你需要一个包含平台配置的
iblai.env
文件。下载模板并填写对应值： 
curl -o iblai.env https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/iblai.env
"

Step 2: Run the Generator

步骤2：运行生成器

bash
iblai add account
bash
iblai add account

What Was Generated

生成的内容

FilePurpose
app/(app)/account/page.tsx
Account/organization settings page with tabs
The page reads 
userData
, 
tenant
/
current_tenant
, and 
tenants
from localStorage. Admin status is derived from the 
tenants
array.
Note: The 
Account
component uses 
next/image
internally -- it is imported from 
@iblai/iblai-js/web-containers/next
.
文件用途
app/(app)/account/page.tsx
带选项卡的账户/组织设置页面
该页面从localStorage读取
userData
、
tenant
/
current_tenant
和
tenants
，管理员身份从
tenants
数组中推导得出。
注意： 
Account
组件内部使用了
next/image
——它从
@iblai/iblai-js/web-containers/next
导入。

Step 3: Use MCP Tools for Customization

步骤3：使用MCP工具自定义

get_component_info("Account")
get_component_info("Account")

<Account>
Props

<Account>
属性

Required

必填属性

PropTypeDescription
tenant
string
Tenant/org key
tenants
Tenant[]
Full list of user tenants from localStorage
username
string
Username
onInviteClick
() => void
Called when "Invite user" is clicked
onClose
() => void
Cancel/close callback
authURL
string
Auth service URL
isAdmin
boolean
Controls tab visibility -- most tabs require 
true
属性类型描述
tenant
string
租户/组织标识
tenants
Tenant[]
从localStorage获取的用户所属租户完整列表
username
string
用户名
onInviteClick
() => void
点击「邀请用户」时触发的回调
onClose
() => void
取消/关闭回调
authURL
string
认证服务URL
isAdmin
boolean
控制选项卡可见性——大多数选项卡需要该值为
true
才会显示

Optional

可选属性

PropTypeDescription
targetTab
string
Initial tab: 
organization
, 
management
, 
integrations
, 
advanced
, 
billing
currentPlatformBaseDomain
string
Base domain for custom domain settings
currentSPA
string
Current app identifier (e.g., 
"agent"
)
billingURL
string
Stripe billing portal URL -- shows Billing tab
topUpURL
string
Stripe top-up URL -- shows Billing tab
enableRbac
boolean
Enable RBAC permission checks for Management
showPlatformName
boolean
Show tenant name badge in sidebar
useGravatarPicFallback
boolean
Use Gravatar when no org logo
属性类型描述
targetTab
string
初始展示的选项卡：
organization
、
management
、
integrations
、
advanced
、
billing
currentPlatformBaseDomain
string
自定义域名设置的基础域名
currentSPA
string
当前应用标识符（例如
"agent"
）
billingURL
string
Stripe账单门户URL——配置后会显示账单选项卡
topUpURL
string
Stripe充值URL——配置后会显示账单选项卡
enableRbac
boolean
为管理模块启用RBAC权限校验
showPlatformName
boolean
在侧边栏显示租户名称徽章
useGravatarPicFallback
boolean
没有组织logo时使用Gravatar作为 fallback

Tabs

选项卡说明

TabRequires
Organization
isAdmin === true
ManagementRBAC permissions
Integrations
isAdmin === true
Advanced
isAdmin === true
Billing
billingURL
or 
topUpURL
prop set
选项卡要求
组织信息
isAdmin === true
管理拥有对应的RBAC权限
集成
isAdmin === true
高级设置
isAdmin === true
账单配置了
billingURL
或
topUpURL
属性

Step 4: Verify

步骤4：验证

Run 
/iblai-test
before telling the user the work is ready:
  1. pnpm build
    -- must pass with zero errors
  2. pnpm test
    -- vitest must pass
  3. Start dev server and touch test:
    bash
    pnpm dev &
npx playwright screenshot http://localhost:3000/account /tmp/account.png
告知用户工作完成前请运行
/iblai-test
：
  1. pnpm build
    ——必须零错误通过
  2. pnpm test
    ——vitest必须通过
  3. 启动开发服务器并进行接触测试：
    bash
    pnpm dev &
npx playwright screenshot http://localhost:3000/account /tmp/account.png

Important Notes

重要注意事项

  • Next.js required: Import from 
    @iblai/iblai-js/web-containers/next
    (uses 
    next/image
    )
  • Redux store: Must include 
    mentorReducer
    and 
    mentorMiddleware
  • initializeDataLayer()
    : 5 args (v1.2+)
  • @reduxjs/toolkit
    : Deduplicated via webpack aliases in 
    next.config.ts
  • currentPlatformBaseDomain
    : Must be 
    {config.platformBaseDomain()}
    — uses the config helper, not a raw env var. This is correct and intentional.
  • Brand guidelines: BRAND.md
  • 必须使用Next.js: 从
    @iblai/iblai-js/web-containers/next
    导入（使用了
    next/image
    ）
  • Redux store: 必须包含
    mentorReducer
    和
    mentorMiddleware
  • initializeDataLayer()
    : 接收5个参数（v1.2及以上版本）
  • @reduxjs/toolkit
    : 通过
    next.config.ts
    中的webpack别名去重
  • currentPlatformBaseDomain
    : 必须填写
    {config.platformBaseDomain()}
    ——使用配置工具方法，不要直接使用原始环境变量，这是有意设计的正确用法。
  • 品牌规范: BRAND.md