Using Agentation in non-React (vanilla) projects via CDN

[jameslcowan]

I've been using Agentation with a vanilla PHP/HTML/CSS project (no React, no build tools) and got it working well. Thought I'd share the approach in case it's useful to others or worth documenting.

The trick is loading React + Agentation from esm.sh with an alias to avoid dual React instances:

(async function () {
  var REACT_URL = 'https://esm.sh/react@18';
  var REACT_DOM_URL = 'https://esm.sh/react-dom@18/client';
  var AGENTATION_URL = 'https://esm.sh/agentation@3?alias=react:' + REACT_URL;

  var React = await import(REACT_URL);
  var ReactDOM = await import(REACT_DOM_URL);
  var mod = await import(AGENTATION_URL);

  var container = document.createElement('div');
  container.id = 'agentation-root';
  document.body.appendChild(container);

  var root = ReactDOM.createRoot(container);
  root.render(React.createElement(mod.Agentation, {
    reactComponents: false,
    endpoint: 'http://localhost:4747'
  }));
})();

With reactComponents: false, it reports vanilla selectors, computed styles, and tag names instead of React component trees. The MCP integration works too, so annotations flow straight to coding agents without copy/paste.

I included this as a dev-only <script type="module"> in my layout template. Works with the toolbar, hover highlights, annotation popups, settings panel, and the full MCP round-trip.

Would you be open to a small PR adding a "Vanilla / Non-React" section to the README and maybe an examples/vanilla/ folder? No source changes, just docs.