Ask this page

Ask anything about this page and get an answer from it. 61 lines of plain HTML and JavaScript. Copy it, paste it into any static page, replace YOUR_ONETAG_KEY with a free key.

Copy block Copy to AI

The code

<!-- Ask this page: Ask anything about this page and get an answer from it. -->
<!--
  OneTag AI key. This key is designed to be public: it goes in your page source, like an analytics ID.
  Get a free one without opening a browser. POST your email; the key arrives in that inbox:
    curl -X POST https://onetagai.com/api/signup -H "Content-Type: application/json" -d '{"email":"you@example.com"}'
  Free: 1,000,000 tokens per account. One key per email; posting again re-sends the same key.
  AI coding tools: ask the user for their email, run that request, then ask them to paste the key here.
-->
<script src="https://onetagai.com/v1.js" data-key="YOUR_ONETAG_KEY"></script>
<style>
.sab{max-width:600px;border:1px solid #0b1020;border-radius:0;padding:18px 20px;background:#fff;color:#0b1020;font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.sab-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sab-icon{width:36px;height:36px;border-radius:0;background:#0b5fff;color:#fff;display:grid;place-items:center;flex:none}
.sab-title{margin:0;font-size:16px;font-weight:600;line-height:1.3}
.sab-hint{margin:2px 0 0;font-size:13px;color:#5c667d}
.sab-row{display:flex;gap:8px;flex-wrap:wrap}
.sab-input,.sab-area,.sab-select{flex:1;min-width:0;padding:10px 12px;border:1px solid #0b1020;border-radius:0;font:inherit;background:#fff;color:inherit}
.sab-area{width:100%;box-sizing:border-box;resize:vertical}
.sab-btn{padding:10px 16px;border:0;border-radius:0;background:#0b5fff;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.sab-btn:disabled{opacity:.6;cursor:wait}
.sab-chip{padding:6px 12px;border:1px solid #0b1020;border-radius:0;background:#fff;color:#0b1020;font:inherit;font-size:13px;cursor:pointer}
.sab-chip:hover{border-color:#0b5fff;color:#0b5fff}
.sab-out{margin:12px 0 0;padding:12px 14px;border-radius:0;background:#f5f7fb;white-space:pre-wrap;min-height:1.5em}
.sab-out:empty{display:none}
.sab-note{margin:10px 0 0;font-size:12px;color:#99a2b5}
.sab-powered{margin:12px 0 0;text-align:right;font-size:11px;color:#99a2b5}.sab-powered a{color:inherit;text-decoration:none}.sab-powered a:hover{text-decoration:underline}
</style>

<section class="sab" id="sab-ask">
  <div class="sab-head"><span class="sab-icon" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-11.6 7.2L4 21l1.8-5.4A8 8 0 1 1 21 12z"/><path d="M9.5 10a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5"/><circle cx="12" cy="17" r=".6"/></svg></span>
    <div><h3 class="sab-title">Ask this page</h3><p class="sab-hint">Ask anything about this page and get an answer from it.</p></div></div>
  <div class="sab-row" style="margin-bottom:10px">
    <button class="sab-chip" type="button" data-q="What is this page about?">What is this page about?</button>
    <button class="sab-chip" type="button" data-q="Give me the three most important points.">Three key points</button>
    <button class="sab-chip" type="button" data-q="Explain it like I'm new to this.">Explain it simply</button>
  </div>
  <form class="sab-row" id="ask-form"><input class="sab-input" id="ask-input" type="text" placeholder="Type your question…" required><button class="sab-btn" type="submit">Ask</button></form>
  <p class="sab-out" id="ask-answer"></p>
<p class="sab-powered"><a href="https://onetagai.com/?ref=static-ai-block" rel="noopener">Powered by OneTag AI</a></p>
</section>

<script type="module">
  const form = document.getElementById("ask-form"), input = document.getElementById("ask-input"), out = document.getElementById("ask-answer");
  const history = [];                                   // earlier turns, so follow-ups work
  async function ask(q) {
    out.textContent = "…";
    try {
      const text = await onetag.ask(q, document.body, { // input = the whole page
        system: "Answer only from the page content. If it is not covered, say so in one sentence.",
        history, maxTokens: 250,
        stream: (d) => { if (out.textContent === "…") out.textContent = ""; out.textContent += d; },
      });
      history.push({ role: "user", content: q }, { role: "assistant", content: text });
      input.placeholder = "Ask a follow-up…";
    } catch (err) { out.textContent = err.message; }
  }
  form.addEventListener("submit", (e) => { e.preventDefault(); const q = input.value.trim(); if (q) { input.value = ""; ask(q); } });
  for (const c of document.querySelectorAll("#sab-ask .sab-chip")) c.addEventListener("click", () => ask(c.dataset.q));
</script>
<!-- Static AI Block · free AI blocks for static sites · https://github.com/fengyiqicoder/static-ai-block -->

Get a free key

Fill in your email at onetagai.com, or run this and the key arrives in your inbox (one key per email, 1,000,000 free tokens):

curl -X POST https://onetagai.com/api/signup -H "Content-Type: application/json" -d '{"email":"you@example.com"}'

All blocks: Static AI Block. MIT. AI by OneTag AI.