Loading pattern preview
BlocksReal-world Examples
Accessibility Audit Agent
Accessibility Audit Agent
Scan a page's HTML for common accessibility gaps (alt text, headings, links, forms, landmarks). Firecrawl scrapes the page; deterministic checks score and list fixes. Optional agent tools read the same scraped context.
Use this when you want a fast HTML accessibility scan of a live URL with an honest score and fix list, not a full WCAG conformance engine.
Loading pattern preview
Problems solved
Technical challenges this implementation handles out of the box.
- Scan scraped HTML for missing alt text, heading gaps, vague links, unlabeled forms, and landmarks
- Show an answer-first score and fix list without a chat-first workflow
- Export a plain-language report of what the HTML scan found
- Optionally run grounded agent tools on the same scraped context
Use cases
Products and workflows this pattern is designed to support.
- HTML accessibility reviews before a design handoff
- Quick alt text and heading checks on a live URL
- Remediation lists for product teams
- Exportable accessibility findings for engineering
Compare with
Similar patterns, and when each one is the better fit.
SEO AuditUse this when a marketing team needs exportable SEO scorecards that check title, meta description, and Open Graph tags and list top fixes for a page.
Branding AgentUse this when you want a grounded agent that pulls a site's brand tokens and answers contrast, palette, and voice questions from the scraped page.
Jev AEO AuditUse this when auditing a page for AEO and you want title, canonical, and noindex checks in code while Jev judges the citation-worthiness.
Search - Firecrawl (robust)FreeUse this when Firecrawl is your search provider and your chat agent needs to find pages by query rather than scrape URLs you already have.
Setup
Requirements, wiring steps, and what this pattern adds to your project.
Getting started
Pick how you want to pull this pattern in. Then wire env vars and routes the same way.
- 1
Download → Next.js app
Use Download → Next.js app in the preview toolbar. You get a zip scaffold (Pro downloads rewrite preview `/view/.../api/*` paths to `/api/*` automatically).
- 2
Extract the zip and install dependencies
Unzip the archive, then run `pnpm install` (or npm / yarn) in the project folder.
- 3
Fill .env.local
The download includes .env.local placeholders when needed. Add real values for: AI_GATEWAY_API_KEY, FIRECRAWL_API_KEY.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions in the generated project for your product.
- 5
Run the app and open the pattern route
Run `pnpm dev`, open the setup/checklist page if present, then navigate to the generated pattern route and verify responses.
Environment variables
Capabilities
AI SDK APIs
gatewayToolLoopAgenttoolhasToolCallstepCountIscreateAgentUIStreamResponseInferAgentUIMessageUIMessagegenerateObjectProviders
deepseek
External services
FirecrawlUpstash
Files added
18 files
app/page.tsxapp/layout.tsxapp/api/a11y-agent/route.tslib/actions.tslib/a11y-types.tslib/analyzers.tslib/audit-areas.tslib/contrast.tslib/page-context.tslib/rate-limit.tslib/ai/a11y-agent.tslib/ai/tools/audit-accessibility.tslib/ai/tools/check-color-contrast.tslib/ai/tools/analyze-heading-structure.tslib/ai/tools/generate-alt-text.tslib/ai/tools/create-remediation-plan.tslib/ai/tools/export-audit-report.tsREADME.md
Dependencies
10 total
npm packages
8AISDK@mendable/firecrawl-jsUpstashlucide-reactNext.jsReactsonnerZod
Registry components
buttoninput
Critical files
4 files
lib/analyzers.tsDeterministic HTML accessibility analyzers that produce the result-screen score and issues from scraped PageContext.
lib/actions.tsServer action that scrapes a URL with Firecrawl and extracts accessibility-relevant HTML fields. Does not invent colour pairs.
ai/a11y-agent.tsPer-request ToolLoopAgent factory that injects scraped PageContext via toolsContext so tools do not take model-filled page data.
a11y-agent/route.tsAPI route that validates pageContext and streams the grounded a11y agent.
Requirements
- Complexity
- Advanced
- Setup time
- ~10 minutes
- Node
- 24+
- Memory
- 256MB
Upstash Redis
