/iblai-vibe-agent-search

Mirrored from iblai/vibe · skills/agents/iblai-vibe-agent-search/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.

Add an Agent Search page -- a searchable, filterable agent browser with four sections: starred agents, featured agents, custom agents, and all agents. Includes search input, category/subject/LLM/type filters, star/favorite toggle, and "Create Agent" action.

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)

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: Mount AgentSearch

AgentSearch does NOT use AgentSettingsProvider. It takes tenantKey, username, and onAgentClick as direct props.

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

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

export default function AgentsPage() {
  const router = useRouter();
  const [tenantKey, setTenantKey] = useState("");
  const [username, setUsername] = useState<string | null>(null);

  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) return null;

  return (
    <div className="flex h-full flex-col bg-white p-4">
      <AgentSearch
        tenantKey={tenantKey}
        username={username}
        onAgentClick={(agent) => {
          router.push(`/agents/${agent.unique_id}/settings`);
        }}
        onCreateAgent={() => {
          router.push("/agents/new");
        }}
      />
    </div>
  );
}

Limiting visible sections

By default all four sections render (starred, featured, custom, default). Use the include prop to show only specific sections:

<AgentSearch
  tenantKey={tenantKey}
  username={username}
  onAgentClick={handleClick}
  include={["featured", "default"]}
/>

Step 3: Customize Labels (Optional)

import { AgentSearch } from "@iblai/iblai-js/web-containers/next";

<AgentSearch
  tenantKey={tenantKey}
  username={username}
  onAgentClick={handleClick}
  labels={{
    sections: {
      starred: { title: "Your favorites" },
      featured: { title: "Recommended mentors" },
    },
  }}
/>;

Step 4: Use MCP Tools for Customization

get_component_info("AgentSearch")
get_component_info("AgentCard")
get_hook_info("useAgentSearch")

<AgentSearch> Props

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

Sub-Components

All importable from @iblai/iblai-js/web-containers/next for custom layouts:

Hooks

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

Related Exports

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

• AGENT_SEARCH_LABELS -- default label bundle for AgentSearch.
• AGENT_PICKER_LABELS -- default label bundle for a picker variant.
• resolveAgentSearchLabels -- deep-merge helper for labels.
• formatDateString -- default date formatter used by AgentCard.
• AgentSearchResult -- type for a single agent result.

Step 5: 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. Touch test /agents in the browser as /iblai-vibe-ops-test says: open it, use every control this skill added, read the console, check the phone width.

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)
• No AgentSettingsProvider: Unlike the tab components, AgentSearch takes identity props directly. Do NOT wrap it in AgentSettingsProvider.
• Starred agents: Require an authenticated user (username !== null). When username is null, the starred section is hidden.
• Brand guidelines: BRAND.md