AI-powered screenshot assistant for senior citizens — Upload any app screenshot and get simple, clear step-by-step instructions.

Designed for seniors. Deployed in minutes. Built for everyone.

TechBuddy helps seniors and non-tech-savvy users navigate any app or website by:

1. Uploading a screenshot of the confusing screen
2. AI analyzes every button, menu, and element
3. Returns plain-English instructions in large, readable text
4. Reads instructions aloud via text-to-speech
5. Warns about scams if a suspicious popup is detected

Example: Upload a Gmail screenshot → TechBuddy says "Tap the blue Compose button in the top right corner to write a new email."

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS
• AI Vision: Claude claude-sonnet-4-6 (Anthropic)
• Icons: Lucide React
• Voice: Web Speech API (browser native, no cost)
• Deployment: Vercel (zero config)

techbuddy/
├── app/
│   ├── layout.tsx          # Root layout + metadata
│   ├── page.tsx            # Landing page
│   ├── globals.css         # Global styles
│   ├── demo/
│   │   └── page.tsx        # Main demo / analysis page
│   └── api/
│       └── analyze/
│           └── route.ts    # Claude Vision API route
├── components/
│   ├── ImageUploader.tsx   # Drag & drop screenshot upload
│   ├── InstructionCard.tsx # Displays AI instructions
│   ├── VoiceOutput.tsx     # Text-to-speech button
│   └── ScamWarning.tsx     # Scam alert banner
├── .env.example            # Environment variable template
└── README.md

• Node.js 18+
• An Anthropic API key from console.anthropic.com

# Clone the repo
git clone https://github.com/yourusername/techbuddy.git
cd techbuddy

# Install dependencies
npm install

# Set up environment
cp .env.example .env.local
# Edit .env.local and add your ANTHROPIC_API_KEY

# Run development server
npm run dev

Open http://localhost:3000 in your browser.

ANTHROPIC_API_KEY=your_key_here

1. Push this repo to GitHub
2. Import into Vercel
3. Add ANTHROPIC_API_KEY in Project Settings → Environment Variables
4. Deploy!

The /api/analyze endpoint:

1. Accepts a multipart/form-data POST with an image file
2. Converts the image to base64 and sends it to Claude claude-sonnet-4-6 via the Anthropic SDK
3. Prompts Claude to respond in structured JSON with:
   • isScam — boolean flag for scam detection
   • scamWarning — human-readable warning if scam detected
   • appName — identified app/website
   • currentScreen — what screen is shown
   • mainInstruction — primary action in plain English
   • steps — numbered step-by-step guide
   • visibleElements — inventory of buttons/menus visible

• Demo-first design: The /demo page is the core experience
• No auth required: Anyone can upload a screenshot immediately
• Graceful error handling: API key errors display a helpful message
• Mobile tested: Responsive layout from 320px up

MIT — build something great with it.