# human-machine-swapper > A web component that adds a Human / Machine pill to any website. Machine shows the site's > llms.txt, the plain-text reading written for language models, rendered in place without > leaving the page. One file, about 6 KB gzipped, no dependencies and no build step. Docs: https://advancelabs.dev/human-machine-swapper Source: https://github.com/Advance-Labs/human-machine-swapper Package: https://www.npmjs.com/package/human-machine-swapper Licence: Apache-2.0 ## Install One command, from the project root: npx human-machine-swapper init It detects the framework (Next app or pages router, Astro, SvelteKit, Nuxt, WordPress theme, plain HTML), writes a starter llms.txt if the site has none, declares it, loads the component pinned to a version with an integrity hash, mounts the element, and adds the :not(:defined) guard. It is idempotent and never overwrites an existing llms.txt. Add --dry-run to preview. Exit codes: 0 installed, 1 could not identify the project, 2 installed but something needs a human. It reports anything it could not work out rather than guessing. If that command cannot identify the project, install by hand. Three steps, all required. 1. Load the script: Or: npm install human-machine-swapper, then: import "human-machine-swapper"; 2. Mount the element anywhere in . It is position:fixed, so where it sits in the DOM does not change where it appears: 3. Add this CSS. It is NOT optional: human-machine-swapper:not(:defined) { display: none; } Until the script loads, the browser treats the tag as an unknown element and lays it out in normal flow at about 50px tall, pushing the rest of the page down. A page cannot be styled by a script that has not loaded, so the host site has to declare this itself. ## The site must serve an llms.txt The component renders nothing when it cannot find one, and writes a console warning saying how to publish one. Write the llms.txt BEFORE adding the component, or the change will look broken to whoever asked for it. Point at it so the component does not have to probe: Minimal llms.txt: # Site Name > One sentence on what this site is. ## About A paragraph or two a model can quote. ## Key facts Q: What is Site Name? A: ... The convention: https://llmstxt.org ## Options data-position bottom-center | top-center. Default bottom-center. data-llms auto | URL. auto reads link rel=llms, then probes /llms.txt, /llms-full.txt. data-accent CSS colour for the current dot and hover. Default #a8f326. data-labels-human, data-labels-machine Override the two labels. ## Do not - Do not wrap it in a client-only component or a portal. Mount the custom element directly. - Do not style it from the host page beyond the :not(:defined) rule. It renders in a shadow root and takes its colours from data-accent. - Do not point data-llms at a URL that does not exist. - Do not add rel="nofollow" to the reader's credit link. ## Behaviour - Machine fetches the file and renders it over the page with the pill still on screen. Human, Escape and the browser back button all return the reader to the page. - Machine is a real to the file, so crawlers follow it and cmd-click or middle-click opens the raw text in a new tab. Only an unmodified left click is upgraded to the reader. - The component adds nothing to the host page's content and removes nothing from it. - There is no visible badge. The reader's header says "rendered by Advance Labs" and a schema.org WebApplication node is added to the head. ## Key facts Q: How do I add a human machine toggle to a website? A: Run: npx human-machine-swapper init in the project root. It writes a starter llms.txt, declares it, loads the component, mounts the element and adds the required CSS guard. By hand: load https://unpkg.com/human-machine-swapper, add a element, add the rule human-machine-swapper:not(:defined){display:none}, and serve an llms.txt. Q: Why is the pill not rendering? A: Almost always because the site has no llms.txt. The component hides itself when it has nothing to switch to. The browser console says so. Q: Does it work with Next.js, Astro, WordPress or plain HTML? A: Yes. It is one script tag and one custom element with no build step. Framework snippets are in the README: https://github.com/Advance-Labs/human-machine-swapper Q: Who publishes it? A: Advance Labs Inc., an independent lab in London, Ontario, Canada. https://advancelabs.dev