Schema & Knowledge Graph
Contextual UI uses a Single Source of Truth (SSOT) schema definition to automatically compile and serve a referentially-linked Schema.org @graph for search engines and AI agents.
Single Source of Truth Schema
site.schema.tsCentral schema definition combining standard Zod types with pre-built schema registries ( websiteRegistry, faqRegistry, navbarRegistry ) that power both runtime UI and semantic metadata.
import {
defineSchema,
organizationRegistry,
websiteRegistry,
webpageRegistry,
navbarRegistry,
faqRegistry,
footerRegistry,
formRegistry,
sectionRegistry,
collectionRegistry,
} from 'contextual-ui/server';
import { z } from 'zod';
export const siteSchema = defineSchema({
organization: organizationRegistry(),
website: websiteRegistry(),
webpage: webpageRegistry(),
navbar: navbarRegistry(),
footer: footerRegistry(),
faq: faqRegistry(),
forms: formRegistry(),
sections: sectionRegistry(),
collections: collectionRegistry(),
announcement: {
schema: z.object({
enabled: z.boolean(),
message: z.string().describe('Announcement Banner Text'),
}),
},
});Compiled Knowledge Graph JSON
The generated Schema.org @graph compiled from the SSOT schema and connector data, served sitewide for search crawlers and AI agents. It can be consumed directly from the auto-generated endpoint /api/graph.json
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://contextual.site/#organization",
"name": "Tasuku Studio",
"url": "https://tasuku.io",
"logo": "https://contextual.site/images/onigiri_logo.svg",
"description": "Creator and maintainer of Contextual UI.",
"sameAs": [
"https://github.com/orchidtexture",
"https://twitter.com/orchidtexture"
]
},
{
"@type": "WebSite",
"@id": "https://contextual.site/#website",
"name": "Contextual UI",
"url": "https://contextual.site",
"description": "A headless UI and semantic SEO Knowledge Graph library.",
"publisher": {
"@id": "https://contextual.site/#organization"
}
},
{
"@type": "WebPage",
"@id": "https://contextual.site/#webpage:home",
"name": "Contextual UI - Home",
"url": "https://contextual.site/",
"description": "A headless UI and semantic SEO Knowledge Graph library.",
"isPartOf": {
"@id": "https://contextual.site/#website"
},
"hasPart": [
{
"@id": "https://contextual.site/#navbar"
},
{
"@id": "https://contextual.site/#section:home:hero"
},
{
"@id": "https://contextual.site/#section:home:data-pipeline"
},
{
"@id": "https://contextual.site/#section:home:foundations"
},
{
"@id": "https://contextual.site/#section:home:ssot"
},
{
"@id": "https://contextual.site/#section:home:knowledge-graph"
},
{
"@id": "https://contextual.site/#section:home:metadata-scoping"
},
{
"@id": "https://contextual.site/#section:home:headless-radix"
},
{
"@id": "https://contextual.site/#section:home:faq-section"
},
{
"@id": "https://contextual.site/#itemlist:home:pipeline-stages"
},
{
"@id": "https://contextual.site/#itemlist:home:ssot-features"
},
{
"@id": "https://contextual.site/#itemlist:home:knowledge-graph-features"
},
{
"@id": "https://contextual.site/#itemlist:home:metadata-scoping-features"
},
{
"@id": "https://contextual.site/#itemlist:home:headless-features"
},
{
"@id": "https://contextual.site/#faq"
},
{
"@id": "https://contextual.site/#footer"
}
]
},
{
"@type": "WebPage",
"@id": "https://contextual.site/#webpage:docs",
"name": "Documentation - Contextual UI",
"url": "https://contextual.site/docs",
"description": "Learn how to use Contextual UI.",
"isPartOf": {
"@id": "https://contextual.site/#website"
},
"hasPart": [
{
"@id": "https://contextual.site/#navbar"
},
{
"@id": "https://contextual.site/#section:docs:schema-registries"
},
{
"@id": "https://contextual.site/#section:docs:auto-form"
},
{
"@id": "https://contextual.site/#section:docs:create-form"
},
{
"@id": "https://contextual.site/#section:docs:connectors"
},
{
"@id": "https://contextual.site/#section:docs:helpers"
},
{
"@id": "https://contextual.site/#section:docs:sitemap-helper"
},
{
"@id": "https://contextual.site/#section:docs:robots-helper"
},
{
"@id": "https://contextual.site/#section:docs:showcase-contextual-site"
},
{
"@id": "https://contextual.site/#section:docs:showcase-webpage"
},
{
"@id": "https://contextual.site/#section:docs:showcase-navbar"
},
{
"@id": "https://contextual.site/#section:docs:showcase-footer"
},
{
"@id": "https://contextual.site/#section:docs:showcase-breadcrumb"
},
{
"@id": "https://contextual.site/#section:docs:showcase-faq"
},
{
"@id": "https://contextual.site/#section:docs:showcase-section"
},
{
"@id": "https://contextual.site/#section:docs:showcase-collection"
},
{
"@id": "https://contextual.site/#section:docs:showcase-content"
},
{
"@id": "https://contextual.site/#itemlist:docs:quickstart-steps"
},
{
"@id": "https://contextual.site/#itemlist:docs:schema-registries-list"
},
{
"@id": "https://contextual.site/#action:form-contact-sales"
},
{
"@id": "https://contextual.site/#footer"
}
]
},
{
"@type": "WebPage",
"@id": "https://contextual.site/#webpage:privacy",
"name": "Privacy Policy - Contextual UI",
"url": "https://contextual.site/privacy",
"description": "Privacy policy and data protection information for Contextual UI.",
"isPartOf": {
"@id": "https://contextual.site/#website"
},
"hasPart": [
{
"@id": "https://contextual.site/#navbar"
},
{
"@id": "https://contextual.site/#section:privacy:privacy-policy"
},
{
"@id": "https://contextual.site/#footer"
}
]
},
{
"@type": "WebPage",
"@id": "https://contextual.site/#webpage:terms",
"name": "Terms of Service - Contextual UI",
"url": "https://contextual.site/terms",
"description": "Terms of service and usage agreements for Contextual UI.",
"isPartOf": {
"@id": "https://contextual.site/#website"
},
"hasPart": [
{
"@id": "https://contextual.site/#navbar"
},
{
"@id": "https://contextual.site/#section:terms:terms-of-service"
},
{
"@id": "https://contextual.site/#footer"
}
]
},
{
"@type": "SiteNavigationElement",
"@id": "https://contextual.site/#navbar",
"isPartOf": {
"@id": "https://contextual.site/#website"
},
"name": "Contextual",
"url": "https://contextual.site/",
"hasPart": [
{
"@type": "SiteNavigationElement",
"name": "Home",
"url": "https://contextual.site/"
},
{
"@type": "SiteNavigationElement",
"name": "Docs",
"url": "https://contextual.site/docs"
}
]
},
{
"@type": "WPFooter",
"@id": "https://contextual.site/#footer",
"isPartOf": {
"@id": "https://contextual.site/#website"
},
"name": "Contextual",
"description": "Headless UI components with built-in Agentic AI infrastructure and Schema.org SEO.",
"url": "https://contextual.site/",
"copyrightHolder": {
"@id": "https://contextual.site/#organization"
},
"copyrightYear": 2026,
"hasPart": [
{
"@type": "SiteNavigationElement",
"name": "Docs",
"url": "https://contextual.site/docs"
},
{
"@type": "SiteNavigationElement",
"name": "/api/graph.json ↗",
"url": "https://contextual.site/api/graph.json"
},
{
"@type": "SiteNavigationElement",
"name": "Tasuku Studio",
"url": "https://tasuku.io"
},
{
"@type": "SiteNavigationElement",
"name": "GitHub Repository",
"url": "https://github.com/orchidtexture/contextual-ui"
},
{
"@type": "SiteNavigationElement",
"name": "Privacy Policy",
"url": "https://contextual.site/privacy"
},
{
"@type": "SiteNavigationElement",
"name": "Terms of Service",
"url": "https://contextual.site/terms"
}
]
},
{
"@type": "FAQPage",
"@id": "https://contextual.site/#faq",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
},
"mainEntity": [
{
"@type": "Question",
"name": "What is Contextual UI?",
"acceptedAnswer": {
"@type": "Answer",
"text": "An open-source library that provides the building blocks for next-gen AI-ready websites."
}
},
{
"@type": "Question",
"name": "How does semantic SEO work with Contextual UI?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Contextual UI automatically injects structured JSON-LD graphs for search engines and AI agents."
}
},
{
"@type": "Question",
"name": "Can I use custom Zod schemas for CMS validation?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, any Zod schema can be plugged into the CMS dashboard and form generator."
}
},
{
"@type": "Question",
"name": "Why use Contextual UI for building websites when AI is getting better and better?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Well, libraries like Contextual UI are the kind of thing that make AI better, so lets use it!"
}
}
]
},
{
"@type": "ContactAction",
"@id": "https://contextual.site/#action:form-contact-sales",
"name": "Contact Sales & Support",
"description": "Send our team a direct message. Submissions are dynamically validated and Agentic AI ready.",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://contextual.site/api/contact",
"httpMethod": "POST",
"contentType": "application/json"
},
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
},
"object": [
{
"@type": "PropertyValueSpecification",
"valueName": "name",
"valueRequired": true,
"valueMinLength": 2
},
{
"@type": "PropertyValueSpecification",
"valueName": "email",
"valueRequired": true,
"valuePattern": "^.+@.+\\..+$"
},
{
"@type": "PropertyValueSpecification",
"valueName": "topic",
"valueRequired": true,
"valueOption": [
"general",
"sales",
"support",
"partnership"
]
},
{
"@type": "PropertyValueSpecification",
"valueName": "message",
"valueRequired": true,
"valueMinLength": 10
}
]
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:hero",
"name": "Build Websites Optimized for Search & AI Agents.",
"description": "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.",
"text": "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.\n\nExplore Pipeline Diagram\n\nBrowse Docs\n\n/api/graph.json ↗",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:data-pipeline",
"name": "Source to Graph & UI",
"description": "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.",
"url": "https://contextual.site/#data-pipeline",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
},
"mainEntity": [
{
"@id": "https://contextual.site/#itemlist:home:pipeline-stages"
}
]
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:foundations",
"name": "Architecture & Core Concepts",
"description": "Explore how Contextual UI combines unified schema definitions, sitewide Knowledge Graphs, hierarchical scoping, and headless Radix primitives.",
"url": "https://contextual.site/#foundations",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:ssot",
"name": "Single Source of Truth (SSOT)",
"description": "Define your site schema once in Zod. Automatically generate TypeScript types, runtime validation, and Schema.org JSON-LD with zero drift.",
"text": "export const siteSchema = defineSchema({\n organization: organizationRegistry(),\n website: websiteRegistry(),\n faq: faqRegistry(),\n});\n\n// TypeScript type derived automatically\nexport type SiteData = InferData<typeof siteSchema>;",
"url": "https://contextual.site/#ssot",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
},
"mainEntity": [
{
"@id": "https://contextual.site/#itemlist:home:ssot-features"
}
]
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:knowledge-graph",
"name": "Global Knowledge Graph",
"description": "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.",
"text": "{\n \"@context\": \"https://schema.org\",\n \"@graph\": [\n {\n \"@type\": \"WebSite\",\n \"@id\": \"https://contextual.site/#website\",\n \"publisher\": { \"@id\": \"https://contextual.site/#org\" }\n },\n {\n \"@type\": \"Organization\",\n \"@id\": \"https://contextual.site/#org\"\n }\n ]\n}",
"url": "https://contextual.site/#knowledge-graph",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
},
"mainEntity": [
{
"@id": "https://contextual.site/#itemlist:home:knowledge-graph-features"
}
]
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:metadata-scoping",
"name": "Global vs Route Metadata",
"description": "Distinguish between domain-level entities (WebSite, Organization), route documents (WebPage), and UI components without prop drilling.",
"text": "Why it matters: Isolating domain, route, and component contexts prevents metadata leakage across pages while maintaining global entity links throughout the Knowledge Graph.",
"url": "https://contextual.site/#metadata-scoping",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
},
"mainEntity": [
{
"@id": "https://contextual.site/#itemlist:home:metadata-scoping-features"
}
]
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:headless-radix",
"name": "Headless & Radix Powered",
"description": "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.",
"text": "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.",
"url": "https://contextual.site/#headless-radix",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
},
"mainEntity": [
{
"@id": "https://contextual.site/#itemlist:home:headless-features"
}
]
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:home:faq-section",
"name": "Frequently Asked Questions",
"description": "Frequently asked questions powered by Contextual UI and Schema.org semantic structured data.",
"url": "https://contextual.site/#faq",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
},
"mainEntity": [
{
"@id": "https://contextual.site/#faq"
}
]
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:privacy:privacy-policy",
"name": "Privacy Policy",
"description": "Contextual UI is an open-source framework and does not track personal browsing activity or collect unsolicited personal data. All schema graphs and user configurations remain strictly under your control.",
"text": "Contextual UI is an open-source framework and does not track personal browsing activity or collect unsolicited personal data. All schema graphs and user configurations remain strictly under your control.\n\nData Storage\n\nData processed through Contextual UI connectors is executed directly on your own infrastructure or hosting provider.",
"isPartOf": {
"@id": "https://contextual.site/#webpage:privacy"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:terms:terms-of-service",
"name": "Terms of Service",
"description": "Contextual UI is open-source software distributed under the MIT license.",
"text": "Contextual UI is open-source software distributed under the MIT license.",
"isPartOf": {
"@id": "https://contextual.site/#webpage:terms"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:schema-registries",
"name": "Schema Registries & defineSchema",
"description": "defineSchema allows you to compose pre-built, type-validated Schema.org registries and custom Zod schemas into a unified contract. Each registry automatically validates runtime data, generates compile-time TypeScript types, and compiles referentially linked Schema.org @graph JSON-LD nodes.",
"url": "https://contextual.site/#schemas",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:auto-form",
"name": "AutoForm & formRegistry",
"description": "<AutoForm> unifies Headless CMS form definitions, dynamic in-memory Zod validation, and machine-readable Schema.org PotentialAction JSON-LD graphs for AI agents. Define your form structure in your CMS or connector, and render dynamic accessible UI without writing repetitive React field boilerplate.",
"text": "data (FormData, Yes (or form)): Ingested forms data from connector/registry (single FormEntity or FormEntity[] array). \nformId (string, Optional): Matches a specific form by its id when data contains multiple forms. \nform (FormEntity, Optional): Explicit form entity object override (bypassing data lookup). \ncomponents (AutoFormCustomComponents, Optional): Custom UI slots for Form, Field, Label, Input, TextArea, Select, Checkbox, ErrorMessage, Submit, Section. \naction (string, Optional): Overrides the form submit endpoint (defaults to form.endpoint). \nmethod ('POST' | 'GET' | 'PUT' | 'PATCH', Optional): Overrides HTTP method (defaults to form.method or \"POST\"). \nonSubmit ((values, form) => void | Promise<void>, Optional): Custom submit handler. If omitted, AutoForm performs a JSON POST fetch to the endpoint automatically. \nonSuccess ((result) => void, Optional): Callback invoked after successful form submission. \nonError ((error: ZodError) => void, Optional): Callback invoked when client-side validation fails. \nsubmitLabel (string, Optional): Overrides the submit button text (defaults to form.submitLabel or \"Submit\").",
"url": "https://contextual.site/#auto-form",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:create-form",
"name": "createForm (Static Form Factory)",
"description": "The createForm factory generates headless, strictly type-safe React form components directly from a hardcoded Zod schema. Ideal for developer-centric custom forms with fixed field requirements, providing automatic blur validation, field name autocompletion, and zero-state boilerplate.",
"text": "Form.Root (onSubmit, onError?, className?, id?): Top-level context provider for static forms. Manages state, errors, blur validation, and async lifecycle. \nForm.Field (name: keyof Schema, className?): Scopes field context by name. Strictly type-checked against schema keys at compile time. \nForm.Label (asChild?, className?, style?): Accessible <label> automatically bound to the input through the field htmlFor attribute. \nForm.Input (asChild?, ...InputHTMLAttributes): Controlled input element bound to field value, onChange, onBlur validation, and data-invalid attribute. \nForm.TextArea (asChild?, ...TextareaHTMLAttributes): Controlled multi-line textarea with automatic onBlur validation and data-invalid attribute binding. \nForm.ErrorMessage (asChild?, className?, style?): Conditionally renders active validation error strings for the scoped field. \nForm.Submit (asChild?, ...ButtonHTMLAttributes): Submit button automatically disabled while an async onSubmit promise is pending. \nForm.Section (title?, description?, asChild?, className?): Semantic container for grouping related fields with an optional title and description header.",
"url": "https://contextual.site/#create-form",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:connectors",
"name": "Connectors & Data Layer",
"description": "Connectors decouple your data sources (Static JSON, Headless CMS, Database ORMs, or REST APIs) from your React UI components and SEO knowledge graphs. Any source that fulfills the simple contract can be plugged into createContextualApp.",
"url": "https://contextual.site/#connectors",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:helpers",
"name": "Helpers: siteApp.getMetadata()",
"description": "Next.js Metadata helper that eliminates duplication between your data connector, Schema.org JSON-LD graphs, and HTML <head> meta tags. Since siteApp already knows each page's title, description, canonical URL, and base URL from your Single Source of Truth (SSOT), siteApp.getMetadata(pageId) generates fully typed, route-accurate Next.js Metadata in a single line.",
"text": "pageIdOrOptions (string | GetMetadataOptions): Page identifier (e.g. \"privacy\", \"home\") or options object. Defaults to \"home\" or root website when omitted. \noverrides (Partial<Metadata>): Custom metadata overrides (e.g. title, openGraph images, twitter card, keywords, robots). \nreturns (Promise<Metadata>, required): Next.js App Router-compatible Metadata object with metadataBase, title, description, alternates, openGraph, and twitter.",
"url": "https://contextual.site/#helpers",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:sitemap-helper",
"name": "Helpers: siteApp.getSitemap() & XML Generation",
"description": "Automated sitemap generator that derives route URLs directly from your connector schema (webpage: [...]). Eliminates maintaining hardcoded XML files or duplicate route lists. Provides typed Next.js App Router metadata, web-standard route handlers, and static XML formatting.",
"text": "options.baseUrl (string): Base canonical domain (e.g. \"https://example.com\"). Defaults to siteApp.baseUrl or data.website.url. \noptions.exclude (string[]): Paths or glob patterns to omit (e.g. [\"/cms\", \"/cms/*\", \"/admin\", \"/studio*\"]). \noptions.additionalRoutes (SitemapItem[]): Additional routes or dynamic records outside the primary schema to append with deduplication. \noptions.defaultPriority (number): Default priority (0.0 to 1.0). Root \"/\" defaults to 1.0, subpages default to 0.8. \noptions.defaultChangeFrequency (SitemapChangeFrequency): \"always\" | \"hourly\" | \"daily\" | \"weekly\" | \"monthly\" | \"yearly\" | \"never\". Root defaults to \"daily\", subpages to \"weekly\". \nreturns (getSitemap) (Promise<MetadataRoute.Sitemap>, required): Array of items typed directly for Next.js App Router app/sitemap.ts export. \nreturns (generateSitemapXml) (Promise<string>, required): RFC-compliant XML string conforming to Sitemaps 0.9 specification with entity escaping. \nreturns (createSitemapHandler) ({ GET: (req: Request) => Promise<Response> }, required): Standard Web Response route handler for Next.js, Remix, Astro, or TanStack.",
"url": "https://contextual.site/#sitemap",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:robots-helper",
"name": "Helpers: siteApp.getRobots() & AI Agent Controls",
"description": "Configures search engine indexing policies, automatically links your canonical sitemap and host, and provides first-class controls for LLM search bots (PerplexityBot) and AI training crawlers (GPTBot, ClaudeBot, Google-Extended).",
"text": "options.baseUrl (string): Base canonical domain. Used to formulate \"Sitemap: ${baseUrl}/sitemap.xml\" and \"Host: hostname\". \noptions.disallow (string | string[]): Paths forbidden for standard crawlers (e.g. [\"/cms\", \"/cms/\"]). \noptions.allow (string | string[]): Paths explicitly permitted (defaults to \"/\"). \noptions.aiRobots (AiOptions): Preset policies for AI training and search bots (GPTBot, ClaudeBot, PerplexityBot, Google-Extended, CCBot, Bytespider). \noptions.sitemap (string | string[] | boolean): Sitemap URL directive. Defaults to true (\"${baseUrl}/sitemap.xml\"). Set false to suppress. \nreturns (getRobots) (Promise<MetadataRoute.Robots>, required): Structured object typed directly for Next.js App Router app/robots.ts export. \nreturns (generateRobotsTxt) (Promise<string>, required): RFC 9309 compliant robots.txt plain-text representation. \nreturns (createRobotsHandler) ({ GET: (req: Request) => Promise<Response> }, required): Standard Web Response route handler for Next.js, Remix, Astro, or TanStack.",
"url": "https://contextual.site/#robots",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-contextual-site",
"name": "<ContextualSite /> Provider",
"description": "The root provider that coordinates domain-level data distribution to all contextual UI components. In single-page apps (SPAs), it compiles and injects the unified Schema.org JSON-LD @graph.",
"text": "data (SiteData, required -> @graph): Domain-level data object providing website, navbar, footer, and FAQ configurations. \ndata.website (WebsiteData -> WebSite): Site-level metadata including name, url, and meta description. \ndata.navbar (NavbarData -> SiteNavigationElement): Navigation brand and menu links automatically inferred by <Navbar.Root />. \ndata.footer (FooterData -> WPFooter): Footer structure, copyright, and social links automatically inferred by <Footer.Root />. \ndata.faq (FaqItem[] -> FAQPage): FAQ question-answer pairs automatically inferred by <Faq.Root />. \ngraph (ContextualGraph -> @graph): Pre-compiled Schema.org JSON-LD graph produced by siteApp.getGraph(). \nchildren (ReactNode, required): Child components rendered within ContextualSite context.\n\nimport { siteApp } from '@/data/site.server';\nimport { ContextualSite, Navbar, Faq, Footer } from 'contextual-ui';\n\n// 1. Multi-Page Next.js (App Router)\n// In layout.tsx: distributes data down to all pages\nexport default async function RootLayout({ children }: { children: React.ReactNode }) {\n const data = await siteApp.fetchData();\n return (\n <html lang=\"en\">\n <body>\n <ContextualSite data={data}>\n {children}\n </ContextualSite>\n </body>\n </html>\n );\n}\n\n// 2. Single Page Applications (SPAs / Landing Pages)\n// In App.tsx: automatically compiles and injects the unified Schema.org JSON-LD graph\nexport function SinglePageApp() {\n return (\n <ContextualSite schema={siteSchema} data={siteData}>\n <Navbar.Root />\n <main>\n <Faq.Root />\n </main>\n <Footer.Root />\n </ContextualSite>\n );\n}\n\nWrap your root layout with ContextualSite to provide data across all components.\n\nUnified Schema.org @graph automatically injected in a single script tag for SPAs.",
"url": "https://contextual.site/#contextual-site",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-webpage",
"name": "<WebPage /> Wrapper",
"description": "The route-level React Server Component that coordinates page-level Schema.org metadata and automatically injects the canonical @graph script tag for that specific URL.",
"text": "app (ContextualApp -> @graph): ContextualApp instance to compile and inject the route-specific Schema.org JSON-LD graph. \nname (string -> WebPage.name): Route-specific page title/name for search engines and AI agents. \nurl (string -> WebPage.url): Route-specific canonical pathname (e.g. \"/docs\"). \ndescription (string -> WebPage.description): Route-specific meta description. \ngraph (JsonLdGraphResult -> @graph): Pre-computed Schema.org JSON-LD graph (optional explicit override). \ndisableJsonLdScript (boolean): Disables script tag rendering when set to true.\n\nimport { siteApp } from '@/data/site.server';\nimport { WebPage } from 'contextual-ui/server';\nimport { DocsClient } from './DocsClient';\n\nexport const generateMetadata = () => siteApp.getMetadata('docs');\n\nexport default async function DocsPage() {\n const data = await siteApp.fetchData();\n\n return (\n <WebPage app={siteApp} id=\"docs\">\n <DocsClient data={data} />\n </WebPage>\n );\n}\n\nWrap individual routes in page.tsx with WebPage from contextual-ui/server.\n\nRoute-accurate Schema.org WebPage node connecting navbar, footer, and FAQ.",
"url": "https://contextual.site/#webpage",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-navbar",
"name": "Navbar",
"description": "The Navbar component renders accessible navigation structures with full semantic support.",
"text": "brand.name (string -> Brand.name): Brand or application display title. \nbrand.logo (string -> Brand.logo): Brand logo image URL or asset path. \nbrand.href (string -> Brand.url): Home link destination (defaults to \"/\"). \nlinks (NavItem[], required -> hasPart: WebPage[]): Array of top-level navigation items. \nlinks[].id (string, required): Unique identifier for item keying and accessibility. \nlinks[].label (string, required -> WebPage.name): Visible link label text. \nlinks[].href (string -> WebPage.url): Destination target URL. \nlinks[].children (NavItem[] -> hasPart: WebPage[]): Nested navigation items for dropdown submenus.\n\n<Navbar.Root data={data.navbar} className=\"flex justify-between items-center w-full\">\n <Navbar.Brand className=\"font-bold text-lg no-underline flex items-center gap-2.5\" />\n <Navbar.Links\n className=\"hidden md:flex gap-6 items-center\"\n linkClassName=\"hover:text-silver no-underline text-sm font-medium transition-colors\"\n >\n {/* Optional: Appended custom action / external link */}\n <Navbar.Link\n href=\"https://github.com/orchidtexture/contextual-ui\"\n external\n className=\"px-3 py-1.5 rounded-lg text-xs font-mono font-medium text-zinc-300 hover:text-white bg-zinc-900 border border-zinc-800\"\n >\n GitHub\n </Navbar.Link>\n </Navbar.Links>\n <Navbar.Toggle className=\"md:hidden p-2 text-zinc-400 hover:text-zinc-100 focus:outline-none cursor-pointer\" />\n <Navbar.Menu\n className=\"absolute top-16 left-[-24px] right-[-24px] md:hidden bg-zinc-950/95 backdrop-blur-xl border-b border-base p-6 flex flex-col gap-4 shadow-2xl\"\n linkClassName=\"hover:text-silver no-underline text-base font-medium transition-colors py-1\"\n />\n</Navbar.Root>\n\nReact component implementation using Navbar subcomponents.\n\nSchema.org SiteNavigationElement automatically injected in the DOM.",
"url": "https://contextual.site/#navbar",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-footer",
"name": "Footer",
"description": "The Footer component organizes structured site links, brand metadata, columnar resources, social profiles, and legal attribution with automatic Schema.org WPFooter structured data injection.",
"text": "brand.name (string -> WPFooter.name): Brand title displayed in footer. \nbrand.logo (string -> WPFooter.logo): Image URL for the brand logo. \nbrand.href (string -> WPFooter.url): Brand home URL destination. \nbrand.description (string -> WPFooter.description): Short brand mission statement or summary. \ncolumns (FooterColumn[] -> WPFooter.hasPart): Grouped multi-column link structures for site discovery. \ncolumns[].title (string, required): Header title for the column group. \ncolumns[].links (FooterLinkItem[], required -> SiteNavigationElement[]): Array of link items belonging to this column. \nlinks (FooterLinkItem[] -> WPFooter.hasPart): Flat list of primary/secondary footer navigation links. \nlegalLinks (FooterLinkItem[] -> WPFooter.hasPart): Utility and legal policy links (Privacy, Terms, Licenses). \nsocials (FooterSocialLink[] -> WPFooter.sameAs[]): Verified social media and community profile links. \ncopyright.holder (string -> copyrightHolder (Organization)): Legal entity or company holding copyright. \ncopyright.year (number | string -> copyrightYear): Copyright year (defaults to current year). \ncopyright.text (string): Custom copyright disclaimer text.\n\n<Footer.Root data={data.footer} className=\"w-full space-y-8\">\n {/* Top Section: Brand & Multi-Column Navigation */}\n <div className=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n <div className=\"md:col-span-2 space-y-3\">\n <Footer.Brand className=\"font-bold text-base no-underline flex items-center gap-2.5 text-zinc-100\">\n <img src=\"/images/onigiri_logo.svg\" alt=\"Contextual\" className=\"w-6 h-6 rounded object-contain\" />\n <span>Contextual</span>\n </Footer.Brand>\n <Footer.Description className=\"text-xs text-zinc-400 max-w-sm leading-relaxed\">\n Headless UI components with built-in Agentic AI infrastructure and Schema.org SEO.\n </Footer.Description>\n </div>\n </div>\n</Footer.Root>\n\nAccessible, schema-driven multi-column footer layout.\n\nSchema.org WPFooter automatically injected in the DOM.",
"url": "https://contextual.site/#footer",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-breadcrumb",
"name": "Breadcrumb",
"description": "The Breadcrumb component automatically injects Schema.org BreadcrumbList JSON-LD for search engine indexing while enforcing accessible semantic navigation.",
"text": "data (BreadcrumbItem[], required -> itemListElement: ListItem[]): Hierarchical array of breadcrumb step objects. \ndata[].id (string, required): Unique item identifier. \ndata[].label (string, required -> ListItem.name): Display text for the breadcrumb item. \ndata[].url (string -> ListItem.item): Destination URL (omitted for the active leaf page). \nbaseUrl (string -> ListItem.item (origin prefix)): Origin prefix (e.g. \"https://contextual.site\") for canonical Schema.org URLs.\n\n<Breadcrumb.Root data={breadcrumbData} baseUrl=\"https://contextual.site\">\n <Breadcrumb.List className=\"flex list-none p-0 m-0 gap-2 items-center text-sm\">\n {breadcrumbData.map((item, index) => (\n <Breadcrumb.Item key={item.id}>\n <Breadcrumb.Link href={item.url}>{item.label}</Breadcrumb.Link>\n </Breadcrumb.Item>\n ))}\n </Breadcrumb.List>\n</Breadcrumb.Root>\n\nAccessible breadcrumb trail implementation with list items and separators.\n\nSchema.org BreadcrumbList automatically injected in the DOM.",
"url": "https://contextual.site/#breadcrumb",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-faq",
"name": "FAQ",
"description": "The FAQ component organizes collapsible question-and-answer pairs with automatic Schema.org FAQPage structured data injection.",
"text": "data (FaqItem[], required -> mainEntity: Question[]): Array of FAQ question and answer items. \ndata[].id (string, required): Unique identifier for the FAQ item. \ndata[].question (string, required -> Question.name): The question string for users and search indexing. \ndata[].answer (string, required -> Question.acceptedAnswer.text): The accepted answer text content.\n\n<Faq.Root data={faqData}>\n {faqData.map((item) => (\n <Faq.Item key={item.id} id={item.id}>\n <Faq.Trigger>{item.question}</Faq.Trigger>\n <Faq.Content>{item.answer}</Faq.Content>\n </Faq.Item>\n ))}\n</Faq.Root>\n\nCollapsible FAQ layout with trigger buttons and content sections.\n\nSchema.org FAQPage automatically injected in the DOM.",
"url": "https://contextual.site/#faq",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-section",
"name": "<Section /> Primitive",
"description": "Semantic container component for structured content regions. Coordinates automated headings, accessible aria-labelledby attributes, Radix Slot (asChild) support, and embedded <Content /> rendering.",
"text": "data (SectionRecord -> @graph (WebPageElement)): Single Source of Truth section data (title, subtitle, description, anchor, content blocks). \nid (string -> @id): Unique section identifier. Used for aria-labelledby and DOM id fallback. \ntitle (string -> name): Explicit section title override (bypasses data.title lookup). \nsubtitle (string): Explicit section subtitle or eyebrow text override. \ndescription (string -> description): Explicit section description override. \nanchor (string -> url): DOM element anchor id used for fragment URL navigation. \nasChild (boolean): Merges section behaviors and data attributes onto its immediate child element (Radix Slot).\n\n<Section.Root data={sectionData} id=\"features\" className=\"space-y-4\">\n <Section.Title as=\"h2\" className=\"text-xl font-bold\" />\n <Section.Subtitle className=\"text-xs text-accent font-mono\" />\n <Section.Description className=\"text-sm text-zinc-400\" />\n <Section.Content className=\"space-y-3\" />\n</Section.Root>\n\nAccessible, schema-bound section layout using Section compound components.\n\nSchema.org WebPageElement automatically linked to the owning WebPage.",
"url": "https://contextual.site/#section",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-collection",
"name": "<Collection /> Primitive",
"description": "Headless list container component that renders ordered (<ol>) or unordered (<ul>) semantic collections with individual item context, stable ID tracking, and automated Schema.org ItemList markup.",
"text": "data (CollectionRecord, required -> @graph (ItemList)): Single Source of Truth collection record containing collection metadata and items array. \nordered (boolean -> itemListOrder): Renders semantic <ol> when true, <ul> when false. Sets data-ordered attribute. \nasChild (boolean): Merges collection behaviors and data attributes onto child component. \nchildren (ReactNode, required): Collection items rendered within collection context.\n\n<Collection.Root data={collectionData} ordered className=\"space-y-4\">\n {collectionData.items.map((item, index) => (\n <Collection.Item key={item.id} id={item.id} index={index} className=\"flex gap-3\">\n <span className=\"font-mono text-accent\">{index + 1}</span>\n <div>\n <Collection.Title as=\"h3\" className=\"font-semibold text-white\" />\n <Collection.Description className=\"text-sm text-zinc-400\" />\n </div>\n </Collection.Item>\n ))}\n</Collection.Root>\n\nStructured item collection rendered with semantic Collection compound components.\n\nSchema.org ItemList containing individual ListItem nodes.",
"url": "https://contextual.site/#collection",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "WebPageElement",
"@id": "https://contextual.site/#section:docs:showcase-content",
"name": "<Content /> Portable Renderer",
"description": "Universal renderer for portable, CMS-agnostic content blocks (paragraphs, headings, lists, links, callouts, and code blocks) with custom component slot overrides and plain-text extraction for AI agents.",
"text": "data (ContentInput, required -> text (extracted plain-text)): Single or array of ContentBlocks, raw markdown string, or structured Portable Text blocks. \ncomponents (ContentComponentOverrides): Custom React component slots for paragraph, heading, list, callout, code, link. \nclassName (string): Optional CSS class name for the wrapper container.\n\n<Content\n data={section.content}\n components={{\n paragraph: ({ children, role }) => (\n <p className={role === 'qualifier' ? 'text-xs text-accent italic' : 'text-sm text-zinc-300'}>\n {children}\n </p>\n ),\n code: ({ code, language }) => (\n <pre className=\"p-4 bg-zinc-900 rounded-lg font-mono text-xs text-zinc-100\">{code}</pre>\n ),\n }}\n/>\n\nRenders dynamic content blocks with custom Tailwind overrides.\n\nAll plain text from content blocks is extracted into the parent node text property.",
"url": "https://contextual.site/#content",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:pipeline-stages:source-node",
"position": 1,
"name": "Data Connector (Headless CMS & Static Data)",
"description": "Ingests raw data from any source—static files, headless CMS, Postgres, or GraphQL endpoints."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:pipeline-stages:schema-node",
"position": 2,
"name": "Single Source of Truth (Zod + Schema Registries)",
"description": "Defines runtime validation, TypeScript types, and Schema.org semantic mappings in one single place."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:pipeline-stages:engine-node",
"position": 3,
"name": "Contextual Engine (contextual-ui)",
"description": "Validates connector payloads, binds metadata, and synthesizes data into UI contexts and connected JSON-LD graphs."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:pipeline-stages:output-ui",
"position": 4,
"name": "Headless React UI (For Human Users)",
"description": "Accessible, unstyled React components consuming validated SSOT data with zero design lock-in."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:pipeline-stages:output-graph",
"position": 5,
"name": "Schema.org @graph (For Search Crawlers)",
"description": "Referentially-linked entity graph with @id URI references, enabling rich snippets and entity rank."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:pipeline-stages:output-ai",
"position": 6,
"name": "AI Agent Context (For LLMs & Autonomous Agents)",
"description": "Direct, deterministic semantic graph feeds without noisy DOM parsing, hallucinations, or bot scraping."
},
{
"@type": "ItemList",
"@id": "https://contextual.site/#itemlist:home:pipeline-stages",
"numberOfItems": 6,
"itemListElement": [
{
"@id": "https://contextual.site/#listitem:home:pipeline-stages:source-node"
},
{
"@id": "https://contextual.site/#listitem:home:pipeline-stages:schema-node"
},
{
"@id": "https://contextual.site/#listitem:home:pipeline-stages:engine-node"
},
{
"@id": "https://contextual.site/#listitem:home:pipeline-stages:output-ui"
},
{
"@id": "https://contextual.site/#listitem:home:pipeline-stages:output-graph"
},
{
"@id": "https://contextual.site/#listitem:home:pipeline-stages:output-ai"
}
],
"name": "Contextual Data Pipeline Stages",
"itemListOrder": "https://schema.org/ItemListOrderAscending",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
}
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:ssot-features:define-once",
"position": 1,
"name": "1. Define Once",
"description": "Compose Schema.org registries (websiteRegistry, faqRegistry) and custom Zod schemas."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:ssot-features:auto-type-inference",
"position": 2,
"name": "2. Auto Type Inference",
"description": "Derive 100% type-safe models via InferData<typeof siteSchema> with zero manual duplication."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:ssot-features:zero-drift-sync",
"position": 3,
"name": "3. Zero Drift Sync",
"description": "Connector data automatically keeps headless React UI components and SEO JSON-LD graphs in sync."
},
{
"@type": "ItemList",
"@id": "https://contextual.site/#itemlist:home:ssot-features",
"numberOfItems": 3,
"itemListElement": [
{
"@id": "https://contextual.site/#listitem:home:ssot-features:define-once"
},
{
"@id": "https://contextual.site/#listitem:home:ssot-features:auto-type-inference"
},
{
"@id": "https://contextual.site/#listitem:home:ssot-features:zero-drift-sync"
}
],
"name": "SSOT Pillars",
"itemListOrder": "https://schema.org/ItemListOrderAscending",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
}
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:knowledge-graph-features:referential-linking",
"position": 1,
"name": "Referential @id Linking",
"description": "Entities reference each other with canonical URIs (#website, #organization) forming a true Semantic Web graph."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:knowledge-graph-features:agent-ready-endpoint",
"position": 2,
"name": "Agent-Ready API Endpoint",
"description": "Exposes /api/graph.json so AI agents (Perplexity, ChatGPT Search, Claude) consume clean structured data without parsing messy DOM."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:knowledge-graph-features:zero-scraping-fragility",
"position": 3,
"name": "Zero Scraping Fragility",
"description": "Eliminates scraper breaks from markup refactors, client hydration delays, and costly LLM token waste."
},
{
"@type": "ItemList",
"@id": "https://contextual.site/#itemlist:home:knowledge-graph-features",
"numberOfItems": 3,
"itemListElement": [
{
"@id": "https://contextual.site/#listitem:home:knowledge-graph-features:referential-linking"
},
{
"@id": "https://contextual.site/#listitem:home:knowledge-graph-features:agent-ready-endpoint"
},
{
"@id": "https://contextual.site/#listitem:home:knowledge-graph-features:zero-scraping-fragility"
}
],
"name": "Knowledge Graph Capabilities",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
}
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:metadata-scoping-features:domain-scope",
"position": 1,
"name": "Domain Scope",
"description": "Mounted at root app/layout.tsx. Injects global entities like Organization, WebSite, and sitewide navigations."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:metadata-scoping-features:route-scope",
"position": 2,
"name": "Route Scope",
"description": "Wraps individual route pages (<WebPage id=\"docs\">). Scopes canonical URLs, route titles, descriptions, and breadcrumb trails to the active document."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:metadata-scoping-features:component-scope",
"position": 3,
"name": "Component Scope",
"description": "Headless primitives that consume typed data directly from context, render accessible UI, and attach microdata fragments to the parent page node."
},
{
"@type": "ItemList",
"@id": "https://contextual.site/#itemlist:home:metadata-scoping-features",
"numberOfItems": 3,
"itemListElement": [
{
"@id": "https://contextual.site/#listitem:home:metadata-scoping-features:domain-scope"
},
{
"@id": "https://contextual.site/#listitem:home:metadata-scoping-features:route-scope"
},
{
"@id": "https://contextual.site/#listitem:home:metadata-scoping-features:component-scope"
}
],
"name": "Metadata Scoping Levels",
"itemListOrder": "https://schema.org/ItemListOrderAscending",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
}
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:headless-features:radix-aschild",
"position": 1,
"name": "Radix asChild Pattern",
"description": "Slot into your custom button, link, Next.js <Link>, or motion component without extra wrapper divs."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:headless-features:design-system-agnostic",
"position": 2,
"name": "Design System Agnostic",
"description": "100% compatible with Tailwind CSS, Tailwind v4, CSS Modules, Shadcn UI, or custom enterprise design tokens."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:headless-features:wai-aria-accessibility",
"position": 3,
"name": "WAI-ARIA Accessibility",
"description": "Full keyboard navigation (Tab, Enter, Space, Arrows), screen reader announcements, and robust ARIA states out of the box."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:home:headless-features:automated-microdata",
"position": 4,
"name": "Automated Microdata",
"description": "Components quietly emit valid Schema.org microdata and JSON-LD behind the scenes without polluting your JSX styling."
},
{
"@type": "ItemList",
"@id": "https://contextual.site/#itemlist:home:headless-features",
"numberOfItems": 4,
"itemListElement": [
{
"@id": "https://contextual.site/#listitem:home:headless-features:radix-aschild"
},
{
"@id": "https://contextual.site/#listitem:home:headless-features:design-system-agnostic"
},
{
"@id": "https://contextual.site/#listitem:home:headless-features:wai-aria-accessibility"
},
{
"@id": "https://contextual.site/#listitem:home:headless-features:automated-microdata"
}
],
"name": "Headless Primitives",
"isPartOf": {
"@id": "https://contextual.site/#webpage:home"
}
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:create-and-install",
"position": 1,
"name": "Create Next.js App & Install Dependencies",
"description": "Initialize a blank Next.js App Router project (or use an existing project) and install contextual-ui, the static connector, and zod."
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:define-schema",
"position": 2,
"name": "Define your Site Schema (SSOT)",
"description": "Create data/site.schema.ts. Using defineSchema, register pre-built Schema.org registries (organization, website, webpage, navbar, footer, faq) or any custom Zod schemas.",
"text": "import {\n defineSchema,\n organizationRegistry,\n websiteRegistry,\n webpageRegistry,\n navbarRegistry,\n faqRegistry,\n footerRegistry,\n} from 'contextual-ui/server';\nimport { z } from 'zod';\n\n// 1. Define the Single Source of Truth (SSOT) schema\nexport const siteSchema = defineSchema({\n organization: organizationRegistry(),\n website: websiteRegistry(),\n webpage: webpageRegistry(),\n navbar: navbarRegistry(),\n faq: faqRegistry(),\n footer: footerRegistry(),\n // Extend with custom typed Zod fields anytime:\n announcement: {\n schema: z.object({\n enabled: z.boolean(),\n message: z.string().describe('Announcement Banner Text'),\n }),\n },\n});"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:configure-connector",
"position": 3,
"name": "Configure Server Connector & App Instance",
"description": "Create data/site.server.ts. Bind your schema with createContextualApp and a connector (static configuration, headless CMS, or database ORM).",
"text": "Schema Accuracy Guardrails: Centralizing site metadata prevents data drift between your visual UI, metadata tags, and search engine graphs. In step 6, <WebPage app={siteApp} id=\"home\"> scopes the Schema.org JSON-LD graph strictly to the current route—ensuring search engines only receive structured data for entities actually rendered on that page.\n\nimport { siteSchema } from './site.schema';\nimport { staticConnector } from 'contextual-ui-connector-static';\nimport { createContextualApp, InferData } from 'contextual-ui/server';\n\nconst baseUrl = process.env.SITE_URL || 'https://example.com';\n\n// 2. Configure a data connector (Static Config, Headless CMS, or Database)\nconst connector = staticConnector({\n organization: {\n name: 'Acme Corp',\n url: baseUrl,\n logo: '/images/logo.svg',\n description: 'Creator of modern web tools.',\n sameAs: ['https://github.com/acme', 'https://twitter.com/acme'],\n },\n website: {\n name: 'Acme App',\n url: baseUrl,\n description: 'Headless UI with automated Schema.org SEO and Agentic AI graphs.',\n },\n webpage: [\n {\n id: 'home',\n name: 'Acme App - Home',\n url: '/',\n description: 'Headless UI with automated Schema.org SEO and Agentic AI graphs.',\n },\n {\n id: 'docs',\n name: 'Acme App - Docs',\n url: '/docs',\n description: 'Documentation for Acme App.',\n },\n ],\n navbar: {\n brand: { name: 'Acme', href: '/', logo: '/images/logo.svg' },\n links: [\n { id: '1', label: 'Home', href: '/' },\n { id: '2', label: 'Docs', href: '/docs' },\n ],\n },\n faq: [\n {\n id: '1',\n question: 'How does Contextual UI work?',\n answer: 'It unifies your data layer, headless UI components, and Schema.org JSON-LD SEO graph.',\n },\n ],\n footer: {\n brand: { name: 'Acme', href: '/' },\n copyright: { holder: 'Acme Corp', year: 2026 },\n },\n});\n\n// 3. Initialize the compiled Contextual App instance with baseUrl\nexport const siteApp = createContextualApp({\n schema: siteSchema,\n connector,\n baseUrl,\n});\n\nexport type SiteData = InferData<typeof siteSchema>;"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:wrap-layout",
"position": 4,
"name": "Wrap Root Layout with ContextualSite",
"description": "In app/layout.tsx (Server Component), fetch shared data and wrap children in <ContextualSite data={data}>. This distributes validated site data (brand, links, copyright) to all layout components via React Context.",
"text": "import type { Metadata } from 'next';\nimport { siteApp } from '@/data/site.server';\nimport { ContextualSite } from 'contextual-ui';\nimport { CustomNavbar } from '@/components/Navbar';\nimport { CustomFooter } from '@/components/Footer';\nimport './globals.css';\n\nexport const metadata: Metadata = {\n title: 'My Next.js Application',\n description: 'Built with Next.js and Contextual UI',\n};\n\nexport default async function RootLayout({\n children,\n}: {\n children: React.ReactNode;\n}) {\n // Fetch validated data for global layout elements (Navbar, Footer, etc.)\n const data = await siteApp.fetchData();\n\n return (\n <html lang=\"en\" className=\"h-full\">\n <body className=\"min-h-full flex flex-col\">\n {/* ContextualSite distributes site data via React context to all client & server components */}\n <ContextualSite data={data} className=\"min-h-full flex flex-col flex-1\">\n <CustomNavbar />\n <div className=\"flex-1\">{children}</div>\n <CustomFooter />\n </ContextualSite>\n </body>\n </html>\n );\n}"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:headless-components",
"position": 5,
"name": "Implement Headless Navbar & Footer Client Components",
"description": "Contextual UI components (<Navbar.Root>, <Footer.Root>) are headless client components. Because they sit inside <ContextualSite>, they automatically read brand and navigation data from context without needing explicit props!",
"text": "'use client';\n\nimport { Navbar } from 'contextual-ui';\nimport type { NavbarData } from 'contextual-ui';\n\ninterface CustomNavbarProps {\n data?: NavbarData; // Optional! Automatically read from ContextualSite if omitted\n}\n\nexport function CustomNavbar({ data }: CustomNavbarProps = {}) {\n // Contextual UI components are headless: style with Tailwind, CSS modules, or Radix\n return (\n <Navbar.Root data={data} className=\"fixed top-0 left-0 right-0 z-50 bg-white/90 dark:bg-black/90 backdrop-blur-md border-b border-zinc-200 dark:border-zinc-800\">\n <div className=\"max-w-7xl mx-auto flex items-center justify-between h-16 px-6\">\n <Navbar.Brand className=\"font-bold font-mono text-base flex items-center gap-2.5 text-zinc-900 dark:text-zinc-50\" />\n\n <Navbar.Links\n className=\"hidden md:flex gap-6 items-center\"\n linkClassName=\"text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-50 no-underline text-sm font-medium transition-colors\"\n />\n\n <Navbar.Toggle className=\"md:hidden p-2 text-zinc-600 dark:text-zinc-400 focus:outline-none cursor-pointer rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors\" />\n </div>\n\n {/* Mobile Menu Dropdown */}\n <Navbar.Menu\n className=\"md:hidden bg-white/95 dark:bg-black/95 border-b border-zinc-200 dark:border-zinc-800 px-6 py-4 flex flex-col gap-2 shadow-xl\"\n linkClassName=\"text-zinc-700 dark:text-zinc-300 hover:text-zinc-950 dark:hover:text-zinc-50 text-base font-medium py-2 px-3 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800/60\"\n />\n </Navbar.Root>\n );\n}"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:render-webpage",
"position": 6,
"name": "Render WebPage & Route-Specific Content",
"description": "In app/page.tsx, export generateMetadata using siteApp.getMetadata('home') (zero duplication), and wrap your page in <WebPage app={siteApp} id=\"home\"> to inject the route-specific Schema.org JSON-LD graph.",
"text": "import { siteApp } from '@/data/site.server';\nimport { WebPage } from 'contextual-ui/server';\nimport { Faq } from 'contextual-ui';\n\n// Zero duplication! Automatically pulls title, description, and canonical URL from SSOT\nexport const generateMetadata = () => siteApp.getMetadata('home');\n\nexport default async function HomePage() {\n const data = await siteApp.fetchData();\n\n return (\n // Scopes the Schema.org JSON-LD graph specifically to this route\n <WebPage app={siteApp} id=\"home\">\n <main className=\"max-w-4xl mx-auto px-6 py-12 space-y-10\">\n <header className=\"space-y-4\">\n <h1 className=\"text-4xl font-extrabold tracking-tight\">Acme App</h1>\n <p className=\"text-lg text-zinc-400\">Headless UI with automated Schema.org SEO and Agentic AI graphs.</p>\n </header>\n\n {/* Headless FAQ Accordion automatically bound to schema data */}\n <section className=\"space-y-4\">\n <h2 className=\"text-xl font-bold\">Frequently Asked Questions</h2>\n <Faq.Root className=\"border border-zinc-200 dark:border-zinc-800 rounded-xl p-6 shadow-sm\">\n {data?.faq?.map((item) => (\n <Faq.Item key={item.id} id={item.id} className=\"mb-4 last:mb-0 border-b border-zinc-200 dark:border-zinc-800 last:border-b-0 pb-4 last:pb-0\">\n <Faq.Trigger className=\"bg-transparent border-none font-semibold text-base cursor-pointer text-left w-full hover:text-accent transition-colors py-1\">\n {item.question}\n </Faq.Trigger>\n <Faq.Content className=\"mt-2 text-zinc-400 text-sm leading-relaxed\">\n {item.answer}\n </Faq.Content>\n </Faq.Item>\n ))}\n </Faq.Root>\n </section>\n </main>\n </WebPage>\n );\n}"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:sitemap-robots",
"position": 7,
"name": "Add Automated Sitemap & Robots.txt",
"description": "Generate sitemap.xml and robots.txt in 3 lines each. Contextual UI automatically indexes all routes defined in your connector and manages AI crawler permissions (GPTBot, ClaudeBot, PerplexityBot).",
"text": "// app/sitemap.ts\nimport type { MetadataRoute } from 'next';\nimport { siteApp } from '@/data/site.server';\n\nexport default async function sitemap(): Promise<MetadataRoute.Sitemap> {\n // Automatically derives canonical sitemap from connector routes\n return siteApp.getSitemap({\n exclude: ['/cms', '/cms/*'],\n });\n}\n\n// app/robots.ts\nimport type { MetadataRoute } from 'next';\nimport { siteApp } from '@/data/site.server';\n\nexport default async function robots(): Promise<MetadataRoute.Robots> {\n // Configures search & AI crawler permissions and auto-attaches sitemap & host\n return siteApp.getRobots({\n disallow: ['/cms', '/cms/'],\n });\n}"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:ai-knowledge-graph",
"position": 8,
"name": "Expose AI Knowledge Graph API",
"description": "Expose a machine-readable JSON-LD Knowledge Graph endpoint at app/api/graph.json/route.ts in 4 lines. AI Agents (Claude, ChatGPT, Perplexity) use this endpoint to understand your entire site hierarchy.",
"text": "import { siteApp } from '@/data/site.server';\n\n// Expose machine-readable Knowledge Graph for AI Agents, Perplexity & Claude\nexport const { GET } = siteApp.createGraphHandler({\n includeAll: true, // Export all schema sections (or use excludeKeys / includeKeys)\n graphOptions: {\n flatten: true,\n dedupeStrategy: 'merge',\n },\n});"
},
{
"@type": "ItemList",
"@id": "https://contextual.site/#itemlist:docs:quickstart-steps",
"numberOfItems": 8,
"itemListElement": [
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:create-and-install"
},
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:define-schema"
},
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:configure-connector"
},
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:wrap-layout"
},
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:headless-components"
},
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:render-webpage"
},
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:sitemap-robots"
},
{
"@id": "https://contextual.site/#listitem:docs:quickstart-steps:ai-knowledge-graph"
}
],
"name": "Quickstart Guide",
"description": "Learn how to install Contextual UI, define a single-source-of-truth schema, configure a data connector, and render headless SEO-ready components in your Next.js application in under 5 minutes.",
"itemListOrder": "https://schema.org/ItemListOrderAscending",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:website",
"position": 1,
"name": "websiteRegistry",
"description": "Declares domain-level website metadata, site display title, description, canonical URL, and search action.",
"text": "name (string, required -> name): Primary display name of the website \nurl (string, required -> url): Canonical root domain URL \ndescription (string -> description): Website meta description for search engines \ninLanguage (string -> inLanguage): Language code (e.g. \"en-US\") \npublisher (Reference -> publisher): Cross-reference pointing to the Organization entity\n\n// data/site.schema.ts\nimport { defineSchema, websiteRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n website: websiteRegistry(),\n});\n\n// Ingested connector data\nwebsite: {\n name: 'Contextual UI Starter Kit',\n url: 'https://contextual.site',\n description: 'Headless UI components with built-in Agentic AI and Schema.org SEO.',\n inLanguage: 'en-US',\n},"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:organization",
"position": 2,
"name": "organizationRegistry",
"description": "Declares brand or publisher profile, legal name, social profiles (sameAs), logo, and contact channels.",
"text": "name (string, required -> name): Official business or project brand name \nurl (string -> url): Official homepage URL \nlogo (string -> logo): URL or path to organization logo image \nlegalName (string -> legalName): Registered legal business name \ndescription (string -> description): Brand summary description \nsameAs (string[] -> sameAs): Verified social URLs (GitHub, Twitter, LinkedIn) \nemail (string -> email): Customer support / contact email \ntelephone (string -> telephone): Customer support phone number\n\n// data/site.schema.ts\nimport { defineSchema, organizationRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n organization: organizationRegistry(),\n});\n\n// Ingested connector data\norganization: {\n name: 'Tasuku Studio',\n url: 'https://tasuku.io',\n logo: '/images/onigiri_logo.svg',\n description: 'Creator and maintainer of Contextual UI.',\n sameAs: [\n 'https://github.com/orchidtexture',\n 'https://twitter.com/orchidtexture',\n ],\n},"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:webpage",
"position": 3,
"name": "webpageRegistry",
"description": "Declares route documents, page titles, canonical URLs, meta descriptions, and part connections. Supports single or array of routes.",
"text": "id (string, required -> @id): Unique page identifier key (e.g. \"home\", \"docs\", \"pricing\") \nname (string, required -> name): Page document title tag \nurl (string, required -> url): Canonical route URL (e.g. \"/docs\") \ndescription (string -> description): Route-specific meta description \ninLanguage (string -> inLanguage): Language code for this route\n\n// data/site.schema.ts\nimport { defineSchema, webpageRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n webpage: webpageRegistry(),\n});\n\n// Ingested connector data\nwebpage: [\n {\n id: 'home',\n name: 'Home - Contextual UI',\n url: '/',\n description: 'Semantic SEO and Knowledge Graph starter kit.',\n },\n {\n id: 'docs',\n name: 'Documentation - Contextual UI',\n url: '/docs',\n description: 'Learn how to use Contextual UI.',\n },\n],"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:navbar",
"position": 4,
"name": "navbarRegistry",
"description": "Declares header navigation, brand logo, home link, and hierarchical menu links with automatic Schema.org microdata.",
"text": "brand.name (string, required -> name): Brand or application display title \nbrand.href (string, required -> url): Destination URL for brand link \nbrand.logo (string -> image): Brand icon image URL \nlinks (Array<{ id, label, href, children? }>, required -> SiteNavigationElement): Menu items array\n\n// data/site.schema.ts\nimport { defineSchema, navbarRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n navbar: navbarRegistry(),\n});\n\n// Ingested connector data\nnavbar: {\n brand: { name: 'Contextual', href: '/', logo: '/images/onigiri_logo.svg' },\n links: [\n { id: '1', label: 'Home', href: '/' },\n { id: '2', label: 'Docs', href: '/docs' },\n { id: '3', label: 'Schema Graph', href: '/schema' },\n ],\n},"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:footer",
"position": 5,
"name": "footerRegistry",
"description": "Declares multi-column navigation links, brand bio, social profiles, legal documents, and copyright attribution.",
"text": "brand ({ name, href, logo?, description? } -> brand): Footer brand details \ncolumns (Array<{ id, title, links }> -> SiteNavigationElement): Categorized navigation columns \nlinks (Array<{ id, label, href }> -> SiteNavigationElement): Flat navigation link list \nlegalLinks (Array<{ id, label, href }> -> significantLink): Privacy & Terms links \nsocials (Array<{ id, platform, href, label? }> -> sameAs): Social platform links \ncopyright ({ holder, year?, text? } -> copyrightHolder): Copyright ownership statement\n\n// data/site.schema.ts\nimport { defineSchema, footerRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n footer: footerRegistry(),\n});\n\n// Ingested connector data\nfooter: {\n brand: { name: 'Contextual', href: '/', description: 'Headless UI components.' },\n columns: [\n { id: 'res', title: 'Resources', links: [{ id: '1', label: 'Docs', href: '/docs' }] },\n ],\n copyright: { holder: 'Tasuku Studio', year: 2026 },\n},"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:breadcrumb",
"position": 6,
"name": "breadcrumbRegistry",
"description": "Declares navigational breadcrumb trails with automated position indexing for search engine rich results.",
"text": "id (string, required -> @id): Unique step identifier \nlabel (string, required -> name): Display name of the breadcrumb item \nurl (string -> item): Destination route URL\n\n// data/site.schema.ts\nimport { defineSchema, breadcrumbRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n breadcrumb: breadcrumbRegistry(),\n});\n\n// Ingested connector data\nbreadcrumb: [\n { id: '1', label: 'Home', url: '/' },\n { id: '2', label: 'Docs', url: '/docs' },\n { id: '3', label: 'Schemas' },\n],"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:faq",
"position": 7,
"name": "faqRegistry",
"description": "Declares question-and-answer pairs forming Schema.org Question and acceptedAnswer entities.",
"text": "id (string, required -> @id): Unique question identifier \nquestion (string, required -> name): Question title string \nanswer (string, required -> acceptedAnswer.text): Answer text content\n\n// data/site.schema.ts\nimport { defineSchema, faqRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n faq: faqRegistry(),\n});\n\n// Ingested connector data\nfaq: [\n { id: '1', question: 'What is Contextual UI?', answer: 'An open-source SSOT starter kit.' },\n { id: '2', question: 'How does SEO work?', answer: 'Injects Schema.org JSON-LD graphs.' },\n],"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:forms",
"position": 8,
"name": "formRegistry",
"description": "Declares CMS-driven forms with dynamic in-memory Zod validation, headless <AutoForm> rendering, and machine-readable Schema.org PotentialAction graphs for AI agents.",
"text": "id (string, required -> @id): Unique identifier for the form (e.g. \"contact-sales\") \nname / title (string -> name): Display title for the form action \nactionType (string -> @type): Schema.org Action type (e.g. \"ContactAction\", \"SearchAction\", \"SubscribeAction\") \nendpoint (string, required -> target.urlTemplate): HTTP API endpoint for form submission \nmethod (POST | GET | PUT -> target.httpMethod): HTTP method used to submit the payload \nfields (FormField[], required -> object (PropertyValueSpecification)): Array of input fields with type, label, required, and validation rules \nsubmitLabel (string): Custom submit button display label \nsuccessMessage (string): Success notification text shown upon successful submission\n\n// data/site.schema.ts\nimport { defineSchema, formRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n forms: formRegistry(),\n});\n\n// Ingested connector data\nforms: [\n {\n id: 'contact-sales',\n name: 'Contact Sales',\n actionType: 'ContactAction',\n endpoint: '/api/contact',\n method: 'POST',\n fields: [\n { name: 'name', type: 'text', label: 'Full Name', required: true },\n { name: 'email', type: 'email', label: 'Work Email', required: true },\n { name: 'message', type: 'textarea', label: 'Message', required: true },\n ],\n submitLabel: 'Send Inquiry',\n },\n],"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:section",
"position": 9,
"name": "sectionRegistry",
"description": "Declares structured content sections (articles, headings, qualifiers, prose blocks) with automated Schema.org WebPageElement JSON-LD graph generation and plain-text extraction for AI agents.",
"text": "id (string, required -> @id): Unique section identifier key (e.g. \"hero\", \"features\") \npageId (string -> isPartOf (WebPage)): Route scoping id binding this section to a specific page \ntitle (string -> name): Section heading text displayed in UI and search graphs \nsubtitle (string): Optional section subheading or eyebrow text \ndescription (string -> description): Section summary or lead paragraph \nanchor (string -> url): HTML fragment anchor id (e.g. \"features\") \ncontent (ContentBlock[] -> text): Portable content blocks (paragraphs, headings, lists, code, callouts) \ntype (string -> @type): Schema.org element type (defaults to \"WebPageElement\")\n\n// data/site.schema.ts\nimport { defineSchema, sectionRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n sections: sectionRegistry(),\n});\n\n// Ingested connector data\nsections: [\n {\n id: 'hero',\n pageId: 'home',\n title: 'Next-Gen Semantic Web',\n description: 'Structured content with built-in Agentic AI and Schema.org SEO.',\n content: [\n { type: 'paragraph', role: 'normal', text: 'Define content once in your data layer.' },\n ],\n },\n],"
},
{
"@type": "ListItem",
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:collection",
"position": 10,
"name": "collectionRegistry",
"description": "Declares ordered or unordered collections of structured items (features, steps, catalog items) with stable ID resolution, position indexing, and automated Schema.org ItemList / ListItem graph nodes.",
"text": "id (string, required -> @id): Unique collection identifier (e.g. \"features\", \"quickstart-steps\") \npageId (string -> isPartOf (WebPage)): Route scoping id binding this collection to a specific page \ntitle (string -> name): Collection heading title \ndescription (string -> description): Collection descriptive summary \nordered (boolean -> itemListOrder): Specifies whether items represent a sequential ordered list \nitems (CollectionItem[], required -> itemListElement: ListItem[]): Array of collection items with stable IDs, titles, descriptions, and content blocks \nitems[].id (string, required -> ListItem.@id): Stable unique identifier for the item \nitems[].title (string -> ListItem.name): Item display title \nitems[].description (string -> ListItem.description): Item summary or description \nitems[].content (ContentBlock[] -> ListItem.text): Structured portable content blocks for the item \nitems[].order (number -> ListItem.position): 1-based sequential position index\n\n// data/site.schema.ts\nimport { defineSchema, collectionRegistry } from 'contextual-ui/server';\n\nexport const siteSchema = defineSchema({\n collections: collectionRegistry(),\n});\n\n// Ingested connector data\ncollections: [\n {\n id: 'quickstart-steps',\n pageId: 'docs',\n title: 'Quickstart Guide',\n ordered: true,\n items: [\n { id: 'install', title: 'Install Dependencies', order: 1 },\n { id: 'schema', title: 'Define Site Schema', order: 2 },\n ],\n },\n],"
},
{
"@type": "ItemList",
"@id": "https://contextual.site/#itemlist:docs:schema-registries-list",
"numberOfItems": 10,
"itemListElement": [
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:website"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:organization"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:webpage"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:navbar"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:footer"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:breadcrumb"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:faq"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:forms"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:section"
},
{
"@id": "https://contextual.site/#listitem:docs:schema-registries-list:collection"
}
],
"name": "Built-in Registries Reference",
"description": "Select a registry below to inspect its Schema.org specification, field requirements, and usage examples.",
"isPartOf": {
"@id": "https://contextual.site/#webpage:docs"
}
}
]
}