/iblai-account

Add an account/organization settings page with tabs for Organization info, User Management, Integrations, Advanced settings, and Billing.

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.

Prerequisites

• Auth must be set up first (/iblai-auth)
• MCP and skills must be set up: iblai add mcp

Step 0: Check for CLI Updates

AI Assistant: 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.

Step 1: Check Environment

AI Assistant: Before proceeding, check for a .env.local (or .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 a .env.local with your platform configuration. Download the template and fill in your values: curl -o .env.local https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/.env.example"

Step 2: Run the Generator

iblai add account

What Was Generated

File	Purpose
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.

Step 3: Use MCP Tools for Customization

get_component_info("Account")

<Account> Props

Required

Prop	Type	Description
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

Optional

Prop	Type	Description
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

Tabs

Tab	Requires
Organization	isAdmin === true
Management	RBAC permissions
Integrations	isAdmin === true
Advanced	isAdmin === true
Billing	billingURL or topUpURL prop set

Step 4: Verify

Run /iblai-test before telling the user the work is ready:

1. npm run build -- must pass with zero errors
2. npm run test -- vitest must pass
3. Start dev server and touch test:

   npm run 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