Live CortexUI Surface

This block renders live CortexUI contract metadata in the docs DOM so AI View can inspect real machine-readable elements instead of only code examples.

AI View can now inspect a live status region, form fields, actions, and table entities on every docs page.

AI-addressable docs entities
Item	State
Search docs	Ready
Inspect metadata	Visible in AI View

Tabs

A tabbed interface for switching between content sections.

Overview

Tabs organize content into panels, one visible at a time. Each tab is a nav-item with data-ai-state="selected" on the active tab. AI agents can identify which tab is active and switch tabs by clicking non-selected tabs.

Props

Prop	Type	Default	Description
tabs	`Tab[]`	required	Array of `{ id, label, content }`
activeTab	`string`	required	ID of active tab
onChange	`(id: string) => void`	required	Tab change handler

AI Contract

<div data-ai-role="section" data-ai-section="profile-tabs">
  <nav>
    <button
      data-ai-role="nav-item"
      data-ai-id="tab-overview"
      data-ai-action="switch-tab-overview"
      data-ai-state="selected"
    >Overview</button>
    <button
      data-ai-role="nav-item"
      data-ai-id="tab-settings"
      data-ai-action="switch-tab-settings"
      data-ai-state="idle"
    >Settings</button>
  </nav>
  <div><!-- active tab content --></div>
</div>

Examples

const [activeTab, setActiveTab] = useState('overview');

<Tabs
  activeTab={activeTab}
  onChange={setActiveTab}
  tabs={[
    { id: 'overview', label: 'Overview', content: <OverviewPanel /> },
    { id: 'settings', label: 'Settings', content: <SettingsPanel /> },
    { id: 'activity', label: 'Activity', content: <ActivityPanel /> }
  ]}
/>

✦

Best Practice

Use descriptive tab IDs that reflect content: overview, settings, activity — not tab-1, tab-2. AI agents use these to navigate to the right panel.

Accessibility