TemplatesReal-world Examples

Accessibility Audit Agent

Audit any website for WCAG 2.1 accessibility compliance using Firecrawl, then use AI tools to analyze issues by severity, check color contrast, validate heading structure, generate alt text, and create prioritized remediation plans with visual tool outputs.

Loading preview…

Problems solved

Technical challenges this implementation handles out of the box.

Audit websites for WCAG 2.1 accessibility issues with Firecrawl
Check color contrast against AA and AAA thresholds
Validate heading hierarchy and ARIA landmarks
Generate alt text suggestions and prioritized remediation plans
Export audit findings for engineering handoff

Use cases

Products and workflows this pattern is designed to support.

Website accessibility auditing
WCAG compliance reviews
Remediation planning for product teams
Alt text generation workflows
Accessibility report generation

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: GOOGLE_GENERATIVE_AI_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

GOOGLE_GENERATIVE_AI_API_KEYGet key
FIRECRAWL_API_KEYGet key

Capabilities

AI SDK APIs

useChatgatewayToolLoopAgenttoolhasToolCallstepCountIscreateAgentUIStreamResponseInferAgentUIMessageDefaultChatTransportUIMessagegenerateObject

Providers

Gemini

External services

FirecrawlUpstash

Files added

14 files

app/page.tsx
app/layout.tsx
app/api/a11y-agent/route.ts
lib/actions.ts
lib/a11y-types.ts
lib/rate-limit.ts
lib/ai/a11y-agent.ts
lib/ai/tools/audit-accessibility.ts
lib/ai/tools/check-color-contrast.ts
lib/ai/tools/analyze-heading-structure.ts
lib/ai/tools/generate-alt-text.ts
lib/ai/tools/create-remediation-plan.ts
lib/ai/tools/export-audit-report.ts
README.md

Dependencies

15 total

npm packages

AISDK@mendable/firecrawl-jsUpstashlucide-reactNext.jsReactsonnerZod

Registry components

badgebuttoninputprogressskeletontabssheet

Critical files

a11y-agent/route.ts
API route using createAgentUIStreamResponse with pageContext, includes server-side rate limiting.
ai/a11y-agent.ts
ToolLoopAgent with 6 accessibility audit tools, callOptionsSchema + prepareCall for page context injection, and WCAG-specialized instructions.
tools/audit-accessibility.ts
Full WCAG 2.1 audit tool analyzing page context for issues grouped by severity.
tools/check-color-contrast.ts
Color contrast checking tool testing WCAG compliance (AA: 4.5:1, AAA: 7:1).
tools/analyze-heading-structure.ts
Heading hierarchy and ARIA landmark validation tool.
tools/generate-alt-text.ts
AI-powered alt text suggestion tool for images based on context.
tools/create-remediation-plan.ts
Prioritized fix list tool with effort estimates for accessibility remediation.
tools/export-audit-report.ts
Audit report export tool supporting PDF, JSON, CSV, or GitHub Issues markdown formats.