ProLevel AI Visibility Analyzer

Professional AI visibility analysis tool for B2B clients Analyze website visibility across ChatGPT, Claude, Perplexity, and Google AI

Live Demo: https://ai.prolevelsolutions.com (coming soon)

---

Overview

The ProLevel AI Visibility Analyzer is a sophisticated web application that evaluates how AI systems (ChatGPT, Claude, Perplexity, Google AI) discover, crawl, and cite your website content. Built for ProLevel Solutions' B2B clients in the USA market.

Key Features

• 8 AI Visibility Signals - Comprehensive analysis across:

  • Discoverability
  • Crawling & Indexing
  • Schema & Structured Data
  • Authority & Trust
  • Reviews & Social Proof
  • LLM-Friendly Content
  • Entity Graph Presence
  • LLM Share of Voice

• Platform-Specific Scores - Individual ratings for ChatGPT, Perplexity, Claude, and Google AI

• AI File Detection - Checks for llms.txt, ai.txt, and other AI-specific files

• Robots.txt Analysis - Verifies AI bot access (GPTBot, ClaudeBot, etc.)

• Schema Markup Detection - Identifies JSON-LD structured data

• PDF Export - Professional reports for clients

• 6-Week Implementation Roadmap - Actionable plan to improve visibility

---

Tech Stack

Frontend

• React 18.3.1 + TypeScript 5.8.3
• Vite 5.4.19 - Lightning-fast build tool
• Tailwind CSS 3.4.17 - Utility-first styling
• shadcn/ui - 50+ accessible components
• Framer Motion 12.24.12 - Smooth animations
• @react-spring/web 10.0.3 - Spring physics animations
• Lucide React - Beautiful icons
• jsPDF 4.0.0 + html2canvas 1.4.1 - PDF generation

Backend

• Supabase - PostgreSQL database + Edge Functions
• Deno Runtime - For edge functions
• Firecrawl API - Enhanced web scraping (✅ Configured & Active)
• Row Level Security (RLS) - Data protection

Deployment

• Vercel - Frontend hosting + CI/CD
• Supabase Cloud - Backend infrastructure
• GitHub - Version control

---

Quick Start

Prerequisites

• Node.js 18+ (LTS recommended)
• npm or yarn
• Supabase account (sign up free)
• Vercel account for deployment (sign up free)

Installation

1. Clone the repository:

   git clone https://github.com/ProLevelSolutions/prolevel-ai-visibility.git
   cd prolevel-ai-visibility

2. Install dependencies:

   npm install

3. Set up Supabase (detailed guide: SUPABASE_SETUP.md):

   • Create new Supabase project
   • Run database migrations
   • Deploy edge functions
   • Set Firecrawl API key (see FIRECRAWL_INTEGRATION.md)
   • Get API credentials

4. Configure environment variables:

   cp .env.example .env
   # Edit .env with your Supabase credentials

   IMPORTANT: See ENVIRONMENT_SETUP.md for complete configuration guide including Firecrawl API setup.

5. Run development server:

   npm run dev

6. Open browser:

   http://localhost:8080
   

---

Configuration

Environment Variables

Create a .env file in the project root:

# Supabase (required)
VITE_SUPABASE_PROJECT_ID=your_project_id
VITE_SUPABASE_URL=https://your_project_id.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=your_anon_key

# Analytics (optional)
VITE_GA_TRACKING_ID=G-XXXXXXXXXX
VITE_HOTJAR_ID=XXXXXXX

Important: Never commit .env to Git! Use .env.example as a template.

---

Project Structure

prolevel-ai-visibility/
├── src/
│   ├── pages/              # Main pages
│   │   └── AIVisibility.tsx  # Main analyzer (1,428 lines)
│   ├── components/         # React components
│   │   ├── layout/         # Header, Footer
│   │   ├── ui/             # shadcn/ui components
│   │   ├── RedParticles.tsx   # Background effects
│   │   ├── AnimatedNumber.tsx # Animated scores
│   │   └── EmojiReactions.tsx # Emoji feedback
│   ├── lib/                # Utilities
│   ├── hooks/              # Custom React hooks
│   ├── integrations/       # Supabase client
│   └── index.css           # Global styles + theme
├── supabase/
│   ├── migrations/         # Database schema
│   └── functions/          # Edge functions (Deno)
│       ├── analyze-visibility/
│       ├── run-scan/
│       └── deep-scan/
├── public/                 # Static assets
│   ├── prolevel-icon-512.png
│   ├── prolevel-favicon-16.png
│   ├── favicon.svg
│   └── site.webmanifest
├── docs/                   # Documentation
├── .env.example            # Environment template
├── SUPABASE_SETUP.md       # Supabase guide
└── README.md               # This file

---

Deployment

Deploy to Vercel

1. Push to GitHub:

   git remote add origin https://github.com/YOUR_ORG/prolevel-ai-visibility.git
   git push -u origin main

2. Import to Vercel:

   • Go to vercel.com/new
   • Import your GitHub repository
   • Configure:
     • Framework: Vite
     • Build Command: npm run build
     • Output Directory: dist
     • Install Command: npm ci

3. Add environment variables in Vercel:

   • VITE_SUPABASE_PROJECT_ID
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_PUBLISHABLE_KEY
   • Check: Production, Preview, Development

4. Deploy:

   • Click "Deploy"
   • Wait ~60 seconds
   • Visit your live URL

Custom Domain (Optional)

1. In Vercel: Settings → Domains
2. Add: ai.prolevelsolutions.com
3. Configure DNS:
   • Type: CNAME
   • Name: ai
   • Value: cname.vercel-dns.com

---

Usage

Basic Analysis

1. Enter a domain (e.g., prolevelsolutions.com)
2. Click "Analyze Visibility"
3. Wait 5-10 seconds for results
4. View scores across 8 signals + 4 platforms
5. Export PDF report

Understanding Scores

• 90-100: Excellent AI visibility
• 70-89: Good visibility
• 40-69: Needs improvement
• 0-39: Critical gaps found

Platform Scores

• ChatGPT: OpenAI's GPTBot + ChatGPT-User
• Perplexity: PerplexityBot crawler
• Claude: Anthropic's ClaudeBot
• Google AI: GoogleOther + Google-Extended

---

Development

Available Scripts

# Start dev server (http://localhost:8080)
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run linter
npm run lint

# Type check
npm run type-check

Testing Locally

Test with these domains:

• prolevelsolutions.com - Your own site
• openai.com - Good visibility example
• chatgpt.com - Partial access (blocks some bots)
• anthropic.com - Excellent visibility

---

Customization

Theme Colors

Edit src/index.css:

:root {
  --primary: 0 84% 60%;        /* Red #dc2626 */
  --background: 0 0% 8%;       /* Near black */
  --foreground: 0 0% 95%;      /* Off-white */
}

Branding

1. Replace icons in public/:

   • prolevel-icon-512.png
   • prolevel-favicon-16.png
   • favicon.svg

2. Update index.html meta tags

3. Update public/site.webmanifest

API Links

All ProLevel Solutions links in:

• src/components/layout/Header.tsx
• src/components/layout/Footer.tsx

Change EXTERNAL_LINK constant to your URL.

---

Performance

Lighthouse Scores (Target)

• Performance: 90+
• Accessibility: 95+
• Best Practices: 95+
• SEO: 100

Optimizations

• Code splitting with React.lazy()
• Image optimization (next-gen formats)
• Tailwind CSS purging
• Framer Motion reduced motion support
• Debounced resize handlers
• Particle count reduction on mobile

---

Security

Best Practices

1. Environment Variables

   • Never commit .env to Git
   • Use .env.example as template
   • Rotate keys every 90 days

2. Supabase RLS

   • Row Level Security enabled on all tables
   • Anonymous quick scans allowed
   • Auth required for deep scans

3. API Keys

   • Only use anon key in frontend
   • Never expose service_role key
   • Firecrawl key set as Supabase secret

4. CORS

   • Configure allowed origins in Supabase
   • Restrict to production domains

---

Monitoring

Vercel Analytics

View in Vercel dashboard:

• Page views
• User locations
• Performance metrics
• Error rates

Supabase Dashboard

Monitor:

• API requests
• Edge function invocations
• Database size
• Bandwidth usage

Error Tracking

Integrate Sentry (optional):

npm install @sentry/react

---

Troubleshooting

Black Screen on Load

Cause: Missing environment variables Fix: Add Supabase credentials to Vercel (see Deployment)

"Analysis failed" Error

Cause: Edge function not deployed or API key invalid Fix:

1. Deploy edge functions: supabase functions deploy analyze-visibility
2. Verify .env has correct credentials

Scores Show 0

Cause: Frontend animation bug (fixed in v1.0.5) Fix: Update to latest version or clear cache

Slow Analysis (>30 seconds)

Cause: Firecrawl API timeout or rate limiting Fix:

1. Check Firecrawl usage at firecrawl.dev/dashboard
2. Upgrade Firecrawl plan if needed
3. Implement caching for repeated scans

---

Contributing

We welcome contributions! Please:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

Code Style

• Use TypeScript for type safety
• Follow Prettier/ESLint rules
• Write meaningful commit messages
• Add comments for complex logic

---

License

© 2026 ProLevel Solutions. All rights reserved.

Proprietary software. Not for redistribution without permission.

---

Support

• Website: https://prolevelsolutions.com
• Contact: https://prolevelsolutions.com/contact
• Documentation: See /docs folder

---

Roadmap

Phase 2 Features (Coming Soon)

• User authentication (save scan history)
• Scheduled scans (weekly/monthly monitoring)
• Trend tracking (visibility over time)
• Competitive analysis (compare to competitors)
• White-label version (for agencies)
• API access (programmatic scans)
• Webhook integrations (Slack, Teams)
• Email reports (automated delivery)

Phase 3 Features (Future)

• Multi-language support (Spanish, French, German)
• Mobile app (iOS + Android)
• Chrome extension (quick analysis)
• Integration with CRM (HubSpot, Salesforce)
• AI recommendations (automated fixes)

---

Acknowledgments

Built with:

• Supabase - Backend infrastructure
• Vercel - Deployment platform
• shadcn/ui - Component library
• Tailwind CSS - Styling framework
• Firecrawl - Web scraping API

Original concept based on AI Visibility Analyzer by Save My Time (Bulgaria).

---

Made with ❤️ by ProLevel Solutions Your AI Automation Partner