Learn How to Add an AI Summary Button to Your Blog Posts

Introduction

This article demonstrates how we added a row of "Summarize with AI" buttons to each blog post, without calling any AI API or paying for a single token.

The feature is a row of links — Google AI, Claude, ChatGPT, Perplexity, Grok — plus a "Copy full article" button. Click one and that tool opens with your article already in the prompt box.

Two Ways to Build This

Call an API from your backend. You send the article to a model, get a summary, show it on the page. Good experience, and it costs money on every click, needs an API key, needs caching so a crawler cannot run up a bill, and makes you responsible for whatever the model says.

Send the reader to the tool with the text prefilled. No key, no cost, no liability, no backend at all. The reader uses their own account and whichever tool they already prefer.

We chose the second. For a blog it is the right trade — the reader is already logged into one of these tools, and "open Claude with this article" is genuinely what they want.

Features

• No API key, no cost, no backend.
• Works with five tools, easy to add a sixth.
• A copy button for the full text when the link is not enough.
• Honest about its own limitation, on the page.

With the following steps, you can add it.

1. Build the prefilled URLs.
2. Handle the length limit.
3. Add a copy button for the full text.
4. Tell the reader what it actually does.

Build the Prefilled URLs

Each tool accepts a prompt in the query string. So the link is your prompt, URL-encoded.

aiSummaryLinks = computed(() => {
  const p = this.post();
  if (!p) return null;
  const url = `${SITE_URL}/blog/${p.slug}`;
  const EXCERPT_LIMIT = 1200;
  const plain = this.toPlainText(p.contentMarkdown);
  // …build one URL per tool
});

A computed signal, so the links rebuild when the post loads and nothing has to be wired up manually.

The prompt is built from the title, the URL and an excerpt of the article as plain text — the Markdown is stripped first, because sending ## and backticks into a chat prompt wastes characters and reads badly.

Each link is a normal anchor.

<a [href]="aiSummaryLinks()?.claude" target="_blank" rel="noopener noreferrer"
   class="tag" aria-label="Summarize with Claude"
   title="Summarize with Claude (opens in a new tab)">

rel="noopener noreferrer" on every target="_blank" link. Without noopener, the opened page gets a reference back to your window through window.opener and can navigate it somewhere else. It is one attribute and it closes a real hole.

Every link gets an aria-label and a title, because the visible content is an SVG logo. A screen reader reading "link, link, link, link, link" is not a feature.

Handle the Length Limit

Here is the constraint that shapes the whole feature.

A URL cannot carry your whole article. Browsers, and the tools themselves, stop accepting query strings somewhere above about 2000 characters. Grok in particular breaks earliest. Over the limit you do not get a friendly error — you get a truncated prompt, or a page that will not load at all.

So the prompt carries an excerpt.

// Query-string prompts break above ~2000 chars on some of these tools (Grok in particular), so
// this is an excerpt, not the full post — "Copy full article" (below) covers the untruncated case.
const EXCERPT_LIMIT = 1200;

1200 characters, leaving room for the title, the URL and the instruction text around it.

The obvious question: why not let the AI fetch the page itself? Because most of these tools cannot browse by default, and the ones that can may not, depending on the user's plan and settings. A link to your article is not a reliable way to get your article in front of the model. The text has to travel in the prompt.

Add a Copy Button for the Full Text

An excerpt gives a shallow summary. So the row ends with a button that copies everything.

<button type="button" (click)="copyArticleText()"
        class="tag" aria-label="Copy full article text"
        title="Copy the full article text — paste it into any AI chat for a complete, untruncated summary">
  Copy full article
</button>

await navigator.clipboard.writeText(text);
inject(ToastService).success('Copied', 'Paste it into any AI chat.');

Two notes on the clipboard API.

It needs a secure context — HTTPS, or localhost. It is unavailable on a plain-HTTP page, so handle the rejected promise rather than assuming it worked.

It must be called from a user gesture. Inside a click handler is fine. Copying on page load is not, and browsers will block it.

Confirm the copy visibly. A button that does something invisible feels broken, and the user clicks it three more times. We use the app's toast service, which is exactly the kind of thing a shared UI kit is for — the right feedback was already available.

Tell the Reader What It Actually Does

The part I would most encourage you to copy is one line of small text under the row.

AI links open with a title + excerpt (these tools can't fetch the page themselves) — use "Copy full article" to paste the complete text for a fuller summary.

It admits the limitation in the interface, at the moment it matters.

Without it, a reader clicks "Claude", gets a summary of the first 1200 characters, and concludes your article was thin — or that the AI is bad. Neither is true, and neither is recoverable.

With it, the reader understands the trade and knows the better option is right there. Explaining a constraint in the UI is almost always cheaper than engineering around it, and here it is genuinely more honest too.

What We Would Do Differently at Scale

If this were a product rather than a blog, the calculation changes. An API-based summary, generated once at publish time and cached with the post, gives a better reading experience and costs one call per article rather than one per click.

The version described here is right when you have no budget, no key and no wish to own the output. Know which situation you are in.

Conclusion

In this article we learned how to build "Summarize with AI" links from prefilled chat URLs, why the roughly 2000 character query string limit forces an excerpt rather than the full article, how to add a clipboard button for the untruncated case, and why saying so plainly in the interface is better than letting the reader guess.

No API key, no cost, and about eighty lines of template and one computed signal.

Reference

• MDN: Clipboard API
• MDN: rel=noopener