Why?

AI took your job. Then it took your browser's job.

Every product update has AI. Every startup pitch has AI. Every tech conference has AI. You can't return your limited edition pink Stanley tumbler to Target without the customer service guy telling you about his ChatGPT wrapper startup that's about to blow up.

But now it's gotten even worse. With the release of ChatGPT's Atlas and other AI browsers, AI can click buttons and fill out forms. It can navigate the web. It's coming for the entire internet.

You could make it easy for them. Or you could not.

Let's make it harder.

We already have patterns that frustrate users. Dark patterns have tortured humans for decades. Microscopic close buttons. Fake download links. Cookie consent mazes five layers deep. We adapted. We learned to find the real X button surrounded by decoys.

Let's take these patterns and adapt them for AI. Read the full intro article.

Traffic Light Forms

Three-Form Carousel

Installation

1.npm install anti-ai-ui

Quick Start

1.import { RunawayButton } from 'anti-ai-ui';
2.
3.function App() {
4.  return (
5.    <RunawayButton onRealClick={() => alert('Caught me!')}>
6.      Try to click me!
7.    </RunawayButton>
8.  );
9.}

What's In It

The Anti-AI UI Framework is a UI library that provides 20 AI-hostile components. You can install it with npm and use it on any website. It has everything you need to make AI miserable:

• 20 components
• React and vanilla JS
• Zero dependencies
• TypeScript
• Tree-shakeable, so you only ship the suffering you need
• Works with React, Vue, Angular, Svelte, Next.js, HTMX, jQuery. Anything that can run JavaScript.
• 403 unit tests. Because hostile interfaces still need to be reliable. The button should always run away. The password requirements should always change. Consistency matters, even when nothing else does.

MIT licensed, because suffering should be free.

Framework Support

Works with all major frameworks and vanilla JavaScript

20 Anti-AI Patterns