/iblai-vibe-agent

Mirrored from iblai/vibe · skills/agents/iblai-vibe-agent/SKILL.md. This page is generated — edit it in the repository, not here.

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, and give every page, control and state this skill added its own checkpoint — one Playwright test titled <ID> · … in e2e/journeys/, listed in e2e/coverage.json; pnpm e2e:coverage must pass: pnpm build, pnpm test, then Touch test /agents/<uuid>/settings in the browser as /iblai-vibe-ops-test says: every tab, the console, the phone width.