BONDING × ArrowJS

Agent-generated chemistry components, executed safely in a WASM sandbox. Paste ArrowJS code or use one of the examples below.

const state = reactive({ atoms: ["H","H","O"] }); function addAtom(el) { state.atoms.push(el); } return html` <div data-mcp-tool="moleculeBuilder" data-mcp-type="surface" data-mcp-target="molecule-builder"> <h3 style="margin:0 0 8px 0;font-weight:600;">Water Molecule</h3> <div class="atom-grid"> ${state.atoms.map(function(a) { return html`<div class="atom" data-element="${a}">${a}</div>`; })} </div> <div style="display:flex;gap:6px;margin-top:8px;"> <button onclick="addAtom('H')" style="padding:4px 12px;border-radius:6px;border:1px solid var(--p31-accent-cyan);background:transparent;color:var(--p31-accent-cyan);cursor:pointer;font-size:11px;">+H</button> <button onclick="state.atoms.pop()" style="padding:4px 12px;border-radius:6px;border:1px solid var(--p31-accent-red);background:transparent;color:var(--p31-accent-red);cursor:pointer;font-size:11px;">−</button> </div> <p class="meta"><code>${state.atoms.length}</code> atoms</p> </div> `

Output iframe sandbox