AISight

Instantly check your website’s visibility in AI searches like ChatGPT, Copilot, and Perplexity and get AI-driven tips to boost your SEO and traffic—all free in under 60 seconds.

Comment 3

Track1

Inspiration Behind AISight

The spark for AISight came from the growing dominance of AI-driven search systems like ChatGPT, Copilot, and Perplexity in shaping online visibility. We observed that many websites were invisible in AI-generated results, costing businesses valuable traffic. This inspired us to build a free, fast tool to help website owners assess and boost their AI visibility.

  • Motivation: Democratize AI-driven SEO insights for small businesses.
  • Vision: Create a user-friendly platform to uncover AI blind spots and deliver actionable recommendations.
  • Impact Goal: Boost organic traffic by optimizing for AI model preferences.

What I Learned

As our first project, AISight was a steep learning curve that taught us critical skills for modern web development:

  • Next.js and React: Mastered building dynamic, server-side rendered apps with Next.js and reusable React components.
  • API Integration: Learned to integrate APIs for querying AI models, handling responses, and optimizing performance.
  • Web Hosting: Discovered how to host websites for free using Firebase IDX, GitHub, and Vercel.
  • CORS Management: Understood Cross-Origin Resource Sharing (CORS) challenges and solutions for API-driven apps.
  • AI-Assisted Development: Used Claude to debug code and resolve complex issues like CORS.
  • SEO Fundamentals: Gained insights into E-E-A-T (Expertise, Authoritativeness, Trustworthiness) for AI rankings.

These skills, especially in Next.js and hosting, will empower us to build scalable applications in the future.

How We Built AISight

AISight was crafted using modern tools and technologies, with a focus on speed and accessibility. Here’s how we brought it to life:

  • Prototyping with Firebase IDX:
    • Used Firebase IDX Prototyper to rapidly design and test the React-based frontend.
    • Enabled quick iterations for a seamless user interface.
  • Next.js and React:
    • Built the frontend with Next.js for server-side rendering and React for reusable components.
    • Used Tailwind CSS for responsive styling, integrated via CDN for simplicity.
    • Employed JSX for clean component logic, avoiding complex React.createElement calls.
  • Website Redesign with Reimagineweb:
    • Used Reimagineweb tool to redesign our site with improved text and suggestions to add FAQs, Customer Reviews, etc.
    • We attached before Reimagine and after Reimagineweb suggestions screenshot of our website.
  • API Integration:
    • Integrated APIs to query AI models (ChatGPT, Copilot, Perplexity) for visibility analysis.
    • Processed responses to generate visibility scores and competitor benchmarks.
    • Example API latency optimization: Reduced response time by caching results, modeled as ( T_{\text{total}} = T_{\text{api}} + T_{\text{process}} ), where ( T_{\text{api}} ) is API call time and ( T_{\text{process}} ) is processing time.
  • AI Assistance with Claude:
    • Leveraged Claude to resolve CORS issues with proxy configurations.
    • Optimized API calls based on Claude’s suggestions for efficiency.
  • Hosting and Deployment:
    • Prototyped with Firebase IDX for rapid development.
    • Managed code with GitHub for version control.
    • Deployed on Vercel for fast, scalable hosting optimized for Next.js.
  • Privacy Focus:
    • Implemented read-only scans to ensure user data privacy, with no data storage.

Challenges Faced

As our first project, AISight tested our problem-solving skills with several hurdles:

  • CORS Issues with APIs:
    • Challenge: APIs triggered CORS errors, blocking requests due to cross-origin restrictions.
    • Solution: Used Claude to configure Next.js API routes as proxies and adjust headers, resolving CORS issues.
    • Learning: Mastered browser security and CORS configurations for API-driven apps.
  • First-Time Hosting:
    • Challenge: Navigating Firebase IDX, GitHub, and Vercel as beginners was daunting.
    • Solution: Leveraged Firebase IDX for prototyping, GitHub for version control, and Vercel for seamless Next.js deployment.
    • Learning: Built a free, scalable hosting pipeline for future projects.
  • Next.js and React Learning Curve:
    • Challenge: Limited experience with Next.js server-side rendering and React component architecture.
    • Solution: Used Claude for code examples and studied Next.js documentation for routing and optimization.
    • Learning: Gained confidence in modern JavaScript frameworks.
  • Balancing Performance and Features:
    • Challenge: Delivering comprehensive AI analysis while maintaining fast response times (under 60 seconds).
    • Solution: Optimized Next.js API routes and used Vercel’s edge functions to minimize latency.
    • Learning: Learned to balance functionality with performance in web apps.

Future Potential

Building AISight equipped us with expertise in Next.js, React, API integration, and free hosting solutions. The ability to deploy scalable apps using Firebase IDX, GitHub, and Vercel will streamline future workflows. Our experience with CORS and APIs will enable more complex applications, while AISight’s success inspires us to explore real-time competitor tracking or automated content optimization to further empower website owners.

Built With

  • cors-fix
  • firebase-idx*
  • genkit
  • github*
  • next.js*
  • react*
  • tailwind-css*
  • typescript
  • using-server-based-apis-without-keys
  • vercel*
Share this project:

Updates