iblai-vibe-agent-llm

/iblai-vibe-agent-llm

Add the agent LLM tab -- a searchable grid of LLM provider cards with a modal for selecting specific models within a chosen provider. This is one tab in the wider agent-settings family. All tabs share the same AgentSettingsProvider wrapper.

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)
• AgentSettingsProvider must wrap the route (see /iblai-vibe-agent-setting Step 2 if not already set up)
• 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: Mount AgentLLMTab

AgentLLMTab has no required props. Provider names and logos come from the backend's model catalogue (the same mentor-llms read the picker uses), so the host supplies no mapper. Older SDK releases took a required getLLMProviderDetails prop; it no longer exists.

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

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

export default function AgentLLMPage() {
  return (
    <div className="flex h-full flex-col bg-white">
      <AgentLLMTab />
    </div>
  );
}

The tab reads tenantKey, mentorId and username from the nearest <AgentSettingsProvider>. Pass mentorId to configure a different agent than the provider describes — a host can mount the tab in a "switch model" dialog opened from the chat chrome, where the agent being configured is the one in the chat (the ibl.ai OS does exactly this):

<AgentLLMTab mentorId={chatMentorId} showConfigurationHeader={false} />;

Step 3: Customize Labels (Optional)

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

<AgentLLMTab
  labels={{
    header: { title: "Model configuration" },
  }}
/>;

Step 4: Use MCP Tools for Customization

get_component_info("AgentLLMTab")
get_component_info("AgentSettingsProvider")

<AgentLLMTab> Props

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

Prop	Type	Required	Description
labels	DeepPartial<LLMTabLabels>	No	Override user-visible strings
showConfigurationHeader	boolean	No	Show/hide the configuration header (default true)
mentorId	string	No	Configure this agent instead of the one from <AgentSettingsProvider> — for a model picker opened from a chat

Related Exports

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

• AGENT_LLM_TAB_LABELS -- the default agent-facing label bundle.
• LLMTabLabels -- type for the full label bundle.
• LLMProvider, LLMProviderType -- types for provider data structures (LLMProviderType is the { name, chat_models } provider row).

From @iblai/iblai-js/web-containers, for custom UI that shows a provider's name or logo (an agents table, a transcript row):

• useLlmProviderCatalogue({ org, userId, mentorId }) -- returns a resolver (llmProvider?, llmName?) => LlmProviderDetails over the same mentor-llms rows the tab reads (the tab reads them directly; the SDK uses this hook for LlmModelBadge); a key the catalogue does not list resolves to the raw key and no logo.
• LlmProviderDetails -- { logo: string | null; displayName: string }.
• inferProviderKeysFromModel -- the provider keys a model name implies.

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. Start dev server and touch test:

   pnpm dev &
   npx playwright screenshot http://localhost:3000/agents/<id>/llm /tmp/agent-llm.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: AgentSettingsProvider must wrap the route at a layout level. See /iblai-vibe-agent-setting Step 2 for the full snippet.
• Provider naming is backend-owned: logos and display names come from the organization's model catalogue, so the tab needs no host mapper. Older SDK releases took a required getLLMProviderDetails prop; it no longer exists.
• Brand guidelines: BRAND.md