陶 Caption Agent

Instagram caption generator for vintage Japanese ceramics.

Stack

• React + Vite
• Anthropic API (claude-sonnet-4)
• CSS Modules

Local setup

npm install
cp .env.example .env.local
# Add your Anthropic API key to .env.local
npm run dev

Deploy to Vercel

1. Push this repo to GitHub
2. Go to vercel.com → New Project → Import your repo
3. In Environment Variables, add:
   • VITE_ANTHROPIC_API_KEY → your Anthropic API key
4. Deploy

That's it. Every push to main redeploys automatically.

Flow

1. Photos & rubric — upload photos, select Процесс / Mark / Погружение / Находка
2. Analyse — Claude analyses photos, returns keyword chips
3. Keywords — select relevant chips, add optional notes
4. Context variants — Claude generates 5 context options, pick and edit one
5. Caption — Claude writes the full bilingual caption (EN + UA)
6. Edit on-page if needed, copy to clipboard

Project files

• src/prompts.js — all caption structures and system prompts
• src/api.js — Anthropic API wrapper
• src/App.jsx — main component and flow logic
• src/App.module.css — styles

Roadmap

• Google Drive save (folder per post, post.txt + photos)
• Separate price field always visible
• Post history / drafts