# Iblai Agent Llm

> Add the agent LLM tab (model provider selection) to your Next.js app

- **Type:** Skill
- **Install:** `agentstack add skill-iblai-vibe-iblai-agent-llm`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [iblai](https://agentstack.voostack.com/s/iblai)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [iblai](https://github.com/iblai)
- **Source:** https://github.com/iblai/vibe/tree/main/skills/iblai-agent-llm
- **Website:** https://ibl.ai/join

## Install

```sh
agentstack add skill-iblai-vibe-iblai-agent-llm
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# /iblai-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.

Do NOT add custom styles, colors, or CSS overrides to ibl.ai SDK components.
They ship with their own styling. Keep the components as-is.
Do NOT implement dark mode unless the user explicitly asks for it.

When building custom UI around SDK components, use the ibl.ai brand:
- **Primary**: `#0058cc`, **Gradient**: `linear-gradient(135deg, #00b0ef, #0058cc)`
- **Button**: `bg-gradient-to-r from-[#2563EB] to-[#93C5FD] text-white`
- **Font**: System sans-serif stack, **Style**: shadcn/ui new-york variant
- Follow the component hierarchy: use ibl.ai SDK components
  (`@iblai/iblai-js`) first, then shadcn/ui for everything else
  (`npx shadcn@latest add `). Do NOT write custom components
  when an ibl.ai or shadcn equivalent exists. Both share the same
  Tailwind theme and render in ibl.ai brand colors automatically.
- Follow [BRAND.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/BRAND.md) for
  colors, typography, spacing, and component styles.

You MUST run `/iblai-ops-test` before telling the user the work is ready.

After all work is complete, start a dev server (`pnpm dev`) so the user
can see the result at http://localhost:3000.

`iblai.env` is NOT a `.env.local` replacement — it only holds the 3
shorthand variables (`DOMAIN`, `PLATFORM`, `TOKEN`). Next.js still reads
its runtime env vars from `.env.local`.

Use `pnpm` as the default package manager. Fall back to `npm` if pnpm
is not installed.

> **Common setup (brand, conventions, env files, verification):** see [docs/skill-setup.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/docs/skill-setup.md).

## Prerequisites

- Auth must be set up first (`/iblai-auth`)
- MCP server + skills configured (`@iblai/mcp` in `.mcp.json`)
- `AgentSettingsProvider` must wrap the route (see `/iblai-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 one required prop: `getLLMProviderDetails`. This maps a
provider name to display info (logo URL, display name). The host app
provides this because logos and display names are host-specific.

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

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

function getLLMProviderDetails(
  providerName: string,
  llmName?: string,
): LLMProviderDetails {
  const providers: Record = {
    openai: { name: "OpenAI", logo: "/logos/openai.svg" },
    anthropic: { name: "Anthropic", logo: "/logos/anthropic.svg" },
    google: { name: "Google", logo: "/logos/google.svg" },
  };
  return (
    providers[providerName] ?? {
      name: providerName,
      logo: "/logos/default.svg",
    }
  );
}

export default function AgentLLMPage() {
  return (
    
      
    
  );
}
```

## Step 3: Customize Labels (Optional)

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

;
```

## Step 4: Use MCP Tools for Customization

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

## `` Props

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

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `getLLMProviderDetails` | `(providerName: string, llmName?: string) => LLMProviderDetails` | Yes | Maps provider name to display info (logo, display name) |
| `labels` | `DeepPartial` | No | Override user-visible strings |
| `showConfigurationHeader` | `boolean` | No | Show/hide the configuration header |

## 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.
- `LLMProviderDetails` -- type for the return value of `getLLMProviderDetails`.
- `LLMProvider`, `Provider` -- types for provider data structures.

## Step 5: Verify

Run `/iblai-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:
   ```bash
   pnpm dev &
   npx playwright screenshot http://localhost:3000/agents//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-agent-setting` Step 2 for the full snippet.
- **Required prop**: `getLLMProviderDetails` is host-provided because
  logos and display names vary per deployment.
- **Brand guidelines**: [BRAND.md](https://raw.githubusercontent.com/iblai/vibe/refs/heads/main/BRAND.md)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [iblai](https://github.com/iblai)
- **Source:** [iblai/vibe](https://github.com/iblai/vibe)
- **License:** MIT
- **Homepage:** https://ibl.ai/join

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-iblai-vibe-iblai-agent-llm
- Seller: https://agentstack.voostack.com/s/iblai
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.