Iblai Vibe Agent Setting

/iblai-vibe-agent-setting

Add the agent Settings tab -- the core agent-edit form with name, description, avatar, visibility (administrators / students / anyone), category, plus a Copy-to-organization action and a Delete action. This is one tab in the wider agent-settings family (access, api, datasets, disclaimers, embed, history, llm, memory, prompts, safety, settings, tasks, tools). Each tab is a separate skill. All tabs share the same AgentSettingsProvider wrapper -- set it up once and mount as many tabs as you need.

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

Prerequisites

• Auth must be set up first (/iblai-vibe-auth)
• MCP server + skills configured (@iblai/mcp in .mcp.json)
• Ask the user for a real mentorId (agent UUID). Do NOT invent one.

Step 1: Check Environment

Before proceeding, check for an 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: Wrap the Route in AgentSettingsProvider

All agent tabs (AgentSettingsTab, AgentLLMTab, AgentPromptsTab, etc.) read shared identity from AgentSettingsProvider. Wrap your agent-settings route once; every tab inside it reads from context.

// app/(app)/agents/[mentorId]/layout.tsx
"use client";

import { AgentSettingsProvider } from "@iblai/iblai-js/web-containers/next";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";

export default function AgentSettingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { mentorId } = useParams<{ mentorId: string }>();
  const [tenantKey, setTenantKey] = useState("");
  const [username, setUsername] = useState("");

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

      const resolvedTenant =
        localStorage.getItem("app_tenant") ??
        (() => {
          try {
            return JSON.parse(localStorage.getItem("current_tenant") ?? "{}").key;
          } catch { return undefined; }
        })() ??
        localStorage.getItem("tenant") ??
        "";
      setTenantKey(resolvedTenant);
    } catch {}
  }, []);

  if (!tenantKey || !username) return null;

  return (
    <AgentSettingsProvider
      tenantKey={tenantKey}
      mentorId={mentorId}
      username={username}
      enableRBAC={false}
    >
      {children}
    </AgentSettingsProvider>
  );
}

enableRBAC toggles gated-action prompts (e.g., "are you sure?") for destructive actions. Leave false unless the host app wires an executeGatedAction callback.

Step 3: Mount AgentSettingsTab

// app/(app)/agents/[mentorId]/settings/page.tsx
"use client";

import { useEffect, useState } from "react";
import {
  AgentSettingsTab,
  type CopyMentorTenant,
} from "@iblai/iblai-js/web-containers/next";
import { useRouter } from "next/navigation";

export default function AgentSettingsPage() {
  const router = useRouter();
  const [tenants, setTenants] = useState<CopyMentorTenant[]>([]);
  const [isLoadingTenants, setIsLoadingTenants] = useState(true);

  useEffect(() => {
    try {
      const raw = localStorage.getItem("tenants");
      const parsed = raw ? JSON.parse(raw) : [];
      setTenants(
        parsed.map((t: any) => ({ key: t.key, name: t.name ?? t.key })),
      );
    } catch {}
    setIsLoadingTenants(false);
  }, []);

  return (
    <div className="flex h-full flex-col bg-white">
      <AgentSettingsTab
        tenants={tenants}
        isLoadingTenants={isLoadingTenants}
        => {
          console.log("saved", mentor);
        }}
        => {
          router.push("/agents");
        }}
        forkedMentorId, destinationTenantKey }) => {
          router.push(`/agents/${forkedMentorId}?tenant=${destinationTenantKey}`);
        }}
      />
    </div>
  );
}

Step 4: Customize Labels (Optional)

AgentSettingsTab renders with the default agent-facing copy (AGENT_SETTINGS_TAB_LABELS). Override any string via the labels prop. Pass a full SettingsTabLabels bundle (for a full mentor/tutor/coach re-skin) or a partial object (for one-off edits).

import {
  AgentSettingsTab,
  type SettingsTabLabels,
  AGENT_SETTINGS_TAB_LABELS,
} from "@iblai/iblai-js/web-containers/next";

const MENTOR_LABELS: SettingsTabLabels = {
  ...AGENT_SETTINGS_TAB_LABELS,
  header: {
    title: "Mentor settings",
    description: "Configure your mentor's identity and visibility.",
  },
};

<AgentSettingsTab tenants={tenants} labels={MENTOR_LABELS} />;

For a partial override, pass only the keys you want to change:

<AgentSettingsTab
  tenants={tenants}
  labels={{
    header: { title: "Tutor settings" },
    fields: { whoCanView: { label: "Who can access this tutor?" } },
  }}
/>

Step 5: Use MCP Tools for Customization

get_component_info("AgentSettingsTab")
get_component_info("AgentSettingsProvider")
get_component_info("CopyMentorModal")
get_component_info("DeleteMentorModal")

<AgentSettingsTab> Props

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

<AgentSettingsProvider> Props

All tabs in the agent-settings family (AgentSettingsTab, AgentLLMTab, AgentPromptsTab, etc.) read identity from this provider via useAgentSettings().

Related Exports

From @iblai/iblai-js/web-containers/next:

• DeleteMentorModal, CopyMentorModal -- used internally by AgentSettingsTab. Export paths for standalone use (e.g., an "archive" action outside the tab).
• resolveSettingsTabLabels -- merges DeepPartial<SettingsTabLabels> with defaults. Useful when composing bundles.
• AGENT_SETTINGS_TAB_LABELS -- the default agent-facing bundle.

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:

   pnpm dev &
   npx playwright screenshot http://localhost:3000/agents/<id>/setting /tmp/agent-setting.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
• Peer deps: sonner and @iblai/iblai-web-mentor must be installed (pnpm add sonner @iblai/iblai-web-mentor)
• Shared provider: Mount AgentSettingsProvider at a layout level so multiple tabs (settings, llm, prompts, ...) share one wrapper. Do NOT wrap each tab page individually.
• Tenants list: The tenants prop drives the Copy to tenant flow. If the user should not be able to copy cross-organization, pass an empty array.
• Labels ownership: Consumer-specific bundles (agent, tutor, coach) live in the consuming app, not in @iblai/iblai-js. The package only ships AGENT_SETTINGS_TAB_LABELS as a neutral default.
• REST reference: /iblai-api-agent-setting — the agent-settings API (headless twin, same repo) behind this tab (name, visibility, feature flags, fork). Install: npx skills add iblai/vibe --all
• Brand guidelines: BRAND.md