Schema & Knowledge Graph

Central schema definition combining standard Zod types with pre-built schema registries ( websiteRegistry, faqRegistry, navbarRegistry ) that power both runtime UI and semantic metadata.

import { defineSchema, faqRegistry, navbarRegistry, websiteRegistry } from '@contextual-ui/core/server';
import { z } from 'zod';

export const siteSchema = defineSchema({
  website: websiteRegistry(),
  faq: faqRegistry(),
  navbar: navbarRegistry(),
  announcement: {
    schema: z.object({
      enabled: z.boolean(),
      message: z.string().describe('Announcement Banner Text'),
    }),
  },
});

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": "WebSite",
      "@id": "https://example.com/#website",
      "name": "Contextual UI Starter Kit",
      "url": "https://example.com",
      "description": "A headless UI and semantic SEO Knowledge Graph starter kit.",
      "hasPart": [
        {
          "@id": "https://example.com/#navbar"
        },
        {
          "@id": "https://example.com/#faq"
        }
      ]
    },
    {
      "@type": "Answer",
      "@id": "https://example.com/#faq-a:1",
      "text": "An open-source starter for SSOT apps."
    },
    {
      "@type": "Question",
      "@id": "https://example.com/#faq-q:1",
      "name": "What is Contextual UI Starter Kit?",
      "acceptedAnswer": {
        "@id": "https://example.com/#faq-a:1"
      }
    },
    {
      "@type": "Answer",
      "@id": "https://example.com/#faq-a:2",
      "text": "Contextual UI automatically injects structured JSON-LD graphs for search engines and AI agents."
    },
    {
      "@type": "Question",
      "@id": "https://example.com/#faq-q:2",
      "name": "How does semantic SEO work with Contextual UI?",
      "acceptedAnswer": {
        "@id": "https://example.com/#faq-a:2"
      }
    },
    {
      "@type": "Answer",
      "@id": "https://example.com/#faq-a:3",
      "text": "Yes, any Zod schema can be plugged into the CMS dashboard and form generator."
    },
    {
      "@type": "Question",
      "@id": "https://example.com/#faq-q:3",
      "name": "Can I use custom Zod schemas for CMS validation?",
      "acceptedAnswer": {
        "@id": "https://example.com/#faq-a:3"
      }
    },
    {
      "@type": "Answer",
      "@id": "https://example.com/#faq-a:4",
      "text": "Well, libraries like Contextual UI are the kind of thing that make AI better, so lets use it!"
    },
    {
      "@type": "Question",
      "@id": "https://example.com/#faq-q:4",
      "name": "Why use Contextual UI for building websites when AI is getting better and better?",
      "acceptedAnswer": {
        "@id": "https://example.com/#faq-a:4"
      }
    },
    {
      "@type": "FAQPage",
      "@id": "https://example.com/#faq",
      "isPartOf": {
        "@id": "https://example.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://example.com/#faq-q:1"
        },
        {
          "@id": "https://example.com/#faq-q:2"
        },
        {
          "@id": "https://example.com/#faq-q:3"
        },
        {
          "@id": "https://example.com/#faq-q:4"
        }
      ]
    },
    {
      "@type": "WebPage",
      "@id": "https://example.com/#nav:1",
      "name": "Home",
      "url": "/"
    },
    {
      "@type": "WebPage",
      "@id": "https://example.com/#nav:2",
      "name": "Components",
      "url": "/components"
    },
    {
      "@type": "WebPage",
      "@id": "https://example.com/#nav:3",
      "name": "Schema Graph",
      "url": "/schema"
    },
    {
      "@type": "SiteNavigationElement",
      "@id": "https://example.com/#navbar",
      "isPartOf": {
        "@id": "https://example.com/#website"
      },
      "name": "Contextual UI",
      "url": "/",
      "hasPart": [
        {
          "@id": "https://example.com/#nav:1"
        },
        {
          "@id": "https://example.com/#nav:2"
        },
        {
          "@id": "https://example.com/#nav:3"
        }
      ]
    }
  ]
}