ProtoAI

Inspiration

Hardware prototyping is hard. Entrepreneurs with great ideas face a steep learning curve: PCB design, 3D modeling, component sourcing, assembly instructions—each step requires specialized knowledge. We built ProtoAI to democratize hardware creation by using AI to transform simple sketches into complete, manufacturable products.

Our inspiration came from a real user need: "I want to build a necklace with colors - green good, yellow okay, red bad. My sister has asthma and air stuff is too complicated." This simple request requires PCB design, sensor integration, 3D enclosure modeling, firmware, and assembly documentation—typically weeks of work. ProtoAI makes this accessible in minutes.

What We Built

ProtoAI is an AI-powered platform that transforms hardware sketches into manufacturable products. Users upload a sketch, and our system powered by Claude Haiku generates:

2D Technical Blowup Diagrams - Annotated technical illustrations
Bill of Materials (BOM) - Complete component lists with sourcing
Assembly Instructions - Step-by-step guides with images
3D Models - STL files for 3D printing
PCB Files - Schematics and Gerber files
Firmware - Arduino code for microcontrollers

The platform handles the complete journey from sketch → design → refinement → order fulfillment.

How We Built It

We architected ProtoAI as a serverless monorepo with clear separation of concerns:

Frontend (Next.js 14)

Next.js 14 with App Router for modern React patterns
Tailwind CSS for rapid UI development
Radix UI for accessible components
Clerk for authentication
Convex React for real-time data synchronization
Zustand for client-side state management

Backend (Convex)

Convex serverless backend for real-time database and file storage
TypeScript throughout for type safety
Convex Functions for mutations and queries
Integration points for Anthropic Claude Haiku API

Architecture Highlights

Monorepo structure enabling independent team workflows
Real-time synchronization via Convex WebSocket connections
File storage for design artifacts (PDFs, STLs, images)
State persistence across the user journey
Automated CI/CD via GitHub Actions

Challenges We Faced

Real-time State Management: Ensuring refinement state persisted across page navigations. We solved this with Zustand's persist middleware and careful state synchronization with Convex.
Authentication Flexibility: Building a system that works with or without Clerk for testing. We created a unified useAuth() hook that abstracts authentication, allowing seamless switching between Clerk and mock auth.
File Generation Pipeline: Coordinating multiple file types (PDFs, STLs, images) generated by AI. We implemented a structured storage system in Convex with type-safe file retrieval.
Team Collaboration: Managing a monorepo with frontend, backend, and orchestrator roles. We established clear folder ownership and interface contracts to prevent merge conflicts.
Build Optimization: Next.js static generation conflicts with dynamic authentication. We used export const dynamic = 'force-dynamic' strategically to handle Clerk-dependent pages.

What We Learned

Convex is powerful for real-time applications—WebSocket connections make state synchronization seamless
Monorepo workflows can scale well with clear boundaries and interface contracts
AI integration requires careful prompt engineering and structured output formats
Serverless architecture simplifies deployment but requires thoughtful state management
TypeScript across the stack catches errors early and improves developer experience