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

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
• Follow the component hierarchy: use ibl.ai SDK components (@iblai/iblai-js) first, then shadcn/ui for everything else (npx shadcn@latest add <component>). Do NOT write custom components when an ibl.ai or shadcn equivalent exists. Both share the same Tailwind theme and render in ibl.ai brand colors automatically.
• Follow BRAND.md for colors, typography, spacing, and component styles.

You MUST run /iblai-ops-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.

When building a navbar or header, do NOT display the tenant/platform name. Use the ibl.ai logo instead.

Navbar: If the user wants a navbar with the profile dropdown, guide them to /iblai-navbar first. That skill creates the full navbar with logo, page links, notification bell, and profile dropdown.

Common setup (brand, conventions, env files, verification): see docs/skill-setup.md.

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

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

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"

Step 2: Run the Generator

iblai add profile

What Was Generated

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: Profile (links to /profile), Organization (links to /account), Tenant Switcher, and Logout.

Step 3: Add a Full Profile Page

The generator creates the dropdown only. You must create the profile page manually using the Profile component (not UserProfileModal, which renders as a dialog).

Import Profile from @iblai/iblai-js/web-containers (the framework-agnostic bundle, NOT the /next bundle). This renders an inline, full-page profile editor with sidebar navigation on desktop and tabbed navigation on mobile.

Reference implementation

// app/(app)/profile/page.tsx
"use client";

import { useEffect, useState } from "react";
import { Profile } from "@iblai/iblai-js/web-containers";
import { resolveAppTenant } from "@/lib/iblai/tenant";

export default function ProfilePage() {
  const [tenantKey, setTenantKey] = useState("");
  const [username, setUsername] = useState("");
  const [isAdmin, setIsAdmin] = useState(false);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    try {
      const raw = localStorage.getItem("userData");
      if (raw) {
        const parsed = JSON.parse(raw);
        setUsername(parsed.user_nicename ?? parsed.username ?? "");
      }
    } catch {}

    const resolved = resolveAppTenant();
    setTenantKey(resolved);

    try {
      const tenantsRaw = localStorage.getItem("tenants");
      if (tenantsRaw) {
        const parsed = JSON.parse(tenantsRaw);
        const match = parsed.find((t: any) => t.key === resolved);
        if (match) setIsAdmin(!!match.is_admin);
      }
    } catch {}

    setReady(true);
  }, []);

  if (!ready || !tenantKey) {
    return (
      <div className="flex flex-1 items-center justify-center">
        <p className="text-sm text-gray-400">Loading profile...</p>
      </div>
    );
  }

  return (
    <div className="mx-auto w-full flex-1 overflow-auto px-4 py-8 md:w-[75vw] md:px-0">
      <div className="rounded-lg border border-[var(--border-color)] bg-white overflow-hidden">
        <Profile
          tenant={tenantKey}
          username={username}
          isAdmin={isAdmin}
          onClose={() => {}}
          customization={{
            showPlatformName: true,
            useGravatarPicFallback: true,
          }}
          targetTab="basic"
        />
      </div>
    </div>
  );
}

Key patterns

• White container wrapper: The SDK Profile component has no outer background. Wrap it in a bg-white rounded-lg border container so it renders as a card against the gray page background (--sidebar-bg: #fafbfc).
• Profile vs UserProfileModal: Profile renders inline (full page). UserProfileModal renders as a dialog overlay. Use Profile for a dedicated /profile route.
• Import path: @iblai/iblai-js/web-containers (NOT /next).

Step 4: Enable Tenant Switcher in the Dropdown

The generator does NOT enable the tenant switcher by default. You must pass the userTenants prop and set showTenantSwitcher to true:

// In profile-dropdown.tsx, add:
const userTenants = useMemo(() => {
  if (typeof window === "undefined") return [];
  try {
    const raw = localStorage.getItem("tenants");
    return raw ? JSON.parse(raw) : [];
  } catch {
    return [];
  }
}, []);

// Then pass to the component:
<UserProfileDropdown
  userTenants={userTenants}
  showTenantSwitcher
  showAccountTab
  // ...other props
/>

Without userTenants, the tenant switcher will not appear even when showTenantSwitcher is true.

Step 5: Use MCP Tools for Customization

get_component_info("UserProfileDropdown")
get_component_info("Profile")
get_component_info("MediaBox")
get_component_info("ResumeTab")

Profile Content API

The SDK Profile component handles all API calls internally. If you need to build custom profile UIs or interact with profile data programmatically, here are the APIs each tab uses.

Read before write. When calling these REST endpoints directly (e.g. via fetch or curl), always GET the current data first, merge your changes into it, then POST/PUT the full object back. Most endpoints replace the entire resource -- they do NOT merge fields. Skipping the read will silently erase fields you didn't include in the payload.

# 1. Read current state
curl -s "{lmsUrl}/api/ibl/users/manage/metadata/?username=alice" \
  -H "Authorization: Token {axd_token}" > profile.json

# 2. Merge your changes into the existing data
# 3. Write back the full object
curl -X POST "{lmsUrl}/api/ibl/users/manage/metadata/?username=alice" \
  -H "Authorization: Token {axd_token}" \
  -H "Content-Type: application/json" \
  -d @profile.json

This applies to all profile endpoints: metadata, social links, education, experience, and resume.

Two Services

Profile data lives across two backend services:

Basic Tab

Reads and updates the user's core profile: full name, email, title, about/bio, language preference, and display toggles.

GET  {lmsUrl}/api/ibl/users/manage/metadata/?username={username}
POST {lmsUrl}/api/ibl/users/manage/metadata/?username={username}

Read response fields:

{
  fullName: string;
  email: string;
  username: string;
  title: string;
  about: string;       // bio/description
  language: string;     // "en", "es", "fr"
  enable_sidebar_ai_mentor_display: boolean;
  enable_skills_leaderboard_display: boolean;
}

Update payload:

{
  name: string;
  username: string;
  title: string;
  about: string;
  public_metadata: { language: string };
  enable_sidebar_ai_mentor_display: boolean;
  enable_skills_leaderboard_display: boolean;
  email?: string;  // only include if changed
}

Profile image:

POST {lmsUrl}/api/user/v1/accounts/{username}/image   // upload (FormData with file)
GET  {lmsUrl}/api/user/v1/accounts/{username}          // read (returns profile_image.image_url_full)
POST {lmsUrl}/api/profile_images/v1/{username}/remove  // remove

Social Tab

Reads and updates social media links (Facebook, LinkedIn, X/Twitter).

Uses the same endpoint as Basic:

GET  {lmsUrl}/api/ibl/users/manage/metadata/?username={username}
POST {lmsUrl}/api/ibl/users/manage/metadata/?username={username}

Social links in response:

{
  social_links: [
    { platform: "facebook", social_link: "https://facebook.com/username" },
    { platform: "twitter", social_link: "https://x.com/username" },  // stored as "twitter"
    { platform: "linkedin", social_link: "https://linkedin.com/in/username" }
  ]
}

Update payload:

{
  social_links: [
    { platform: "facebook", social_link: string },
    { platform: "twitter", social_link: string },
    { platform: "linkedin", social_link: string }
  ],
  username: string
}

Validation rules:

• Facebook: https://facebook.com/ prefix, letters/numbers/hyphens/periods only
• LinkedIn: https://linkedin.com/in/ prefix, min 5 chars, letters/numbers/periods
• X/Twitter: https://x.com/ prefix, 4-15 chars, letters/numbers/underscores

Education Tab

CRUD operations for education entries. Uses the DM career API.

GET    {dmUrl}/api/career/orgs/{org}/education/users/{username}/
POST   {dmUrl}/api/career/orgs/{org}/education/users/{username}/
PUT    {dmUrl}/api/career/orgs/{org}/education/users/{username}/?id={education_id}
DELETE {dmUrl}/api/career/orgs/{org}/education/users/{username}/?id={education_id}

Education schema:

{
  id: number;
  institution: { id: number; name: string };
  institution_id: number;        // required for create/update
  degree: string;
  field_of_study: string;
  start_date: string;            // "YYYY-MM-DD"
  end_date: string | null;
  is_current: boolean;
  grade: string;
  activities: string;
  description: string;
  data: Record<string, any>;     // arbitrary metadata
  metadata: Record<string, any>;
}

Institutions (lookup for the institution picker):

GET  {dmUrl}/api/career/orgs/{org}/institutions/users/{username}/
POST {dmUrl}/api/career/orgs/{org}/institutions/users/{username}/

Institution create payload:

{ name: string; institution_type: InstitutionTypeEnum; established_year?: number }

Experience Tab

CRUD operations for professional experience entries.

GET    {dmUrl}/api/career/orgs/{org}/experience/users/{username}/
POST   {dmUrl}/api/career/orgs/{org}/experience/users/{username}/
PUT    {dmUrl}/api/career/orgs/{org}/experience/users/{username}/?id={experience_id}
DELETE {dmUrl}/api/career/orgs/{org}/experience/users/{username}/?id={experience_id}

Experience schema:

{
  id: number;
  company: { id: number; name: string };
  company_id: number;            // required for create/update
  title: string;
  employment_type: string;       // "Full-time", "Part-time", "Contract", "Freelance", "Internship"
  location: string;
  start_date: string;            // "YYYY-MM-DD"
  end_date: string | null;
  is_current: boolean;
  description: string;
  data: Record<string, any>;
  metadata: Record<string, any>;
}

Companies (lookup for the company picker):

GET  {dmUrl}/api/career/orgs/{org}/companies/users/{username}/
POST {dmUrl}/api/career/orgs/{org}/companies/users/{username}/

Company create payload:

{ name: string; industry?: string; website?: string; logo_url?: string }

Resume Tab

Upload and view PDF resumes.

GET  {dmUrl}/api/career/resume/orgs/{org}/users/{username}/
POST {dmUrl}/api/career/resume/orgs/{org}/users/{username}/
PUT  {dmUrl}/api/career/resume/orgs/{org}/users/{username}/

Upload (FormData):

user: {username}
platform: {org}
resume: File          // PDF only, max 25MB -- marks as CV
additional_files: File  // general file upload (not CV)

Response:

{
  id: number;
  user: number;
  platform: string;
  files: [{ name: string; url: string; type: string }];
  links: [{ url: string }];
}

Security Tab

Password reset and account deletion.

POST {lmsUrl}/account/password              // sends reset email
POST {dmUrl}/api/core/users/delete/          // account deletion (self-retire)

Password reset sends an email to the user's registered address. Account deletion payload: {username: string}.

RTK Query Hooks (SDK Exports)

The SDK's data-layer exports these hooks for all career operations:

import {
  useGetUserEducationQuery,
  useCreateUserEducationMutation,
  useUpdateUserEducationMutation,
  useDeleteUserEducationMutation,
  useGetUserExperienceQuery,
  useCreateUserExperienceMutation,
  useUpdateUserExperienceMutation,
  useDeleteUserExperienceMutation,
  useGetUserInstitutionsQuery,
  useCreateUserInstitutionMutation,
  useGetUserCompaniesQuery,
  useCreateUserCompanyMutation,
  useGetUserResumeQuery,
  useCreateUserResumeMutation,
} from "@iblai/iblai-js/data-layer";

For user metadata (basic/social):

import {
  useGetUserMetadataQuery,
  useUpdateUserMetadataMutation,
  useUploadProfileImageMutation,
  useGetUserMetadataEdxQuery,
  useResetPasswordMutation,
} from "@iblai/iblai-js/data-layer";

Building a Custom Career API Slice

If you need career APIs without the SDK's built-in hooks, build a standard RTK Query slice with fetchBaseQuery and one endpoint per row in the endpoint tables above. Use Authorization: Token {dm_token} (from localStorage), and tag invalidation on ["education", "experience", "institution", "company", "resume"].

User Metadata API

The ibl.ai platform provides per-user metadata storage via the Mentor Metadata endpoint. This is useful for storing arbitrary JSON data scoped to a specific user and mentor (e.g. application progress, preferences, onboarding state).

Endpoints

GET  {dmUrl}/api/ai/mentor/orgs/{org}/users/{username}/metadata?mentor={mentorId}
POST {dmUrl}/api/ai/mentor/orgs/{org}/metadata/        body: { mentor_id, metadata }

• Auth: Authorization: Token {axd_token} (from localStorage)
• Scope: Per-user, per-mentor; isolated.
• Schema: Arbitrary JSON.
• Merge behavior: POST merges new keys with existing metadata (does not replace the entire object).

AI Profile Memory API

The platform stores AI-learned facts about a user as tag/detail pairs. This powers the "AI Memory" tab in the profile modal.

GET    {dmUrl}/api/ai-mentor/orgs/{org}/users/{user_id}/ai-user-profile-memory/
POST   {dmUrl}/api/ai-mentor/orgs/{org}/users/{user_id}/ai-user-profile-memory/
DELETE {dmUrl}/api/ai-mentor/orgs/{org}/users/{user_id}/ai-user-profile-memory/{tag}/

Create/Read:

// Request
{ tag: "favorite-animal", detail: "my favorite animal is cat" }

// Response (array of entries)
[{ tag: "favorite-animal", detail: "my favorite animal is cat" }]

Auth: Uses axd_token from localStorage.

Chat Privacy Settings

Users can control how their chat data is stored.

GET  {dmUrl}/api/ai-account/orgs/{org}/users/{user_id}/chat-privacy-config/
GET  {dmUrl}/api/ai-account/orgs/{org}/users/{user_id}/chat-privacy-settings/
POST {dmUrl}/api/ai-account/orgs/{org}/users/{user_id}/chat-privacy-settings/

Privacy modes: normal, anonymized, disabled

The config endpoint returns whether the platform has this feature enabled. The settings endpoint reads/writes the user's preference.

Media Upload (MediaBox)

The SDK provides a MediaBox component for file and link uploads. It renders a tabbed interface with a file upload zone and a link input field, plus a list of previously uploaded files/links.

Import

import { MediaBox, type UploadedFile } from "@iblai/iblai-js/web-containers/next";

Props

UploadedFile type

interface UploadedFile {
  name: string;
  url: string;
  type?: string;  // "link" for links, MIME type for files
}

Peer dependency

MediaBox requires @tanstack/react-form:

pnpm add @tanstack/react-form

Backend: Career/Resume API

MediaBox is a presentational component -- it does not handle uploads itself. You must connect it to the Career/Resume API for persistent storage:

GET/PUT/POST  /api/career/resume/orgs/{org}/users/{username}/

Connecting MediaBox to the Career API

import { useMemo } from "react";
import { toast } from "sonner";
import { MediaBox, type UploadedFile } from "@iblai/iblai-js/web-containers/next";
import { useGetUserResumeQuery, useCreateUserResumeMutation } from "@/services/career-api";
import { resolveAppTenant } from "@/lib/iblai/tenant";

function getUserName(): string {
  if (typeof window === "undefined") return "";
  try {
    const raw = localStorage.getItem("userData");
    return raw ? JSON.parse(raw).user_nicename ?? "" : "";
  } catch { return ""; }
}

export function DocumentUploads() {
  const org = useMemo(() => resolveAppTenant(), []);
  const username = useMemo(() => getUserName(), []);

  const { data, isLoading, isError, refetch } = useGetUserResumeQuery(
    { org, username },
    { skip: !org || !username }
  );
  const [createResume, { isLoading: isUploading }] = useCreateUserResumeMutation();

  const uploadedMedia: UploadedFile[] = useMemo(() => {
    if (!data) return [];
    const files = (data.files ?? []).map((f) => ({ name: f.name, url: f.url, type: f.type }));
    const links = (data.links ?? []).map((l) => ({ name: l.url, url: l.url, type: "link" }));
    return [...files, ...links];
  }, [data]);

  async function handleUploadFile(file: File, isResume: boolean) {
    const formData = new FormData();
    formData.append("user", username);
    formData.append("platform", org);
    formData.append(isResume ? "resume" : "additional_files", file);
    try {
      await createResume({ org, username, resume: formData, method: "POST" }).unwrap();
      toast.success("File uploaded successfully");
      refetch();
    } catch { toast.error("Failed to upload file"); }
  }

  async function handleUploadLink(url: string) {
    const formData = new FormData();
    formData.append("user", username);
    formData.append("platform", org);
    const existingLinks = data?.links ?? [];
    existingLinks.forEach((link, index) => {
      formData.append(`link_${existingLinks.length + 1 - index}`, link.url);
    });
    formData.append("link_1", url);
    try {
      await createResume({ org, username, resume: formData }).unwrap();
      toast.success("Link added successfully");
      refetch();
    } catch { toast.error("Failed to add link"); }
  }

  if (!org || !username) {
    return <p className="text-[14px] text-[#86868b]">Please sign in to upload documents.</p>;
  }

  return (
    <MediaBox
      uploadedMedia={uploadedMedia}
      isLoading={isLoading}
      isError={isError}
      isUploading={isUploading}
      resumeCheckboxEnabled={true}
      onUploadFile={handleUploadFile}
      onUploadLink={handleUploadLink}
      onError={(msg) => toast.error(msg)}
    />
  );
}

Key details

• Auth: Uses dm_token from localStorage (NOT axd_token)
• FormData fields: user (username), platform (org key), resume (file, marks as CV) or additional_files (file, general upload)
• Links: Append numbered link_N fields. Preserve existing links when adding a new one
• Persistent: Files are stored on the user's profile permanently (unlike chat file uploads which are session-scoped)

Career Profile Tabs (Standalone)

The SDK also exports individual career profile tabs that can be used outside the full Profile component:

ResumeTab

import { ResumeTab } from "@iblai/iblai-js/web-containers";
<ResumeTab org={tenantKey} username={username} />

Renders a resume upload and display interface. Props: org (string), username (string).

EducationTab

import { EducationTab } from "@iblai/iblai-js/web-containers";
<EducationTab org={tenantKey} username={username} />

Renders education background management (add/edit/delete education entries). Props: org (string), username (string).

ExperienceTab

import { ExperienceTab } from "@iblai/iblai-js/web-containers";
<ExperienceTab org={tenantKey} username={username} />

Renders professional experience management. Props: org (string), username (string).

Dialogs

These companion dialogs can be used alongside the tabs:

<UserProfileDropdown> Props

The generated dropdown component. Import from @iblai/iblai-js/web-containers/next.

<Profile> Props (Full-Page Profile)

Import from @iblai/iblai-js/web-containers.

Customization object

{
  showMentorAIDisplayCheckbox?: boolean;  // Show "visible on MentorAI" toggle
  showLeaderboardDisplayCheckbox?: boolean;  // Show leaderboard opt-in
  showUsernameField?: boolean;  // Show username field (read-only)
  showPlatformName?: boolean;  // Show platform/tenant name badge
  useGravatarPicFallback?: boolean;  // Use Gravatar when no profile pic
}

<UserProfileModal> Props (Profile + Account Modal)

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.

The modal shows Profile tabs (basic, social, education, experience, resume, security) and Account tabs (organization, management, integrations, billing). Billing/purchases is on the Account side, not the Profile side.

Required

Optional

Step 6: Verify

Run /iblai-ops-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: 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
• SDK hardcoded styles: The SDK Profile component uses bg-white and bg-gray-50 internally. Do NOT override these. Instead, wrap the component in a white container so it renders correctly against the gray page background.
• Billing/Purchases: Lives on the Account page (/iblai-account), not on the Profile page. Use UserProfileModal with targetTab="billing" and billingEnabled={true} to access it from the combined modal.
• Brand guidelines: BRAND.md