SiteScope AI

Transform any website into a high-performing experience with AI-powered audits for SEO, accessibility, performance, security, UX, and actionable improvement recommendations.

Comment

The SiteScope AI Story — Hackathon Pitch & Developer Journey

💡 The Inspiration

Every year, thousands of websites launch with critical structural flaws: unoptimized image payloads that increase mobile bounce rates, missing security headers that expose users to cross-site scripting (XSS), and accessibility blockers that exclude users with disabilities.

Standard audit checkers like Lighthouse identify these issues but stop short of helping developers fix them. Developers must copy the audit errors, research the syntax definitions, write the patches, test them, and organize tasks in JIRA.

We built SiteScope AI to bridge this gap. We wanted to build a unified AI-powered Engineering Workspace that doesn't just scan websites, but actively assists in resolving the issues. It acts as an autonomous QA analyst, a security reviewer, and a product manager rolled into one browser interface.

🛠️ How We Built It (Architecture & Implementation)

SiteScope AI is built on a modern, high-performance web architecture:

1. The Technology Stack

  • Frontend: Next.js (Client Components, React 19, Framer Motion for smooth micro-interactions, Tailwind CSS for glassmorphism panels).
  • Backend: Next.js Serverless API endpoints written in TypeScript.
  • AI Telemetry: Google Gemini multimodal vision and text APIs, combined with Cheerio DOM scraper engines.
  • No-SQL Storage Registry: A local file-based database ledger tracking chronological scans in JSON formats under .cache/.

2. Mathematics of the Scoring & Simulator Engine

SiteScope AI calculates overall website health as a simple average of four core subscores:

$$S_{\text{overall}} = \frac{S_{\text{perf}} + S_{\text{seo}} + S_{\text{accessibility}} + S_{\text{security}}}{4}$$

When developers fix issues inside the AI Sandbox, the simulator dynamically updates category metrics to predict the target score. The points added per resolved issue are weighted by severity:

$$S_{\text{category}}^{\text{simulated}} = \min\left(100, S_{\text{category}}^{\text{original}} + \sum_{i \in \text{resolved}} \Delta_i\right)$$

Where the severity weight $\Delta_i$ is defined as:

$$\Delta_i = \begin{cases} 25 & \text{if } \text{severity} = \text{critical} \ 15 & \text{if } \text{severity} = \text{high} \ 10 & \text{if } \text{severity} = \text{medium} \ 5 & \text{if } \text{severity} = \text{low} \end{cases}$$

To translate technical speed problems into business impacts, we estimate mobile user bounce rate increases ($B_{\text{increase}}$) relative to load times in seconds ($T_{\text{load}}$):

$$B_{\text{increase}} = (1.05)^{T_{\text{load}} - 1} - 1$$

🧠 What We Learned

  • Flexible Visual Embeds: We learned that loading random third-party domains inside React iframes is highly restricted due to browser security policies. Mixed-content security prevents embedding unencrypted HTTP targets inside HTTPS parents: $$\text{Embed Allowed} = \text{IsHttps}(\text{parent}) \land \text{IsHttps}(\text{child}) \land \neg \text{HasHeader}(X\text{-Frame-Options}) \land \neg \text{HasCSP}(\text{frame-ancestors})$$
  • Multimodal Layout Analysis: We learned to leverage Gemini Vision APIs to parse website screenshot buffers directly. By feeding image dimensions and layout markers to LLMs, we successfully mapped visual coordinate arrays on the canvas without executing selenium runtimes in serverless execution paths.

⚡ Challenges We Faced

  1. SSRF Guard & Security: Scanning user-submitted URLs creates Server-Side Request Forgery (SSRF) risks, where malicious queries can force our backend server to query private database registries in our internal network (10.x.x.x, 192.168.x.x, 127.0.0.1). We resolved this by monkeypatching the Node dns.lookup layer to intercept and block resolving socket connections that map to private IP subnets.
  2. Iframe CORS Headers: Websites block framing via X-Frame-Options and Content-Security-Policy. To bypass this without disabling security policies, we built an automated fallback pipeline: if embedding is blocked, our backend falls back to capturing a real-time web screenshot via headless browser gateways, loading it inside a static preview mock panel.
  3. Bundle Size Budgets: Adding external charting and Monaco editor modules bloated Next.js compiled script weights. We resolved this by writing our own chronological SVG line charts and developing a lightweight interactive code playground using native HTML elements, keeping compile times under 5 seconds.

🚀 The Future of SiteScope AI

  • GitHub Integration: Auto-generating Pull Requests directly from applied sandbox fixes.
  • Multi-Model Orchestration: Implementing Anthropic and OpenAI cost routing gateways dynamically.
  • Collaboration Workspace: Password-protected shared team folders.

Built With

Share this project:

Updates

Submission history