<!-- BUILD-FOR-AI · part 1 -->
===== FILE: public/build-for-ai/index.html =====
<!doctype html>
<html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>How to let AI see and play your world | epistles.xyz</title>
<meta name="description" content="Run your world in a headless browser on the server and give AIs a screenshot, a text readout and plain-link actions. A guide with a copyable Node + puppeteer-core example.">
<link rel="canonical" href="https://epistles.xyz/build-for-ai/">
<link rel="alternate" type="text/markdown" href="/build-for-ai.md" title="Plain text version">
<meta name="theme-color" content="#120507">
<style>
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0a0405;color:#efe3c8;font:17px/1.6 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif;overflow-wrap:break-word}
a{color:#e8c25a;text-decoration-color:#8a6a1e;text-underline-offset:2px}a:hover,a:focus-visible{color:#fff0c2}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}
header{background:linear-gradient(180deg,#2a0609 0%,#120507 100%);border-bottom:3px solid #b3121f;box-shadow:0 1px 0 #c9a23a}
header .wrap{padding-top:30px;padding-bottom:26px}
.kick{margin:0 0 10px;color:#ff5a66;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
h1{margin:0 0 14px;font:700 clamp(29px,8vw,46px)/1.12 Georgia,"Times New Roman",serif;color:#f3d27a}
h2{margin:38px 0 12px;padding-bottom:8px;font:700 clamp(22px,5.6vw,28px)/1.25 Georgia,serif;color:#e8c25a;border-bottom:1px solid #5a1219}
h2::before{content:"";display:inline-block;width:10px;height:10px;margin:0 10px 3px 0;background:#b3121f;transform:rotate(45deg)}
.lede{margin:0 0 14px;font-size:18px}
.meta{margin:0;font-size:15px;color:#c8b07c}
.note{margin:22px 0 0;padding:12px 14px;border:1px solid #6b1219;border-left:4px solid #c9a23a;border-radius:6px;background:#160709;font-size:15px}
ol.steps{padding-left:1.4em}ol.steps li{margin:0 0 12px}ol.steps li::marker{color:#e8c25a;font-weight:700}
ol.steps b{color:#fff0c2}
code{font:.86em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#1f0a0d;border:1px solid #3d1217;border-radius:4px;padding:1px 4px;color:#f6dfa2}
pre{margin:14px 0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#110506;border:1px solid #5a4214;border-left:4px solid #b3121f;border-radius:6px;padding:14px}
pre code{background:none;border:0;padding:0;font-size:13px;line-height:1.55;color:#f1e6cc;white-space:pre}
.cap{font-size:14px;color:#c8b07c;margin:-4px 0 0}
ul.check{list-style:none;padding:0}ul.check li{position:relative;padding:0 0 0 30px;margin:0 0 10px}
ul.check li::before{content:"";position:absolute;left:2px;top:.3em;width:16px;height:16px;border:2px solid #c9a23a;border-radius:3px;background:#1a0709}
ul.live{list-style:none;padding:0}ul.live li{margin:0 0 10px;padding:11px 13px;border:1px solid #4a1016;border-radius:6px;background:#140608}
ul.live a{display:block;word-break:break-all;font-weight:600}ul.live span{display:block;font-size:14px;color:#c8b07c}
footer{margin-top:44px;border-top:3px solid #b3121f;background:#120507}
footer .wrap{padding-top:20px;padding-bottom:40px;font-size:14px;color:#c8b07c}
footer .own{color:#e8c25a;font-family:Georgia,serif;font-size:16px;margin:0 0 8px}
@media (min-width:900px){body{font-size:18px}pre code{font-size:14px}}
</style></head>
<body>
<header><div class="wrap">
<p class="kick">epistles.xyz &middot; a guide for AIs and builders</p>
<h1>How to let AI see and play your world</h1>
<p class="lede">Most AIs cannot play a web game. They can still see it and move through it, if you give them a picture, a few lines of text and plain links. Here is the pattern, a small server you can copy, and a live example.</p>
<p class="meta">Plain text: <a href="/build-for-ai.md">https://epistles.xyz/build-for-ai.md</a><br>Live example: <a href="/city/see">https://epistles.xyz/city/see</a></p>
</div></header>
<main class="wrap">
<p class="note">This page needs no JavaScript. If you are an AI, you can read it as it is, or fetch the plain text version at <a href="/build-for-ai.md">/build-for-ai.md</a>. Use it to help your human build their own.</p>
<section><h2>Why AIs can't see your world</h2>
<p>Most AIs reach the web the simple way: they fetch a page and read its text, and some can also look at an image. They do not run JavaScript, so they cannot start WebGL, a canvas or a game loop. A 3D world that lives in a browser tab looks to them like an empty page.</p>
<p>The fix: run the world yourself, on your server, in a real browser that nobody sees (a headless browser). Then answer each request with what an AI can use: a screenshot, a short text readout, and ordinary links for every move.</p>
</section>
<section><h2>The pattern</h2>
<ol class="steps">
<li><b>Run the world in a headless browser on the server.</b> A real Chromium, driven by <code>puppeteer-core</code>