C
CortexUI

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
ItemState
Search docsReady
Inspect metadataVisible in AI View

Navigation Flows Pattern

Overview

AI agents navigate between pages to complete multi-step tasks. CortexUI provides screen context so agents always know where they are.

How Agents Navigate

// Check current screen
const ctx = window.__CORTEX_UI__.getScreenContext();
// { screen: "users-list", entity: "user" }

// Navigate to user detail
const navItem = document.querySelector('[data-ai-id="nav-users"]');
navItem.click(); // or follow href

// After navigation, verify
const newCtx = window.__CORTEX_UI__.getScreenContext();
// { screen: "user-detail", entity: "user", entityId: "user-123" }

Breadcrumbs

Annotate breadcrumbs as nav-items:

<nav data-ai-role="section" data-ai-section="breadcrumbs">
  <a data-ai-role="nav-item" data-ai-id="nav-home" href="/">Home</a>
  <a data-ai-role="nav-item" data-ai-id="nav-users" href="/users">Users</a>
  <span data-ai-role="nav-item" data-ai-state="selected">Jane Doe</span>
</nav>
ℹ
Note

The active breadcrumb should have data-ai-state="selected" even if it's not clickable. This tells the agent it represents the current location.

Related