Iblai Vibe Agent

/iblai-vibe-agent

First time here? If iblai.env has no ARCHITECTURE=, run /iblai-vibe-start first (four questions; two minutes) — it decides single-org / multi-org / headless and who signs in, and every skill reads the answer.

Everything about configuring an agent lives behind one provider and one route layout. Set the provider up once (§1), then mount only the tabs your app needs (§2). Most apps need five or six; the rest are there when asked for.

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

Prerequisites

• Auth in place (/iblai-vibe-auth, or vibe-starter).
• A real agent UUID — the last path segment of https://os.ibl.ai/platform/<org-key>/<agent-uuid>, or one created with /iblai-vibe-agent-create. Never invent one.
• The signed-in user must be the agent's owner, an org admin, or hold an editor role on it (/iblai-vibe-agent-access); otherwise tabs render "no access".

1. The provider (once)

// 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";
import { resolveAppTenant } from "@/lib/iblai/tenant";

export default function AgentLayout({ 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) setUsername(JSON.parse(raw).user_nicename ?? "");
    } catch {}
    setTenantKey(resolveAppTenant());
  }, []);

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

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

Suggested routes: app/(app)/agents/[mentorId]/<tab>/page.tsx, one per tab, with a small tab strip (shadcn Tabs or plain links) in the layout. Each tab component reads the agent from context — no props needed for the basics.

2. The tabs

Start with the core six (bold). Add the others only when the user asks.

Every tab skill has screenshots of the surface it mounts — open the skill before promising the user what they will see.

3. Not tabs, but agent-related

Verify

Run /iblai-vibe-ops-test before telling the user the work is ready: pnpm build, pnpm test, then npx playwright screenshot http://localhost:3000/agents/<uuid>/settings /tmp/agent-settings.png.