DEV Community

Cover image for Free AI blocks for any static site: copy, paste, it works (no backend)
YQ Feng
YQ Feng

Posted on

Free AI blocks for any static site: copy, paste, it works (no backend)

I run a few static sites (GitHub Pages, a couple of single HTML files) and every time I wanted an AI feature on one of them, the answer was "add a backend". So I made twelve blocks that don't need one.

Static AI Block is a gallery of copy-paste blocks: ask this page, summarize, translate, FAQ bot, draft a reply, rewrite, extract to JSON, smart search, alt text for images, a quiz from the page, and an Explain button for code. Each block is plain HTML and vanilla JavaScript, 40–60 lines, no framework, no build step.

The Summarize block answering, live in the gallery

Live gallery (every block runs right there): https://aiblock.onetagai.com/?ref=devto
Repo (MIT): https://github.com/fengyiqicoder/static-ai-block

How it works: the block loads one script tag from OneTag AI and calls onetag.ask(prompt, input) from the browser. input can be a string, any element on the page, a form, an image or a plain object; the answer streams back, or comes back as JSON with json: true. The key is public by design, like an analytics ID; it can only spend that account's free allowance (1,000,000 tokens). You get one by posting your email:

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

Two things I tried to get right:

  1. Each block says what it does in one line and has an example you can click. No reading required.
  2. "Copy to AI" copies the block together with the setup steps, so you can paste it into Cursor or Claude Code and let the agent sign you up and wire it in.

What I'd like to hear: which block you'd actually put on a page, and which one is missing. The list is MIT, so PRs with new blocks are welcome; a block is one HTML file with a comment on the first line.

Top comments (0)