🖼️ SwitchBot AI Art Frame

Generate AI artwork with Google's Nano Banana Flash and display it on your SwitchBot AI Art Frame.

Features

AI Image Generation — Describe what you want and pick an art style (cyberpunk, watercolor, fantasy, etc.). Powered by Google's Gemini image generation.
Frame Control — Browse images on your frame with next/previous controls.
URL Upload — Send any publicly-hosted image to your frame.
Auto-Discovery — Finds your AI Art Frame automatically from your SwitchBot account.

Quick Start

# Clone
git clone https://github.com/csells/SwitchBotFrame.git
cd SwitchBotFrame

# Configure
cp .env.example .env
# Edit .env with your API keys (see below)

# Install & run
npm install
npm run dev

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

Configuration

Copy .env.example to .env and fill in your values:

Variable	Required	Description
`GEMINI_API_KEY`	✅	Google AI API key for image generation. Get one at aistudio.google.com/apikey.
`SWITCHBOT_TOKEN`	✅	SwitchBot API token. See how to get credentials.
`SWITCHBOT_SECRET`	✅	SwitchBot API secret key. Found alongside the token.
`IMGBB_API_KEY`	✅	imgbb API key for hosting generated images. Get one at api.imgbb.com.
`PORT`	❌	API server port (default: `3001`).

⚠️ Privacy notice: Generated images are uploaded to imgbb.com and are publicly accessible. Do not generate anything private or sensitive.

Getting SwitchBot Credentials

Open the SwitchBot mobile app
Go to Profile → Preferences → App Version
Tap the version number 10 times to unlock Developer Options
Go back → Developer Options
Copy your Token and Secret Key

Architecture

Browser (Vite :5173)  →  API Server (Hono :3001)  →  Google AI / SwitchBot APIs
       ↑                        ↑
   React + Tailwind       Reads .env credentials

frame.tsx — React frontend with Tailwind CSS
api.ts — API handler (image generation + SwitchBot commands)
server.ts — Hono server with static file serving

In development, Vite proxies /api and /generated requests to the Hono backend.

Scripts

Command	Description
`npm run dev`	Start both Vite and API server with hot reload
`npm run build`	Build the frontend for production
`npm start`	Start the API server (serves built frontend from `dist/`)

Deploying

Build: npm run build
Deploy to any Node.js host (Fly.io, Railway, Render, etc.)
Set env vars (GEMINI_API_KEY, SWITCHBOT_TOKEN, SWITCHBOT_SECRET, IMGBB_API_KEY)

License

MIT

csells/SwitchBotFrame