Loading pattern preview
PatternsReal-world Examples
Accessibility Audit Agent
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 pattern 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
Install from the preview toolbar
Copy the install command above and run it in your project — Pro patterns include a short-lived token.
- 2
Add environment variables to .env.local
GOOGLE_GENERATIVE_AI_API_KEY, FIRECRAWL_API_KEY
- 3
Point client fetches at your API routes
Replace preview `/view/.../api/...` paths with `/api/...` in the installed files.
- 4
Customize the agent and tool files
Adapt prompts, tools, and stop conditions for your product — Copy for AI in the toolbar helps seed that work.
- 5
Run your dev server and open the pattern route
Install dependencies if needed, then start the app and verify responses.
Environment variables
Capabilities
AI SDK APIs
useChatgatewayToolLoopAgenttoolhasToolCallstepCountIscreateAgentUIStreamResponseInferAgentUIMessageDefaultChatTransportUIMessagegenerateObjectProviders
Gemini
External services
FirecrawlUpstash
Files added
14 filesapp/page.tsxapp/layout.tsxapp/api/a11y-agent/route.tslib/actions.tslib/a11y-types.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
14 totalnpm packages
8AISDK@mendable/firecrawl-jsUpstashlucide-reactNext.jsReactsonnerZod
Registry components
badgebuttoninputprogressskeletontabs
Critical files
a11y-agent/route.tsAPI route using createAgentUIStreamResponse with pageContext, includes server-side rate limiting.
ai/a11y-agent.tsToolLoopAgent with 6 accessibility audit tools, callOptionsSchema + prepareCall for page context injection, and WCAG-specialized instructions.
tools/audit-accessibility.tsFull WCAG 2.1 audit tool analyzing page context for issues grouped by severity.
tools/check-color-contrast.tsColor contrast checking tool testing WCAG compliance (AA: 4.5:1, AAA: 7:1).
tools/analyze-heading-structure.tsHeading hierarchy and ARIA landmark validation tool.
tools/generate-alt-text.tsAI-powered alt text suggestion tool for images based on context.
tools/create-remediation-plan.tsPrioritized fix list tool with effort estimates for accessibility remediation.
tools/export-audit-report.tsAudit report export tool supporting PDF, JSON, CSV, or GitHub Issues markdown formats.
Requirements
- Complexity
- Advanced
- Setup time
- ~10 minutes
- Node
- 24+
- Memory
- 256MB
Upstash Redis
