/iblai-vibe-profile

Add user profile features -- a compact avatar dropdown for your navbar and a full settings page with sidebar tabs for Basic info, Social links, Education (with Credentials and Skills sub-tabs), Experience (with a Resume sub-tab), Purchases, Memory, Privacy, History, and Security — several of them feature-gated per tenant (see the tab table below).

Template: the dropdown this skill creates is bundled as
[assets/profile-dropdown.tsx.j2](assets/profile-dropdown.tsx.j2). See
[/iblai-vibe-scaffold](../iblai-vibe-scaffold/SKILL.md) for the {{ }} contract.

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-vibe-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-vibe-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.

Step 0: Start from vibe-starter? (new projects)

Before running this skill, ask the user:

Are you starting a new project from scratch? vibe-starter
(https://github.com/iblai/vibe/tree/main/skills/iblai-vibe-ops-init/assets/vibe-starter) already ships the profile
dropdown and /profile page wired up, alongside auth, navbar, and
account/notifications. Want to use that instead?

If yes, copy the bundled starter template from the installed iblai-vibe-ops-init skill's assets/vibe-starter/ directory (a sibling of this skill's directory), or fetch it from the vibe repo if those assets are not installed -- tell the user which path you took -- then skip this skill:

cp -a <skills-dir>/iblai-vibe-ops-init/assets/vibe-starter/. . # or, without local assets: git clone --depth 1 https://github.com/iblai/vibe.git vibe-tmp && cp -a vibe-tmp/skills/iblai-vibe-ops-init/assets/vibe-starter/. . && rm -rf vibe-tmp

pnpm install --ignore-scripts

Run with --ignore-scripts to skip package lifecycle (postinstall) scripts.

If they prefer to add the profile features to an existing app, continue below.

Prerequisites

• Auth must be set up first (/iblai-vibe-auth)
• MCP server + skills configured (@iblai/mcp in .mcp.json)

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: Create the Dropdown

Render [assets/profile-dropdown.tsx.j2](assets/profile-dropdown.tsx.j2) into components/iblai/profile-dropdown.tsx (substitute {{ }} placeholders).

Files created

The dropdown reads userData, currenttenant, and tenants from localStorage. Admin status is derived from the tenants array by matching the current tenant key against isadmin. The avatar is fetched internally by the SDK from the user metadata, keyed on username (use user_nicename) — with a Gravatar fallback (enableGravatarOnProfilePic) and then initials.

The dropdown shows: Profile (opens the SDK profile modal), a Tenant Switcher (admins only — see Step 4), and Logout. The dedicated "Account" item is off (showAccountTab={false}); account settings live on the separate /account page.

Step 3: Add a Full Profile Page

Step 2 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}
          tenants={tenants}
          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: Tenant Switcher

The template already wires the tenant switcher to match the reference app — it's shown to admins only (showTenantSwitcher={isAdmin}) and fed by two localStorage reads:

• userTenants (from tenants) — populates the switch list. Without it

the switcher never appears, even when showTenantSwitcher is true.

• currentTenant (from current_tenant) — the FULL active-tenant object.

The SDK uses it to label the current tenant; without it the switcher falls back to a generic label.

Why admins only: for a non-admin the SDK renders just the current tenant name with no working switch list — a dead row. The reference app hides it for non-admins; the template does the same. To show it to everyone, set showTenantSwitcher to a constant true (or userTenants.length > 1).

The main tenant displays as "Community". That's the SDK's built-in
name for the main org — it is NOT read from currenttenant.platformname,
and passing currentTenant does not change it. It's not a bug; other
tenants show their own name.

Step 5: Use MCP Tools for Customization

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

Profile tabs

The sidebar tabs the Profile component renders, with the targetTab id and when each appears:

Profile Content API

Full REST reference: /iblai-api-profile in iblai/api (npx skills add iblai/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 "{dmUrl}/api/career/orgs/{org}/education/users/alice/" \
  -H "Authorization: Token {dm_token}" > education.json

# 2. Merge your changes into the existing data
# 3. Write back the full object
curl -X PUT "{dmUrl}/api/career/orgs/{org}/education/users/alice/?id={education_id}" \
  -H "Authorization: Token {dm_token}" \
  -H "Content-Type: application/json" \
  -d @education.json

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

Service

Profile data lives in the DM (data manager) service:

Basic, Social, and Profile Image

Basic info (name, email, title, bio, language), social links, profile image, and password reset are user-scope and not exposed via the platform Api-Token. Use the SDK Profile component, which handles these via the user's session — no direct REST endpoints are documented here.

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

Account deletion.

POST {dmUrl}/api/core/users/delete/          // account deletion (self-retire)

Account deletion payload: { username: string }. Password reset is user-scope and runs through the SDK / Auth SPA, not via the platform Api-Token.

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

Full REST reference: /iblai-api-profile-metadata in iblai/api (npx skills add iblai/api).

The ibl.ai platform provides per-user metadata storage via the Agent Metadata endpoint. This is useful for storing arbitrary JSON data scoped to a specific user and agent (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-agent; 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 dmtoken from localStorage (NOT axdtoken)
• 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-vibe-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:

``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
• 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 vs Purchases: Tenant billing (plan, credits, spend limits)

lives on the Account page (/iblai-vibe-account, /iblai-vibe-billing). The Profile page's own Purchases tab shows the user's purchase history and only appears when the tenant has monetization enabled.

• Feature-gated tabs: Memory, Privacy, Purchases, Gradebook, and

Advanced only render when their gate is on (see the Profile tabs table) — targetTab pointing at a hidden tab falls back to nothing useful, so check the gate before deep-linking.

• Brand guidelines: BRAND.md