OneTag AI

OneTag AI / Guides

Add a TL;DR summary button to blog posts

How do I add an AI summary button to my blog posts?

A summary button is the most common first AI feature on a blog, and the simplest to get right. The whole thing is one call: the post element in, three bullets out. This guide gives the complete version with streaming, a loading state and the errors you should handle.

Steps

  1. Get a free key

    From onetagai.com.

  2. Add the tag

    Once, in the page head or the blog's layout:

    <script src="https://onetagai.com/v1.js" data-key="YOUR_ONETAG_KEY"></script>

  3. Add the button and the script

    <article id="post">…</article>
<button id="tldr">TL;DR</button>
<ul id="summary"></ul>

<script type="module">
  const button = document.getElementById("tldr");
  const list = document.getElementById("summary");
  button.onclick = async () => {
    button.disabled = true;
    list.textContent = "";
    let text = "";
    try {
      await onetag.ask("Summarize in exactly 3 short bullets. One line each, plain text, no markdown.", document.getElementById("post"), {
        maxTokens: 200,
        stream: (delta) => {
          text += delta;
          list.replaceChildren(...text.split("\n").filter(Boolean).map((line) => {
            const li = document.createElement("li");
            li.textContent = line.replace(/^[-*•]\s*/, "");
            return li;
          }));
        },
      });
    } catch (e) {
      list.textContent = e.code === "quota_exceeded" ? "Summaries are resting for now." : e.message;
    } finally {
      button.disabled = false;
    }
  };
</script>

Why stream

A summary takes two or three seconds. Streaming shows the first bullet within a second, which reads as instant; without it visitors see a blank spot and click again. The stream callback receives each piece of text; the promise still resolves with the full text.

Prompt details that matter

Cache the summary

The post does not change, so store the result in localStorage under the post URL and show it instantly on the next visit. That also saves tokens: one summary per reader per post instead of per click.

Cost

A 1,200-word post is about 1,600 tokens in; three bullets are about 60 tokens out. A free key covers roughly 600 summaries; Pro about 60,000 a month.

Questions

Can the button summarize in the reader's language?

Yes: read navigator.language and say "Answer in French" in the prompt. The model writes the summary in that language.

Can I summarize the whole blog, not one post?

One call takes 32,000 characters, about 5,000 words. For more, summarize per post, or build an index and retrieve the relevant posts first; the ask-the-docs guide shows that pattern.

Does it work with lazy-loaded or paginated content?

The SDK reads the element's current text. Make sure the full post is in the DOM before calling, or pass the text as a string.

Is it safe to put the OneTag AI key in my page?

Yes, it is designed for that. The key can only spend its own token budget and cannot read or change anything on your account. On the Pro plan you can lock it to your domain so other sites cannot use it; free keys work from any page.

Does it cost anything?

A free key has 1,000,000 tokens with no monthly reset, enough for a few hundred summaries. Pro is $9.9 a month for 100,000,000 tokens a month and the domain lock.

Which model answers?

A fast, inexpensive model from OpenRouter, chosen for sub-second first tokens and good instruction following. You do not pick a model; the point is one tag that keeps working.

What happens to the text my visitors send?

It goes to the model and comes back. OneTag AI stores token counts per key for the quota and keeps no prompts, inputs or answers. The access log carries no IP addresses.

Try it on your sitefree

Get a free key by email, paste one tag, call onetag.ask. 1,000,000 tokens, no card.

Get a free key

Updated 2026-11-09. Something wrong or missing? Email support@odysseyx.app.