HATCHA

CAPTCHA beweist, dass du ein Mensch bist. HATCHA beweist, dass du keiner bist.

HATCHA-Modal in Aktion

HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment) ist ein umgekehrtes CAPTCHA, das den Zugang hinter Herausforderungen verbirgt, die für KI-Agenten trivial, für Menschen aber mühsam sind — Multiplikation großer Zahlen, Zeichenkettenumkehrung, binäre Dekodierung und mehr.

Serverseitige Überprüfung — Antworten erreichen niemals den Client. HMAC-signierte Tokens, zustandslos, keine Datenbank erforderlich.
5 integrierte Herausforderungstypen — Mathe, Zeichenkettenumkehrung, Zeichenzählung, Sortieren, binäre Dekodierung.
Erweiterbar — Benutzerdefinierte Herausforderungsgeneratoren zur Laufzeit registrieren.
Thematisierbar — Dunkel, Hell oder Automatik über CSS-Custom-Properties.
Framework-Adapter — Next.js App Router und Express Middleware sofort einsatzbereit.

Schnellstart (Next.js)

1. Installieren

npm install @mondaycom/hatcha-react @mondaycom/hatcha-server

2. API-Route hinzufügen

// app/api/hatcha/[...hatcha]/route.ts
import { createHatchaHandler } from "@mondaycom/hatcha-server/nextjs";

const handler = createHatchaHandler({
  secret: process.env.HATCHA_SECRET!,
});

export const GET = handler;
export const POST = handler;

3. Layout umschließen

// app/layout.tsx
import { HatchaProvider } from "@mondaycom/hatcha-react";
import "@mondaycom/hatcha-react/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <HatchaProvider>{children}</HatchaProvider>
      </body>
    </html>
  );
}

4. Verifizierung auslösen

"use client";
import { useHatcha } from "@mondaycom/hatcha-react";

function AgentModeButton() {
  const { requestVerification } = useHatcha();

  return (
    <button
      onClick={() =>
        requestVerification((token) => {
          console.log("Agent verified!", token);
        })
      }
    >
      Enter Agent Mode
    </button>
  );
}

5. Geheimnis festlegen

# .env.local
HATCHA_SECRET=your-random-secret-here

So funktioniert es

Client                            Server
  │                                 │
  │  GET /api/hatcha/challenge      │
  │────────────────────────────────►│
  │                                 │  Generate challenge
  │                                 │  Hash answer
  │                                 │  HMAC-sign { hash, expiry }
  │  { challenge (no answer), token }
  │◄────────────────────────────────│
  │                                 │
  │  Agent solves the challenge     │
  │                                 │
  │  POST /api/hatcha/verify        │
  │  { answer, token }              │
  │────────────────────────────────►│
  │                                 │  Verify HMAC signature
  │                                 │  Check expiry
  │                                 │  Compare answer hash
  │  { success, verificationToken } │
  │◄────────────────────────────────│

Die Antwort erreicht niemals den Client. Das signierte Token ist undurchsichtig und enthält nur einen gehashten Antwort + Ablauf. Die Überprüfung ist zustandslos — keine Datenbank erforderlich.

Herausforderungstypen

Benutzerdefinierte Herausforderungen

import { registerChallenge } from "@mondaycom/hatcha-server";

registerChallenge({
  type: "hex",
  generate() {
    const n = Math.floor(Math.random() * 0xffffff);
    return {
      display: {
        type: "hex",
        icon: "0x",
        title: "Hex Decode",
        description: "Convert this hex number to decimal.",
        prompt: `0x${n.toString(16).toUpperCase()}`,
        timeLimit: 30,
        answer: String(n),
      },
      answer: String(n),
    };
  },
});

Design-Anpassung

HATCHA verwendet CSS-Custom-Properties, die unter --hatcha-* abgegrenzt sind. Überschreibe sie in jedem übergeordneten Element:

[data-hatcha-theme] {
  --hatcha-accent: #3b82f6;
  --hatcha-accent-light: #60a5fa;
  --hatcha-bg: #060b18;
  --hatcha-fg: #e4eaf6;
  --hatcha-success: #22c55e;
  --hatcha-danger: #ef4444;
}

Übergib theme="dark", theme="light" oder theme="auto" an <HatchaProvider> oder <Hatcha>.

Express

import express from "express";
import { hatchaRouter } from "@mondaycom/hatcha-server/express";

const app = express();
app.use(express.json());
app.use("/api/hatcha", hatchaRouter({ secret: process.env.HATCHA_SECRET! }));

app.listen(3000);

Pakete

Paket	Beschreibung

Entwicklung

git clone https://github.com/mondaycom/HATCHA.git
cd HATCHA
pnpm install
pnpm build
cd examples/nextjs-app
pnpm dev

Mitwirken

Beiträge sind willkommen! Siehe CONTRIBUTING.md für Einrichtungsanweisungen und Richtlinien.

Lizenz

MIT

`math`	×	Multiplikation von 5-stelligen × 5-stelligen Zahlen	30 s
`string`	↔	Umkehrung einer zufälligen Zeichenkette mit 60–80 Zeichen	30 s
`count`	#	Zählen eines bestimmten Zeichens in ~250 Zeichen	30 s
`sort`	⇅	Sortieren von 15 Zahlen, Rückgabe der k-kleinsten	30 s
`binary`	01	Dekodieren von binären Oktetten zu ASCII	30 s

HATCHA

Beliebteste

HATCHA

Schnellstart (Next.js)

1. Installieren

2. API-Route hinzufügen

3. Layout umschließen

4. Verifizierung auslösen

5. Geheimnis festlegen

So funktioniert es

Herausforderungstypen

Benutzerdefinierte Herausforderungen

Design-Anpassung

Express

Pakete

Entwicklung

Mitwirken

Lizenz