Regex Explainer Lab

cd apps/experiments/regex-explainer-lab
pnpm install
pnpm dev

Regex Explainer Lab splits responsibilities: logic.ts compiles the pattern and highlights matches (no AI), while POST /api/explain uses generateObject for plain-English explanation and token meanings. The UI shows live highlights even before you call the API. No AI keys - 503 for explain only; highlights still work client-side.

FeaturesCopy Anchor Link

• Local highlighting – highlightMatches + renderHighlightedHtml.
• AI explanation – overview, parts, caveats.
• Flags normalize – always includes g for multi-match UI.
• Sample name regex – title-case phrases.
• Honest unavailable state for AI.

Server ReferenceCopy Anchor Link

POST /api/explainCopy Anchor Link

{ "pattern": "\\d+", "flags": "g", "testString": "a12b" }

Success (200)Copy Anchor Link

{
  "plainEnglish": "Matches one or more digits.",
  "parts": [{ "token": "\\d+", "meaning": "one or more digits" }],
  "caveats": ["Uses JavaScript RegExp semantics."],
  "highlights": {
    "ok": true,
    "flags": "g",
    "matches": [{ "start": 1, "end": 3, "text": "12", "index": 0 }]
  },
  "provider": "ai-gateway"
}

Implementation DetailsCopy Anchor Link

Use CasesCopy Anchor Link

• Teach regex with live match feedback.
• Document patterns in plain English.
• Unit-test highlighting without mocks.

LimitationsCopy Anchor Link

• JS RegExp only (not PCRE / Rust regex).
• Catastrophic backtracking is possible with hostile patterns.
• No auth / rate limits.

Use in your projectCopy Anchor Link

Import highlightMatches anywhere; keep AI explanation optional behind a Route Handler.

DeploymentCopy Anchor Link

Deploy on Vercel

Local DevelopmentCopy Anchor Link

cd apps/experiments/regex-explainer-lab
pnpm install
pnpm dev

ConfigurationCopy Anchor Link

Vercel / Next.js Features UsedCopy Anchor Link

• AI SDK generateObject
• Vercel AI Gateway
• Route Handlers
• Zod

Next StepsCopy Anchor Link