Build Websites Optimized for Search & AI Agents.

Stop writing boilerplate schema markup. Use our open-source headless components to build accessible UIs that automatically compile into an unified JSON-LD Knowledge Graph for Next-Gen SEO and LLM ingestion.

Explore Pipeline Diagram↓Browse Docs/api/graph.json ↗
● Architecture Flow

Source to Graph & UI

Explore how Contextual UI unifies data ingestion, SSOT schema validation, and multi-channel delivery across React components, Schema.org @graph JSON-LD, and structured AI agent feeds.

For:

Contextual Engine —Validates connector payloads, binds metadata, and synthesizes data into UI contexts and connected JSON-LD graphs.

React Flow
● Core Foundations

Architecture & Core Concepts

Explore how Contextual UI combines unified schema definitions, sitewide Knowledge Graphs, hierarchical scoping, and headless Radix primitives.

Single Source of Truth (SSOT)

Define your site schema once in Zod. Automatically generate TypeScript types, runtime validation, and Schema.org JSON-LD with zero drift.

Explore Registries in Docs

1. Define Once

Compose Schema.org registries (websiteRegistry, faqRegistry) and custom Zod schemas.

2. Auto Type Inference

Derive 100% type-safe models via InferData<typeof siteSchema> with zero manual duplication.

3. Zero Drift Sync

Connector data automatically keeps headless React UI components and SEO JSON-LD graphs in sync.

data/site.schema.ts
SSOT Contract
export const siteSchema = defineSchema({
  organization: organizationRegistry(),
  website: websiteRegistry(),
  faq: faqRegistry(),
});

// TypeScript type derived automatically
export type SiteData = InferData<typeof siteSchema>;
● Runtime ValidatedSchema.org @graph Ready

Global Knowledge Graph

Entities, route documents, and component metadata compile into a single referentially-linked Schema.org @graph. Exposed sitewide for AI agents, LLM pipelines, and search bots.

/api/graph.jsonVisualizer Demo

Referential @id Linking

Entities reference each other with canonical URIs (#website, #organization) forming a true Semantic Web graph.

Agent-Ready API Endpoint

Exposes /api/graph.json so AI agents (Perplexity, ChatGPT Search, Claude) consume clean structured data without parsing messy DOM.

Zero Scraping Fragility

Eliminates scraper breaks from markup refactors, client hydration delays, and costly LLM token waste.

GET /api/graph.json
JSON-LD @graph
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://contextual.site/#website",
      "publisher": { "@id": "https://contextual.site/#org" }
    },
    {
      "@type": "Organization",
      "@id": "https://contextual.site/#org"
    }
  ]
}
● Live AI FeedExplore visualizer demo→

Global vs Route Metadata

Distinguish between domain-level entities (WebSite, Organization), route documents (WebPage), and UI components without prop drilling.

Read Scoping Guide
1

Domain Scope

<ContextualSite>

Mounted at root app/layout.tsx. Injects global entities like Organization, WebSite, and sitewide navigations.

2

Route Scope

<WebPage>

Wraps individual route pages (<WebPage id="docs">). Scopes canonical URLs, route titles, descriptions, and breadcrumb trails to the active document.

3

Component Scope

<Faq> / <Breadcrumb>

Headless primitives that consume typed data directly from context, render accessible UI, and attach microdata fragments to the parent page node.

Why it matters: Isolating domain, route, and component contexts prevents metadata leakage across pages while maintaining global entity links throughout the Knowledge Graph.

Headless & Radix Powered

Unstyled, accessible UI primitives built with Radix UI and the asChild pattern. Full styling freedom with Tailwind CSS or any design system, with automated Schema.org markup.

View Components

Radix asChild Pattern

Slot into your custom button, link, Next.js <Link>, or motion component without extra wrapper divs.

Design System Agnostic

100% compatible with Tailwind CSS, Tailwind v4, CSS Modules, Shadcn UI, or custom enterprise design tokens.

WAI-ARIA Accessibility

Full keyboard navigation (Tab, Enter, Space, Arrows), screen reader announcements, and robust ARIA states out of the box.

Automated Microdata

Components quietly emit valid Schema.org microdata and JSON-LD behind the scenes without polluting your JSX styling.

Why it matters: You get top-tier SEO and agentic structured data without compromising your team's UI design system, component libraries, or frontend styling architecture.

● FAQ

Frequently Asked Questions

Frequently asked questions powered by Contextual UI and Schema.org semantic structured data.