Webpage Reporter

Webpage reporter is a Gemini Pro 3 powered webpage design evaluation tool.

Comment

Inspiration

Building a high-converting website is hard. Business owners often struggle to know why their site isn't performing. Professional audits are expensive, and generic automated tools only check code performance (Lighthouse), not the actual design or content strategy. I wanted to build a bridge: an AI consultant that looks at your site like a human expert would—evaluating aesthetics, trust, and clarity—powered by the reasoning of Gemini 3 Pro.

What it does

Web Page Reporter is an intelligent audit tool.

  1. Input: Users provide a website URL and an optional business goal (e.g., "Increase newsletter signups").
  2. Analysis: The app uses Gemini 3 Pro with Google Search Grounding. It doesn't just guess; it researches the brand, looks for social proof, understands the industry context, and evaluates the site's reputation via the web.
  3. Scoring: It assigns an "Effectiveness Score" (CRO potential) and a "Visual Design Score" based on UI/UX best practices inferred from the search data.
  4. Action Plan: It generates a prioritized list of specific, actionable tasks (High/Medium/Low priority) to improve the website.
  5. Sources: It cites the sources Gemini used to form its opinion, providing transparency.

How I built it

  • Frontend: Built with React (v19) and TypeScript for type safety.
  • Styling: Tailwind CSS for a clean, modern, and responsive interface.
  • AI Engine: Google Gemini API (@google/genai SDK).
  • Model: Specifically utilized gemini-3-pro-preview. I chose this model for its superior reasoning capabilities and ability to use Tools.
  • Grounding: Implemented the googleSearch tool configuration. This allows the model to "browse" the web to understand the context of the specific URL provided.
  • Structured Data: Used responseSchema to force the LLM to return strictly typed JSON, ensuring the UI always renders the Dashboard correctly without parsing errors.

Challenges I ran into

  • Subjectivity in AI: Teaching the AI to score "Design" objectively was tricky. I had to refine the system prompt to act as a "CRO Specialist" and "UI/UX Designer" to get consistent, critical feedback rather than just generic praise.
  • Search vs. Vision: Originally, I wanted it to "see" the site. Since the standard search tool returns text/metadata, I had to rely on the model inferring design quality from descriptive search results and industry standards.
  • Schema Strictness: Configuring the responseSchema correctly with the new SDK to ensure nested objects (like ActionItems) were returned reliably every time.

Accomplishments that I'm proud of

  • Real-time Grounding: Seeing the "Information Sources" populate with real links to where the AI found its data brings a layer of trust to the automated report.
  • The UI: The dashboard with the radial gauges and clean cards looks professional and actionable.

What I learned

  • Prompt Engineering for JSON: How to effectively combine "Role Playing" (Act as a CRO expert) with strict JSON constraints.
  • The @google/genai SDK: I learned the nuances of the new SDK, specifically how to implement tools and groundingMetadata.
  • React 19: Experimenting with the latest React patterns.

What's next for Web Page Reporter

  • Multimodal Analysis: Adding the ability to upload a screenshot of the website so Gemini can critique the actual pixels and layout, not just the text context.
  • Competitor Analysis: Allowing users to input a competitor's URL to generate a "Head-to-Head" comparison report.
  • PDF Export: Generating a downloadable PDF report for agencies to send to clients.

Built With

Share this project:

Updates