Last updated

/iblai-vibe-agent-disclaimer

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

Add the agent Disclaimers tab -- a two-column layout with a User Agreement card (permission-gated) and an Advisory section for managing agent disclaimers. This is one tab in the wider agent-settings family. All tabs share the same AgentSettingsProvider wrapper.

Disclaimers Tab
Disclaimers Tab

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 AgentDisclaimersTab

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

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

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

With Markdown rendering

Pass a renderContent function to render disclaimer text as rich content instead of plain text:

import ReactMarkdown from "react-markdown";

<AgentDisclaimersTab
  renderContent={(content) => <ReactMarkdown>{content}</ReactMarkdown>}
/>;

Step 3: Customize Labels (Optional)

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

<AgentDisclaimersTab
  labels={{
    header: { title: "Mentor disclaimers" },
  }}
/>;

Step 4: Use MCP Tools for Customization

get_component_info("AgentDisclaimersTab")
get_component_info("AgentSettingsProvider")

<AgentDisclaimersTab> Props

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

PropTypeRequiredDescription
labelsDeepPartial<DisclaimersTabLabels>NoOverride user-visible strings
defaultDisclaimerContentstringNoDefault text shown when no user agreement exists yet
renderContent(content: string) => ReactNodeNoRender disclaimer/advisory as rich text (e.g., Markdown). Defaults to plain text

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

  • DisclaimersTabLabels -- type for the full label bundle.

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/<id>/disclaimer 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)
  • Shared provider: AgentSettingsProvider must wrap the route at a layout level. See /iblai-vibe-agent-setting Step 2 for the full snippet.
  • Brand guidelines: BRAND.md

Copyright Β© ibl.ai | support@iblai.zendesk.com