/iblai-vibe-agent-api

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

Add the agent API tab -- the API keys an app uses to call the agent from code. Scope: per organization. The tab sits in the agent's settings, but the keys are the organization's Platform API Tokens (platform_key-scoped): the same list shows on every agent, and a key works for any agent the key's owner can use. The tab is a paged table (10 keys per page) with Create New and a delete action per row. This is one tab in the agent-settings family indexed by /iblai-vibe-agent; it shares the AgentSettingsProvider wrapper with every other tab.

Keys -- name, created and expiry dates ("N/A" when a key never expires). The list and the buttons need the user's /apitokens/ grants (Step 2).

Create API Key -- a name (letters, numbers, hyphens and underscores) and an optional expiry date.

API Key -- Submit shows the secret once, with a copy button. It cannot be retrieved again; the list then jumps back to page 1.

Delete API Key -- the trash icon asks for confirmation. Anything using the key stops working at once.

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

Prerequisites

• Auth set up (/iblai-vibe-auth, or vibe-starter).
• AgentSettingsProvider wraps the route (/iblai-vibe-agent §1).
• @iblai/iblai-js@^2.62.1 (resolves @iblai/web-containers 1.62.1). Check with pnpm why @iblai/web-containers.
• A real agent UUID. Ask the user; never invent one.
• The signed-in user needs the organization's API-token grants (org admins have them).

Step 1: Check Environment

Look for iblai.env in the project root with PLATFORM, DOMAIN, and TOKEN. If it is missing, 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 AgentApiTab

The table and buttons are gated on the RBAC grants /apitokens/#list and /apitokens/#create, read from the provider's rbacPermissions -- even with enableRBAC={false}. Without them the tab says "You do not have permission to view API keys" (or "No API keys found") and Create New never shows. Load the grants and pass them to a nested provider:

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

import { useEffect, useState } from "react";
import {
  AgentApiTab,
  AgentSettingsProvider,
  useAgentSettings,
} from "@iblai/iblai-js/web-containers/next";
import { useGetRbacPermissionsMutation } from "@iblai/iblai-js/data-layer";

export default function AgentApiPage() {
  const settings = useAgentSettings();
  const [grants, setGrants] = useState<object>({});
  const [getRbacPermissions] = useGetRbacPermissionsMutation();

  useEffect(() => {
    getRbacPermissions({
      requestBody: {
        platform_key: settings.tenantKey,
        resources: ["/apitokens/"],
      },
    })
      .unwrap()
      .then((permissions) => setGrants({ ...permissions }))
      .catch(() => {});
  }, [settings.tenantKey, getRbacPermissions]);

  return (
    <div className="flex h-full flex-col bg-white">
      <AgentSettingsProvider {...settings} rbacPermissions={grants}>
        <AgentApiTab />
      </AgentSettingsProvider>
    </div>
  );
}

If your layout already loads /apitokens/ grants into the provider, mount <AgentApiTab /> directly. To put create and delete behind a paywall or trial check, pass executeGatedAction on the provider; the tab runs both through it.

Step 3: Customize Labels (Optional)

The tab renders with the default agent-facing copy (AGENT_API_TAB_LABELS, localized through the SDK's i18n). Pass a partial labels object to change any string:

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

<AgentApiTab
  labels={{
    header: { title: "API keys" },
    actions: { createNew: "New key" },
  }}
/>;

Label groups (ApiTabLabels): header (title, description), infoBox, disclaimer (lineOne, lineTwo), table (column headings, emptyState, noPermission, deleteAriaLabel, notAvailable), actions.createNew, createModal (title, field labels, validation messages, buttons, toasts), deleteModal (title, confirmation, warning, buttons, toasts), and apiKeyModal (the one-time reveal: title, descriptions, copy button labels).

Step 4: Use MCP Tools for Customization

get_component_info("AgentApiTab")
get_component_info("AgentSettingsProvider")

<AgentApiTab> Props

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

Identity, grants and the gate come from AgentSettingsProvider (tenantKey, username, rbacPermissions, executeGatedAction).

Related Exports

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

• AGENT_API_TAB_LABELS -- the default label bundle.
• AgentApiTabProps, ApiTabLabels, ApiKey -- types.

How it saves

Keys are addressed by name. Deleting the last key on a page steps back a page.

Platform data

REST twin: /iblai-api-token (Platform API Tokens, including mode and token-scoped policies, which this tab does not expose).

Step 5: 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:

1. pnpm build -- must pass with zero errors.
2. pnpm test -- vitest must pass.
3. Touch test /agents/<uuid>/api in the browser as /iblai-vibe-ops-test says, signed in as an org admin: the key table and Create New render; create a key, copy it, then delete it; read the console; check the phone width.

Important Notes

• Organization keys, not agent keys: creating a key here creates a Platform API Token for the whole organization, and deleting one breaks every app that uses it, whichever agent it calls.
• Shown once: the secret appears only in the reveal dialog; store it then, server-side only (e.g. IBLAI_API_KEY in .env.local), never in client code or git.
• No table or button? The /apitokens/ grants are missing (Step 2).
• Shared provider: mount AgentSettingsProvider once at the layout level (/iblai-vibe-agent §1). The nested provider in Step 2 replaces rbacPermissions for this tab with the /apitokens/ grants; spread in the layout's grants if you have any.
• Peer deps: sonner and @iblai/iblai-web-mentor (pnpm add sonner @iblai/iblai-web-mentor).
• Brand guidelines: BRAND.md