DeepScan

Inspiration

We were inspired by the friction in consulting sales cycles—businesses struggle to scope projects, and consultants spend hours creating custom proposals. We saw an opportunity to use AI not just to generate content, but to generate the interface itself based on what each project needs. The goal was to build something that truly embodies "AI generates the interface on-the-fly and moves real money"—making the proposal experience adaptive while enabling instant payment.

What it does

DeepScan is a B2B SaaS platform that transforms GitHub repositories or websites into paid consulting engagements. Here's the flow:

1. Business submits a project - They provide a GitHub URL or website URL and assign a consultant by email
2. AI analyzes the codebase - Gemini AI examines the tech stack, dependencies, and code patterns to identify security vulnerabilities, performance bottlenecks, and modernization opportunities
3. Dynamic UI generation - The AI doesn't just generate a proposal—it generates a custom UI layout (dashboard, linear, tabbed, or timeline) with visualizations (risk matrices, tech debt charts, roadmaps) tailored to the project's complexity and issues
4. Interactive pricing - Businesses select services from the AI-curated catalog and pay instantly via Flowglad product checkout sessions
5. Consultant assignment - Requests are automatically routed to consultants by email; consultants view proposals and share them with clients for payment

The UI adapts based on the analysis: a simple website gets a linear flow, while a complex enterprise app with critical security issues gets a dashboard layout with risk matrices and urgent CTAs.

How we built it

• Frontend: Next.js 15 with React, TypeScript, Tailwind CSS, and Framer Motion for animations
• AI Analysis:
  • Gemini 2.5 Flash Lite analyzes codebases and websites
  • Custom prompt engineering to generate both proposal content AND UI configuration
  • AI determines layout type, visualization needs, color scheme, and section ordering
• Dynamic UI System:
  • DynamicProposalRenderer component interprets AI-generated UI configs
  • Modular visualization components (RiskMatrix, TechDebtChart, RoadmapTimeline)
  • Layout adapters for dashboard, tabbed, linear, and timeline views
• Authentication: Auth0 with role-based access (consultant vs business)
• Payments: Flowglad API integration with product checkout sessions (one per service)
• Database: MongoDB for storing consulting requests, user profiles, and payment tracking
• State Management: In-memory proposal store with async wrappers for production persistence

Challenges we ran into

1. AI-Generated UI Structure - Getting Gemini to consistently output valid UI configurations required extensive prompt engineering and validation logic. We built fallback systems to ensure proposals always render even if the AI returns unexpected data.

2. Dynamic Rendering Complexity - Creating a renderer that could handle 4 different layout types, 3+ visualization types, and arbitrary section ordering without breaking was challenging. We used TypeScript strict typing and defensive programming throughout.

3. Payment Flow - Flowglad's product checkout sessions only support one price per session, so we had to implement multi-session handling when businesses select multiple services.

4. Constant Re-rendering Issues - The proposal page initially had infinite re-render loops due to unstable useEffect dependencies and improper ref usage. We implemented mounted refs, fetch deduplication, and proper cleanup patterns.

5. Type Safety with AI Data - Since the AI returns arbitrary JSON, we built extensive type guards and normalization functions to safely handle unknown structures.

Accomplishments that we're proud of

1. True AI-Generated UI - We didn't just use AI to generate text—the AI actually determines the interface structure, which visualizations to show, and how to present information. This is rare in production apps.

2. End-to-End Payment Integration - From AI analysis to Flowglad checkout in a seamless flow. Real money moves based on AI-generated proposals.

3. Adaptive Complexity - The same codebase handles simple landing pages and complex enterprise applications, adapting the UI complexity to match the project.

4. Role-Based Architecture - Clean separation between consultant and business experiences, with automatic email-based assignment.

5. Production-Ready Error Handling - Comprehensive error boundaries, fallback UIs, and graceful degradation when APIs fail.

What we learned

• AI UI generation requires aggressive validation - We can't trust AI to return perfect JSON every time, so defensive programming is essential
• Dynamic UIs need strong type systems - TypeScript saved us countless times when handling arbitrary AI-generated structures
• Framer Motion makes dynamic UIs feel premium - Animations hide layout shifts and make adaptive interfaces feel intentional
• Payment APIs have constraints - Understanding Flowglad's one-price-per-session limitation early would have saved refactoring time
• In-memory stores need migration paths - Starting with in-memory was fast for prototyping, but we built async wrappers from day one for easy MongoDB migration

What's next for DeepScan

1. Enhanced Visualizations - Add interactive code quality graphs, dependency trees, and security vulnerability timelines
2. Multi-Consultant Matching - Let businesses describe their needs and have AI recommend/match consultants
3. Proposal Templates - Let consultants save and reuse successful UI configurations
4. Real-Time Collaboration - Allow consultants and businesses to collaborate on proposals with comments and edits
5. Payment Plans - Support installment payments and milestone-based billing through Flowglad
6. Analytics Dashboard - Give consultants insights into proposal performance, conversion rates, and pricing optimization
7. White-Label Mode - Let consulting firms brand the platform as their own
8. API Access - Enable programmatic proposal generation for agencies managing multiple clients

DeepScan proves that AI can generate not just content, but entire experiences—and that those experiences can drive real business value through instant payments.

Built With

• auth0
• flowglad
• gemini-api
• mongodb
• next.js
• shadcn
• tailwindcss