Gebruik, API en MCP

1. In een site

Eén stylesheet per thema, optioneel de runtime. Alles werkt ook zonder JavaScript.

<!-- eigen GXJ-site -->
<link rel="stylesheet" href="https://system.gxj.world/v1/gxj.css">
<script src="https://system.gxj.world/v1/gx.js" defer></script>
<html lang="nl" data-gx-brand="events">   <!-- accent per merk -->

<!-- klantsite -->
<link rel="stylesheet" href="https://system.gxj.world/v1/client.css">
<style>:root{--gx-accent:#0a7c5a;--gx-btn-bg:#0a7c5a}</style>   <!-- uit de themabouwer -->

Voor de beste Core Web Vitals: kopieer de bundel bij de build naar de site zelf (zelfde origin, geen extra verbinding) en zet de hero-afbeelding op fetchpriority="high". De bundel is 49 KB ongezipt, ongeveer een vijfde gezipt.

Bestanden

Pad	Inhoud	Cache
/v1/gxj.css	GXJ-thema, letters (alleen GXJ-domeinen), merkaccenten, alle componenten	1 uur, daarna stale-while-revalidate
/v1/client.css	Klantthema, systeemletters, alle componenten	idem
/v1/gx.js	Runtime: tabs, dialog, toast, carrousel, teller, validatie, <gx-disc>	idem
/sound/gxj-sound.js	GXJ Sound (alleen eigen sites)	30 dagen

2. JSON-API

Statisch en cachebaar, met CORS open voor lezen.

Endpoint	Inhoud
/api/index.json	Manifest met versie en alle endpoints
/api/tokens/gxj.json, /api/tokens/client.json	Tokens in W3C Design Tokens-formaat (voor Figma Tokens Studio en Style Dictionary)
/api/components.json	Alle componenten met niveau, categorie en instellingen
/api/components/{id}.json	Eén component: standaard-HTML, CSS, instellingen, richtlijnen
/api/brands.json, /api/blueprints.json	Merken en paginapatronen
/llms.txt	Samenvatting voor taalmodellen

3. MCP-server

Endpoint https://system.gxj.world/mcp (Streamable HTTP, alleen lezen, geen sleutel nodig). Een agent vraagt componenten op met de juiste instellingen en krijgt kant-en-klare HTML terug in het GXJ- of klantthema.

Claude Code

claude mcp add --transport http gxj-system https://system.gxj.world/mcp

Claude Desktop, Cursor en andere clients

{
  "mcpServers": {
    "gxj-system": {
      "type": "http",
      "url": "https://system.gxj.world/mcp"
    }
  }
}

Tools

Tool	Doet
list_components	Lijst, te filteren op niveau, categorie of zoekterm
get_component	HTML met jouw instellingen, plus CSS, instellingen en richtlijnen
render	Meerdere componenten achter elkaar renderen tot één HTML-blok
get_tokens	Tokens als CSS of DTCG-JSON, klantthema met eigen merkkleur, hoeken, letter en dichtheid
get_brand	Merk met payoff, domein, beeldmerk en kleuren
get_blueprint	Complete pagina (head, CSS, runtime, secties) voor een patroon, merk en thema
search	Zoekt in componenten, merken en richtlijnen
get_guidelines	De vaste GXJ-regels voor ontwerp, schrijven, techniek en livegang

Voorbeeld: "Maak een landingspagina voor GXJ Events met een split-hero en een contactformulier" wordt get_blueprint + render met brand: "events".

Versies

Huidige versie 1.0.0. Brekende wijzigingen komen onder /v2/; /v1/ blijft staan.