Back to Details

iblai-profile

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/iblai-profile

/iblai-profile

Add user profile features -- a compact avatar dropdown for your navbar and a full settings page with tabs for Basic info, Social links, Education, Experience, Resume, and Security.
Profile 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.
添加用户个人资料功能——导航栏的紧凑头像下拉菜单，以及包含基础信息、社交链接、教育经历、工作经验、简历、安全选项卡的完整设置页面。
Profile Page
AI助手: 不要为ibl.ai SDK组件添加自定义样式、颜色或CSS覆盖。它们自带样式，保持组件原样即可。除非用户明确要求，否则不要实现深色模式。
在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 profile
bash
iblai add profile

What Was Generated

生成的内容

FilePurpose
components/iblai/profile-dropdown.tsx
Avatar dropdown for navbar with profile, organization, and logout
The dropdown reads 
userData
, 
tenant
/
current_tenant
, and 
tenants
from localStorage. Admin status is derived from the 
tenants
array by matching the current tenant key against 
is_admin
.
The dropdown shows three items: Profile (links to 
/profile
), Organization (links to 
/account
), and Logout.
文件用途
components/iblai/profile-dropdown.tsx
导航栏的头像下拉菜单，包含个人资料、组织和退出登录功能
该下拉菜单从localStorage读取
userData
、
tenant
/
current_tenant
和
tenants
。管理员身份通过将当前租户key与
is_admin
字段匹配从
tenants
数组中推导。
下拉菜单显示三个选项：个人资料（链接到
/profile
）、组织（链接到
/account
）和退出登录。

Step 3: Use MCP Tools for Customization

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

get_component_info("UserProfileDropdown")
get_component_info("UserProfileDropdown")

<UserProfileDropdown>
Props

<UserProfileDropdown>
Props

The generated dropdown component. Import from 
@iblai/iblai-js/web-containers/next
.
PropTypeDescription
username
string
Username
tenantKey
string
Tenant/org key
userIsAdmin
boolean
Shows admin badge + settings
showProfileTab
boolean
Show profile link
showAccountTab
boolean
Show account settings link
showTenantSwitcher
boolean
Show tenant switcher
showLogoutButton
boolean
Show logout button
authURL
string
Auth service URL
onLogout
() => void
Logout callback
className
string?
Additional CSS class
生成的下拉菜单组件。从
@iblai/iblai-js/web-containers/next
导入。
属性类型描述
username
string
用户名
tenantKey
string
租户/组织key
userIsAdmin
boolean
显示管理员徽章+设置
showProfileTab
boolean
显示个人资料链接
showAccountTab
boolean
显示账户设置链接
showTenantSwitcher
boolean
显示租户切换器
showLogoutButton
boolean
显示退出登录按钮
authURL
string
认证服务URL
onLogout
() => void
退出登录回调
className
string?
额外CSS类

<UserProfileModal>
Props (Profile + Account Modal)

<UserProfileModal>
Props（个人资料+账户模态框）

For a profile editing modal (used by the MentorAI reference app), import 
UserProfileModal
from 
@iblai/iblai-js/web-containers/next
. This is a dialog that combines profile editing and account settings in one overlay.
如果需要个人资料编辑模态框（MentorAI参考应用使用），可从
@iblai/iblai-js/web-containers/next
导入
UserProfileModal
。这是一个对话框，在一个浮层中整合了个人资料编辑和账户设置功能。

Required

必填项

PropTypeDescription
isOpen
boolean
Whether the modal is visible
onClose
() => void
Close callback
params
{ tenantKey: string; mentorId?: string; isAdmin?: boolean }
Tenant key, optional mentor ID and admin flag
authURL
string
Auth service URL (from 
config.authUrl()
)
属性类型描述
isOpen
boolean
模态框是否可见
onClose
() => void
关闭回调
params
{ tenantKey: string; mentorId?: string; isAdmin?: boolean }
租户key，可选的导师ID和管理员标识
authURL
string
认证服务URL（来自
config.authUrl()
）

Optional

可选项

PropTypeDescription
tenants
Tenant[]
Full list of user tenants from localStorage
targetTab
string
Initial tab: 
basic
, 
social
, 
education
, 
experience
, 
resume
, 
security
showPlatformName
boolean
Show tenant name badge
useGravatarPicFallback
boolean
Use Gravatar when no profile pic
currentSPA
string
Current app identifier (e.g., 
"agent"
)
currentPlatformBaseDomain
string
Base domain for custom domain settings
onTenantUpdate
(tenant: Tenant) => void
Called when tenant is updated
onAccountDeleted
() => void
Called after account deletion
属性类型描述
tenants
Tenant[]
来自localStorage的用户租户完整列表
targetTab
string
初始选项卡：
basic
、
social
、
education
、
experience
、
resume
、
security
showPlatformName
boolean
显示租户名称徽章
useGravatarPicFallback
boolean
无头像时使用Gravatar
currentSPA
string
当前应用标识符（例如
"agent"
）
currentPlatformBaseDomain
string
自定义域名设置的基础域名
onTenantUpdate
(tenant: Tenant) => void
租户更新时调用
onAccountDeleted
() => void
账户删除后调用

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/profile /tmp/profile.png
告知用户工作完成前请运行
/iblai-test
：
  1. pnpm build
    -- 必须零错误通过
  2. pnpm test
    -- vitest必须通过
  3. 启动开发服务器并触摸测试：
    bash
    pnpm dev &
npx playwright screenshot http://localhost:3000/profile /tmp/profile.png

Important Notes

重要提示

  • Redux store: Must include 
    mentorReducer
    and 
    mentorMiddleware
  • initializeDataLayer()
    : 5 args (v1.2+)
  • @reduxjs/toolkit
    : Deduplicated via webpack aliases in 
    next.config.ts
  • Admin detection: Derived from 
    tenants
    array in localStorage
  • Brand guidelines: BRAND.md
  • Redux store: 必须包含
    mentorReducer
    和
    mentorMiddleware
  • initializeDataLayer()
    : 5个参数（v1.2及以上版本）
  • @reduxjs/toolkit
    : 通过
    next.config.ts
    中的webpack别名去重
  • 管理员检测: 从localStorage的
    tenants
    数组推导
  • 品牌规范: BRAND.md