Examples
Mixed DevTools
One system example + two AI examples. DevTools SystemSelector lets you switch between all three.
Try it
Three systems from different domains on one page. Open DevTools and use the SystemSelector dropdown to switch between “number-match”, “ai-guardrails”, and “goal-heist”. System-core tabs (Facts, Derivations, Constraints) populate for each system. AI tabs (Timeline, Guardrails, Events) appear automatically for examples that emit AI events via the client-side bridge.
Number Match (System)
Loading example…
AI Guardrails (AI)
Loading example…
Goal Heist (AI)
Loading example…
What to verify
window.__DIRECTIVE__.getSystems()returns all three system names- SystemSelector dropdown shows 3 entries
- Switching between systems updates all system-core tabs
- AI tabs appear for “ai-guardrails” after clicking test buttons (events emitted via client-side bridge)
