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

I operate several static sites, such as GitHub Pages and standalone HTML files. Whenever I sought an AI feature for one of them, the response was always to add a backend. This led me to create twelve blocks that don't require a backend. Static AI Block is a collection of copy-paste blocks, including features for asking a question, summarizing, translating, creating a FAQ bot, drafting a reply, rewriting text, extracting data to JSON, enabling smart search, generating alt text for images, generating a quiz from the page, and providing an "Explain" button for code.

Each block is composed of plain HTML and vanilla JavaScript, ranging from 40 to 60 lines in length. There is no need for a framework or a build step.

To view the live gallery where every block is operational, visit https://aiblock.onetagai.com/?ref=devto. The source code for the blocks is available on GitHub: https://github.com/fengyiqicoder/static-ai-block (MIT License).

Here's how it functions: a block loads a single script tag from OneTag AI and invokes onetag.ask(prompt, input) within the browser. The input can be a string, any element on the page, a form, an image, or a plain object. The response can stream back in real-time or be returned as JSON when json: true is specified.

The primary objective behind these blocks is to be publicly accessible, akin to an analytics ID. This design allows them to utilize only the account's free allowance, which is set at 1,000,000 tokens. To obtain an account, you must submit your email address via the following command:

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

When it comes to user experience, each block provides a concise description of its function and includes an example that can be clicked to demonstrate its use. No prior reading is required. To facilitate integration, the block titled "To AI" automatically copies the block along with the necessary setup steps, allowing you to paste it into Cursor or Claude Code.

The system then assists in signing you up and wiring the block into your site. If you have any suggestions for which block to include on a specific page or if you believe any block is missing from the collection, please share your thoughts. The list is under the MIT license, making it permissible to submit pull requests with new blocks. A block consists of a single HTML file, with a comment placed on the first line.