aruintelligence · aruintelligence · Sep 9, 2026 · Sep 9, 2026 · Sep 9, 2026 · Sep 9, 2026
@@ -20,7 +20,11 @@ AI-generated interfaces are getting easier to create. The missing layer is accou
 
 ## Try it in under 60 seconds
 
-Live proof:
+**Live one-click starter:**
+
+https://aruintelligence.github.io/aml-core/quickstart.html
+
+Or open the exact-state proof:
 
 https://aruintelligence.github.io/aml-core/proof.html?attention=5&restoration=1&lang=en
 
@@ -143,6 +147,7 @@ If you found this while researching any of these, you are in the right repositor
 
 ## Start here next
 
+- [Copy-and-run AI Interface Firewall starter](starters/ai-interface-firewall/)
 - [ĀML in 5 minutes](publications/START_HERE.md)
 - [ĀML in one page](publications/AML_IN_ONE_PAGE.md)
 - [Why AI-generated UI needs a firewall](publications/WHY_AI_UI_NEEDS_A_FIREWALL.md)

@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Try ĀML — ĀRU Meaning Language — as an accountable AI interface firewall around ordinary HTML in under a minute." />
+  <title>Try ĀML in 60 seconds — AI Interface Firewall</title>
+  <style>
+    :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #07111f; color: #f4f7fb; }
+    * { box-sizing: border-box; }
+    body { margin: 0; }
+    main { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 80px; }
+    a { color: #9cffb0; }
+    h1 { font-size: clamp(2.2rem, 7vw, 4.8rem); line-height: .96; margin: 10px 0 20px; max-width: 850px; }
+    h2 { margin-top: 0; }
+    .eyebrow { color: #7dd3fc; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
+    .lead { font-size: 1.2rem; max-width: 760px; color: #c8d4e3; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 38px 0; }
+    .card { padding: 22px; border: 1px solid #2d4058; border-radius: 18px; background: #0d1a2b; }
+    .code { position: relative; margin-top: 28px; }
+    pre { overflow: auto; padding: 22px; border: 1px solid #2d4058; border-radius: 18px; background: #040b14; color: #dbe8f7; }
+    code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    button.copy { border: 0; border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 750; cursor: pointer; background: #f2ce72; color: #07111f; }
+    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
+    .actions a { display: inline-block; padding: 11px 15px; border: 1px solid #3c5470; border-radius: 10px; text-decoration: none; font-weight: 700; }
+    .fine { color: #91a4ba; font-size: .94rem; margin-top: 28px; }
+  </style>
+</head>
+<body>
+  <main>
+    <div class="eyebrow">ĀML™ · ĀRU Meaning Language™</div>
+    <h1>Put an accountability gate around ordinary HTML.</h1>
+    <p class="lead">No framework migration. No build system. This live page uses the same narrow browser bridge you can place around one AI-generated or high-risk interface decision.</p>
+
+    <div class="grid">
+      <section class="card">
+        <h2>Pressure CTA</h2>
+        <p>Purpose: create urgency. Attention cost: 5. Restoration value: 1.</p>
+        <aml-gate purpose="Create urgency for a purchase" attention-cost="5" restoration-value="1">
+          <button type="button">Buy before the timer expires</button>
+        </aml-gate>
+      </section>
+
+      <section class="card">
+        <h2>Explanatory CTA</h2>
+        <p>Purpose: explain pricing. Attention cost: 1. Restoration value: 3.</p>
+        <aml-gate purpose="Explain pricing without pressure" attention-cost="1" restoration-value="3">
+          <button type="button">Review pricing details</button>
+        </aml-gate>
+      </section>
+    </div>
+
+    <section class="code">
+      <h2>Copy this into an HTML page</h2>
+      <button class="copy" id="copy">Copy integration</button>
+      <pre><code id="snippet">&lt;script type="module" src="https://aruintelligence.github.io/aml-core/aml-gate.js"&gt;&lt;/script&gt;
+
+&lt;aml-gate
+  purpose="Create urgency for a purchase"
+  attention-cost="5"
+  restoration-value="1"&gt;
+  &lt;button&gt;Buy before the timer expires&lt;/button&gt;
+&lt;/aml-gate&gt;</code></pre>
+    </section>
+
+    <div class="actions">
+      <a href="https://github.com/aruintelligence/aml-core/blob/main/ADOPT_AML.md">Adoption guide</a>
+      <a href="https://github.com/aruintelligence/aml-core/tree/main/starters/ai-interface-firewall">Copy-and-run starter</a>
+      <a href="https://github.com/aruintelligence/aml-core/blob/main/VERIFY.md">Verify without trusting ĀML</a>
+      <a href="https://github.com/aruintelligence/aml-core/issues/81">Build with ĀML</a>
+    </div>
+
+    <p class="fine">The current attention/restoration values are declared or model-provided prototype inputs, not objective measurements of cognition or wellbeing. This narrow browser demonstration does not by itself provide the complete ĀML consent, privacy, accessibility, cryptographic evidence, or production authorization stack.</p>
+  </main>
+
+  <script type="module" src="./aml-gate.js"></script>
+  <script>
+    const copy = document.getElementById('copy');
+    copy.addEventListener('click', async () => {
+      const text = document.getElementById('snippet').textContent;
+      try {
+        await navigator.clipboard.writeText(text);
+        copy.textContent = 'Copied';
+      } catch {
+        copy.textContent = 'Select the code below';
+      }
+    });
+  </script>
+</body>
+</html>
@@ -0,0 +1,67 @@
+# ĀML AI Interface Firewall™ starter
+
+This is the smallest useful ĀML adoption surface in the repository.
+
+It is deliberately plain HTML so you can answer one question before reading the rest of the architecture:
+
+> Can I put an accountability gate around an existing interface without rewriting my frontend?
+
+## Run it
+
+Download or clone this folder and open `index.html` in a modern browser with internet access.
+
+The page loads the published browser bridge:
+
+```html
+<script type="module" src="https://aruintelligence.github.io/aml-core/aml-gate.js"></script>
+```
+
+Then it wraps ordinary HTML:
+
+```html
+<aml-gate
+  purpose="Create urgency for a purchase"
+  attention-cost="5"
+  restoration-value="1">
+  <button>Buy before the timer expires</button>
+</aml-gate>
+```
+
+No React migration, bundler, package install, or server is required for this experiment.
+
+## Change one number
+
+Change:
+
+```text
+restoration-value="1"
+```
+
+to:
+
+```text
+restoration-value="5"
+```
+
+Reload the page and compare the decision.
+
+The current demonstration rule is intentionally easy to inspect. The declared/model inputs are not claimed objective measurements of human cognition or wellbeing.
+
+## Use your own UI
+
+Replace the button inside `<aml-gate>` with one existing component or interaction from your application. Start with something where intent matters: a checkout CTA, consent prompt, notification, upgrade flow, AI-generated action, or administrative control.
+
+For existing DOM without a wrapper, see [`docs/HTML_BRIDGE.md`](../../docs/HTML_BRIDGE.md).
+
+For the broader adoption map, see [`ADOPT_AML.md`](../../ADOPT_AML.md).
+
+For independent verification, see [`VERIFY.md`](../../VERIFY.md).
+
+## What this starter proves — and what it does not
+
+It demonstrates a narrow browser integration in which interface content carries declared purpose and gate inputs before rendering. It does not represent the entire ĀML runtime, cryptographic release chain, consent/privacy/accessibility system, production authorization model, or an objective determination that an interface is good, safe, legal, ethical, or truthful.
+
+If this starter works in your stack, publish the integration. If it fails, publish the failure. External reproducible evidence is more useful than a private success claim.
+
+— Daniel Jacob Read IV  
+Steward: ĀRU Intelligence Inc.™
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ĀML AI Interface Firewall Starter</title>
+  <style>
+    :root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+    body { max-width: 760px; margin: 0 auto; padding: 48px 20px; line-height: 1.55; }
+    main { display: grid; gap: 24px; }
+    .panel { border: 1px solid currentColor; border-radius: 16px; padding: 20px; }
+    code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+    button { font: inherit; padding: 12px 18px; border-radius: 10px; cursor: pointer; }
+    .hint { opacity: .78; }
+  </style>
+</head>
+<body>
+  <main>
+    <header>
+      <p><strong>ĀML™ — AI Interface Firewall™ starter</strong></p>
+      <h1>Gate one risky interface decision without replacing your frontend.</h1>
+      <p class="hint">This page is plain HTML. No build system. No framework migration.</p>
+    </header>
+
+    <section class="panel">
+      <h2>High-attention / low-restoration CTA</h2>
+      <p>This content declares what it is trying to do and the prototype inputs used by the gate.</p>
+
+      <aml-gate
+        purpose="Create urgency for a purchase"
+        attention-cost="5"
+        restoration-value="1">
+        <button type="button">Buy before the timer expires</button>
+      </aml-gate>
+    </section>
+
+    <section class="panel">
+      <h2>Lower-attention explanatory action</h2>
+      <aml-gate
+        purpose="Explain pricing without pressure"
+        attention-cost="1"
+        restoration-value="3">
+        <button type="button">Review the pricing details</button>
+      </aml-gate>
+    </section>
+
+    <section>
+      <h2>What just happened?</h2>
+      <p>The two existing HTML controls were wrapped in <code>&lt;aml-gate&gt;</code>. The prototype gate evaluates declared inputs before allowing the wrapped interface to render.</p>
+      <p class="hint">The attention/restoration values are declared or model-provided inputs. ĀML does not claim they are objective measurements of cognition, wellbeing, truth, ethics, legality, or safety.</p>
+    </section>
+  </main>
+
+  <script type="module" src="https://aruintelligence.github.io/aml-core/aml-gate.js"></script>
+</body>
+</html>