# UI/UX Auditor (`lenient_grove/ai-ux-auditor-apify`) Actor

🚀 Ultimate AI based UI/UX Auditor for Website : Comprehensive analysis covering UX/UI, performance, accessibility, SEO, mobile, conversion & tech stack. AI-powered insights with 7 analysis types. Perfect for agencies & developers!
\#ai, #ux-analysis, seo, accessibility, #performance, #web-scraping

- **URL**: https://apify.com/lenient\_grove/ai-ux-auditor-apify.md
- **Developed by:** [Tejas Rawool](https://apify.com/lenient_grove) (community)
- **Categories:** Developer tools, AI, SEO tools
- **Stats:** 79 total users, 1 monthly users, 25.0% runs succeeded, 2 bookmarks
- **User rating**: 1.90 out of 5 stars

## Pricing

from $50.00 / 1,000 results

This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events.
Since this Actor supports Apify Store discounts, the price gets lower the higher subscription plan you have.

Learn more: https://docs.apify.com/platform/actors/running/actors-in-store#pay-per-event

## What's an Apify Actor?

Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.
Actors are written with capital "A".

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.
The best way to integrate Actors is as follows.

- **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use).
- **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`.
- **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`.
- **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`.
- **Any other language** — the [REST API](https://docs.apify.com/api/v2.md).

For usage examples, see the [API](#api) section below.

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).

# README

## 🚀 Ultimate AI Website Auditor

![AI Website Auditor Banner](./hero-banner.png)

> **The Most Comprehensive Website Analysis Tool on Apify**\
> Powered by OpenAI GPT-4, OpenRouter & Google Gemini AI

### 🎯 What is this?

The **Ultimate AI Website Auditor** is the most advanced website analysis tool available. It combines AI vision technology with comprehensive technical analysis to provide complete website audits covering design, performance, accessibility, SEO, mobile responsiveness, conversion optimization, and technology stack detection.

Perfect for agencies, developers, marketers, product teams, and anyone who needs professional-grade website analysis without the enterprise price tag.

***

### ✨ Comprehensive Features

#### 🤖 **AI-Powered Analysis**

- **Multi-Provider Support**: OpenAI GPT-4, OpenRouter, Google Gemini
- **7 Analysis Types**: General, Accessibility, Conversion, Performance, SEO, Mobile-First, Brand Consistency
- **AI Vision Technology**: Advanced screenshot analysis with actionable insights
- **Smart Recommendations**: Professional-grade suggestions for improvement

#### 📊 **Complete Technical Analysis**

- **⚡ Performance Metrics**: Load times, resource counts, optimization scores
- **♿ Accessibility Audit**: WCAG compliance, keyboard navigation, screen reader compatibility
- **📱 Mobile Responsiveness**: Touch targets, responsive design, mobile UX
- **🔍 SEO Analysis**: Meta tags, heading structure, structured data, image optimization
- **📝 Content Analysis**: Word count, readability, CTA analysis, social proof detection
- **💰 Conversion Optimization**: Trust signals, friction analysis, urgency elements

#### ⚙️ **Technology Stack Detection**

- **Frontend Frameworks**: React, Vue.js, Angular detection
- **CSS Frameworks**: Bootstrap, Tailwind CSS, Bulma identification
- **JavaScript Libraries**: jQuery, Lodash, Axios discovery
- **Analytics & Marketing**: Google Analytics, Facebook Pixel, marketing tools
- **E-commerce Platforms**: Shopify, WooCommerce, payment processors
- **CMS Detection**: WordPress, Drupal, Joomla identification
- **Security & Performance**: SSL certificates, CDNs, service workers

#### 📈 **Advanced Reporting**

- **Multiple Score Categories**: Overall UX, Performance, Accessibility, Mobile, SEO, Content, Conversion
- **Visual Data Presentation**: 5 different dataset views for various use cases
- **Color Palette Extraction**: AI-identified brand colors
- **Screenshot Capture**: High-quality PNG screenshots with direct links
- **Structured JSON Output**: Perfect for integrations and further analysis

***

### 🚀 Quick Start

#### 1. Add URLs to Analyze

Provide the websites you want to audit:

```json
[
  { "url": "https://yourwebsite.com" },
  { "url": "https://competitor.com" }
]
```

#### 2. Choose Your Analysis Type

Select from 7 comprehensive audit modes:

- General UX evaluation
- Accessibility (WCAG) audit
- Conversion optimization review
- Performance analysis
- SEO content structure
- Mobile-first design check
- Brand consistency review

#### 3. Pick Your Mode

**Option A: Free Tier** *(Recommended for getting started)*

- ✅ Enable "Use Free Tier"
- 🎁 Get 5 free audits per day
- 💳 No API key or credit card needed
- ⚡ Powered by Google Gemini

**Option B: Unlimited with Your API Key**

- Disable "Use Free Tier"
- Add your OpenAI (`sk-...`) or Google Gemini (`AIza...`) API key
- Get unlimited audits
- Costs: ~$0.01 per audit (OpenAI) or free (Gemini free tier)

#### 4. Run & Get Results!

Your audit will include:

- **UX Score** (1-10)
- **Summary** of overall quality
- **Design Flaws** identified
- **Positive Aspects** highlighted
- **Recommendations** for improvement
- **Color Palette** extracted
- **Screenshot** saved for reference

***

### 📊 Sample Output

```json
{
  "url": "https://example.com",
  "audit_date": "2025-12-10T16:45:00.000Z",
  "analysis_type": "conversion",
  "viewport": "desktop",
  "ai_provider": "gemini",
  "score": 7.5,
  "summary": "Clean modern design with strong visual hierarchy. However, the primary CTA lacks contrast and trust signals are minimal.",
  "color_palette": [
    "#FF6B6B",
    "#4ECDC4",
    "#45B7D1",
    "#FFFFFF",
    "#2C3E50"
  ],
  "design_flaws": [
    "Call-to-action button has low color contrast (may fail WCAG AA)",
    "No visible trust badges or social proof above the fold",
    "Navigation menu items too small on mobile (< 44px touch targets)"
  ],
  "positive_aspects": [
    "Excellent use of whitespace creates breathing room",
    "Typography hierarchy is clear and scannable",
    "High-quality hero image with proper optimization"
  ],
  "recommendations": [
    "Increase CTA button contrast to at least 4.5:1 ratio",
    "Add trust signals (customer logos, testimonials) above the fold",
    "Implement larger touch targets for mobile navigation (min 44x44px)",
    "Consider A/B testing CTA copy for higher conversion"
  ],
  "screenshot_url": "https://api.apify.com/v2/key-value-stores/.../SCREENSHOT_xyz.png",
  "free_tier_remaining": 3
}
```

***

### 💰 Pricing & API Keys

#### Free Tier (Recommended for Beginners)

- **Cost**: $0
- **Limit**: 5 audits per day
- **Setup**: Just enable "Use Free Tier" checkbox
- **AI Provider**: Google Gemini

#### Bring Your Own API Key (Unlimited)

##### Option 1: OpenAI GPT-4o Vision

1. Visit [OpenAI Platform](https://platform.openai.com/api-keys)
2. Create an API key (starts with `sk-...`)
3. Add credits to your OpenAI account ($5-10 recommended)
4. **Cost**: ~$0.01 per website audit
5. Paste key into the "API Key" field

##### Option 2: Google Gemini

1. Visit [Google AI Studio](https://aistudio.google.com/app/apikey)
2. Create a free API key (starts with `AIza...`)
3. **Cost**: FREE (with generous limits)
4. Paste key into the "API Key" field

> 💡 **Pro Tip**: Gemini API offers a free tier with 1,500 requests/day. Perfect for agencies analyzing multiple sites!

***

### 🎓 Use Cases

#### For Designers

- Quickly audit competitors' websites
- Identify design inconsistencies in client projects
- Extract color palettes from inspiration sites
- Get objective UX feedback on your work

#### For Developers

- Pre-launch UX quality checks
- Accessibility compliance scanning
- Performance optimization insights
- SEO content structure validation

#### For Agencies

- Automated audit reports for proposals
- Client site reviews at scale
- Competitive analysis dashboards
- Quality assurance before handoff

#### For Product Teams

- A/B test variant analysis
- Conversion funnel optimization
- Mobile-first design validation
- Brand consistency monitoring

***

### 🔧 Configuration Options

| Field | Type | Description | Default |
|-------|------|-------------|---------|
| **Start URLs** | Array | Websites to audit | Required |
| **Use Free Tier** | Boolean | Enable free mode (5/day limit) | `true` |
| **API Key** | String | Your OpenAI/Gemini key | Optional |
| **Analysis Type** | Select | Audit focus area | `general` |
| **Viewport** | Select | Desktop or Mobile | `desktop` |
| **Proxy Config** | Object | Apify Proxy settings | Enabled |
| **Max Concurrency** | Number | Parallel audits (1-10) | `5` |

***

### 🔧 Local Development & Testing

#### Prerequisites

- Node.js 20+
- npm or yarn

#### Setup

```bash
## Clone the repository
git clone <your-repo-url>
cd ai-ux-auditor

## Install dependencies
npm install

## Test locally (uses default input)
npm test

## Run with custom input
npm start
```

#### Docker Build

```bash
## Build the Docker image
docker build -t ai-ux-auditor .

## Run the container
docker run ai-ux-auditor
```

### 🛠️ Advanced Features

#### Proxy Support

Built-in Apify Proxy support to:

- Avoid rate limiting
- Access geo-restricted sites
- Ensure consistent results

#### Cookie Consent Handling

Automatically dismisses common cookie popups:

- GDPR consent banners
- Cookie acceptance dialogs
- Privacy policy overlays

#### Screenshot Management

All screenshots automatically saved to Apify Key-Value Store with:

- Unique identifiers
- Direct access URLs
- PNG format (high quality)

***

### 📚 Technical Details

#### Tech Stack

- **Runtime**: Node.js 20
- **Crawler**: Crawlee (PlaywrightCrawler)
- **Browser**: Playwright Chromium (headless)
- **AI**: OpenAI SDK + Google Generative AI SDK
- **Platform**: Apify

#### Browser Automation

- Viewport simulation (desktop/mobile)
- Network idle wait (ensures full page load)
- Screenshot capture (above-the-fold)
- Cookie consent auto-dismiss

#### AI Integration

- OpenAI GPT-4o Vision (1,500 token responses)
- Google Gemini 1.5 Flash (JSON structured output)
- Auto-detection of API key type
- Fallback to free tier if no key provided

***

### 🐛 Troubleshooting

#### "Free tier limit reached"

➡️ You've used your 5 daily free audits. Options:

1. Wait 24 hours for reset
2. Add your own API key for unlimited use

#### "Invalid API Key"

➡️ Check your API key format:

- OpenAI: starts with `sk-`
- Gemini: starts with `AIza`
- Ensure credits are available (OpenAI only)

#### "Navigation timeout"

➡️ Website took too long to load. This is logged as a "FAILED" result in your dataset. Try:

- Checking if the website is accessible
- Enabling Apify Proxy
- Increasing timeout (requires code modification)

#### "AI analysis failed"

➡️ Possible causes:

- API rate limits exceeded
- Invalid API credentials
- Network connectivity issues

***

### 📖 FAQ

**Q: How accurate are the AI audits?**\
A: The AI provides professional-level insights based on visual analysis. While not a replacement for human UX experts, it catches 80%+ of common issues and provides excellent directional guidance.

**Q: Can I analyze password-protected sites?**\
A: Not directly. You'll need to provide publicly accessible URLs or add authentication in the code.

**Q: How long does each audit take?**\
A: Typically 10-30 seconds per URL, depending on page load speed and AI provider response time.

**Q: Can I download the screenshots?**\
A: Yes! Screenshots are saved to Apify Key-Value Store. Use the `screenshot_url` from the dataset to download.

**Q: What's the difference between OpenAI and Gemini?**\
A: Both provide excellent results. Gemini is free (with limits) and faster. OpenAI GPT-4o Vision may provide slightly more detailed analysis but costs ~$0.01 per audit.

**Q: Is my data private?**\
A: When using free tier, screenshots are sent to Google Gemini API. When using your own key, data goes to your AI provider (OpenAI/Google). No data is stored by this actor beyond the audit results.

***

### 🎯 Apify $1M Challenge

This actor was built for the [Apify $1M Challenge](https://blog.apify.com/apify-1m-challenge/) with the goal of providing maximum utility to the developer and design community.

**Why it deserves to win:**

- ✅ Solves a real problem (expensive UX audits)
- ✅ Accessible to everyone (free tier available)
- ✅ Professional-quality output
- ✅ Multiple use cases (design, dev, marketing, product)
- ✅ Easy to use, hard to replicate value
- ✅ Scales with AI advancements

***

### 🤝 Support & Contributing

Found a bug? Have a feature request? Want to contribute?

- **GitHub**: [Report Issues](https://github.com/yourusername/ai-ux-auditor)
- **Email**: support@yourdomain.com
- **Discord**: Join our community

***

### 📝 License

MIT License - feel free to fork and customize!

***

### 🌟 Credits

Built with ❤️ by **Tejas Rawool**

Powered by:

- [Apify](https://apify.com) - Web scraping and automation platform
- [OpenAI](https://openai.com) - GPT-4o Vision API
- [Google AI](https://ai.google.dev) - Gemini Vision API
- [Crawlee](https://crawlee.dev) - Web crawling framework
- [Playwright](https://playwright.dev) - Browser automation

***

**Ready to transform your UX workflow?** [Start Analyzing →](https://console.apify.com/actors/your-actor-id)

# Actor input Schema

## `startUrls` (type: `array`):

List of website URLs you want to analyze for UI/UX quality

## `apiKey` (type: `string`):

Add your API key: OpenAI (sk-...), OpenRouter (sk-or-...), or Gemini (AIza...). The actor will automatically detect the provider.

## `analysisType` (type: `string`):

Choose the type of UI/UX analysis you want to perform

## `viewPort` (type: `string`):

Simulate desktop or mobile device for screenshot capture

## `proxyConfiguration` (type: `object`):

Use Apify Proxy to avoid blocking and access geo-restricted content

## `maxConcurrency` (type: `integer`):

Maximum number of pages to analyze simultaneously (recommended: 3-5 to avoid API rate limits)

## Actor input object example

```json
{
  "startUrls": [
    {
      "url": "https://www.apple.com"
    }
  ],
  "analysisType": "general",
  "viewPort": "desktop",
  "proxyConfiguration": {
    "useApifyProxy": true
  },
  "maxConcurrency": 5
}
```

# Actor output Schema

## `dashboard` (type: `string`):

Beautiful HTML dashboard with all audit results visualized

## `overview` (type: `string`):

High-level summary of all website audits with overall scores and AI summaries

## `detailedBreakdown` (type: `string`):

Comprehensive analysis including all scores, technology stack, and recommendations

## `scoreBreakdown` (type: `string`):

All individual scores for performance, accessibility, mobile, SEO, content, and conversion

## `technicalDetails` (type: `string`):

Technology stack detection, performance metrics, and technical analysis

## `comprehensiveAnalysis` (type: `string`):

Full dataset with all audit data and AI insights

## `screenshots` (type: `string`):

Captured website screenshots used for AI analysis

## `rawData` (type: `string`):

Complete dataset in JSON format for programmatic access

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {
    "startUrls": [
        {
            "url": "https://www.apple.com"
        }
    ],
    "proxyConfiguration": {
        "useApifyProxy": true
    }
};

// Run the Actor and wait for it to finish
const run = await client.actor("lenient_grove/ai-ux-auditor-apify").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = {
    "startUrls": [{ "url": "https://www.apple.com" }],
    "proxyConfiguration": { "useApifyProxy": True },
}

# Run the Actor and wait for it to finish
run = client.actor("lenient_grove/ai-ux-auditor-apify").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print("💾 Check your data here: https://console.apify.com/storage/datasets/" + run["defaultDatasetId"])
for item in client.dataset(run["defaultDatasetId"]).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{
  "startUrls": [
    {
      "url": "https://www.apple.com"
    }
  ],
  "proxyConfiguration": {
    "useApifyProxy": true
  }
}' |
apify call lenient_grove/ai-ux-auditor-apify --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "command": "npx",
            "args": [
                "mcp-remote",
                "https://mcp.apify.com/?tools=lenient_grove/ai-ux-auditor-apify",
                "--header",
                "Authorization: Bearer <YOUR_API_TOKEN>"
            ]
        }
    }
}

```

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/qIYF8xI8cQh7D4QYu/builds/GhsI6wd6Ey0vCCOeo/openapi.json