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

AI Contract Validation

Overview

Contract validation verifies that every component's data-ai-* attributes are correct, complete, and consistent. The @cortexui/testing package provides utilities for this.

Setup

npm install --save-dev @cortexui/testing

// vitest.config.ts or jest.config.ts
import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: { environment: 'jsdom' }
});

validateAIContract()

import { validateAIContract } from '@cortexui/testing';

test('save button has valid AI contract', () => {
  render(
    <button
      data-ai-role="action"
      data-ai-id="save-profile"
      data-ai-action="save-profile"
      data-ai-state="idle"
    >
      Save
    </button>
  );

  const btn = screen.getByRole('button');
  const result = validateAIContract(btn);

  expect(result.valid).toBe(true);
  expect(result.errors).toHaveLength(0);
});

What It Validates

data-ai-role is a valid role
data-ai-id is present and kebab-case
data-ai-action is present on action roles
data-ai-state is a valid state
data-ai-field-type is present on field roles
No duplicate data-ai-id values on the page

✦

Best Practice

Run contract validation in CI. A component that passes visual tests but fails contract validation will break AI agents that depend on it.

CI Integration

# .github/workflows/test.yml
- name: Test
  run: npm test
# The validateAIContract tests run as part of your normal test suite