Taste Profile

A taste profile built from your real Instagram data. Connects via Open Data Labs Context Gateway, reads your following list, ad topics, and targeting categories, then uses Claude to generate a cross-platform aesthetic and interest fingerprint across 5 dimensions.

Stack

• Next.js 14 App Router + TypeScript
• Tailwind CSS
• @opendatalabs/connect-js — Context Gateway iframe flow
• @anthropic-ai/sdk — Claude Haiku analysis
• html2canvas — card screenshot/download

Setup

1. Clone and install

git clone https://github.com/vana-com/taste-profile
cd taste-profile
npm install

2. Environment variables

cp .env.local.example .env.local

Fill in .env.local:

Variable	Where to get it
OPENDATALABS_API_KEY	ODL dashboard > API Keys
OPENDATALABS_ENCRYPTION_SECRET	ODL dashboard > API Keys
OPENDATALABS_APP_ID	ODL dashboard > Apps
ANTHROPIC_API_KEY	console.anthropic.com
NEXT_PUBLIC_APP_URL	http://localhost:3000 for local, your deployed URL for production

3. ODL dashboard steps

1. Create an app at dashboard.opendatalabs.com
2. Set the allowed origin to your app URL (e.g. http://localhost:3000)
3. Enable scopes: read:profile, read:following, read:ads
4. Copy the API key, encryption secret, and app ID into .env.local

4. Run locally

npm run dev

Open http://localhost:3000.

How it works

1. Landing page — user clicks "Connect Instagram"
2. Connect page — server creates an ODL session, client renders the Context Gateway iframe. On successful connection, postMessage fires with a connectionId.
3. Result page — fetches the connection result from ODL (following list, ad topics, targeting categories), sends to Claude Haiku, renders a 5-dimension Taste Profile card.
4. Share — "Copy summary" copies the one-sentence profile to clipboard. "Save card" uses html2canvas to download the card as a PNG.

Context Gateway attribution

This app uses Open Data Labs Context Gateway to access Instagram data with user consent. No data is stored server-side — it is fetched at request time and passed directly to Claude.

Deploy to Vercel

vercel deploy --prod

Set the same 5 environment variables in Vercel project settings or via vercel env add. Make sure NEXT_PUBLIC_APP_URL matches your production domain and is added as the allowed origin in the ODL dashboard.