Bino-Wizard

A small static web app that crafts WhatsApp queries for Bino using an AI backend.

• index.html — UI for input and output
• style.css — styling
• script.js — front-end logic calling /api/chat
• api/chat.js — serverless API route (Vercel) that calls Groq API
• README.md — this file

1. User enters need, city, budget, category.
2. Frontend sends POST to /api/chat.
3. API route calls Groq Chat Completions with process.env.GROQ_API_KEY.
4. Response text is displayed and also converted to WhatsApp deep link.

This project is static HTML + serverless API. If dependencies exist, run:

npm install

For local API route testing, set:

export GROQ_API_KEY="gsk_..."

Then run your dev server (for Vercel local dev or any static server).

If using Vercel CLI:

vercel dev

Open http://localhost:3000 and test.

Go to Project Settings → Environment Variables:

• Key: GROQ_API_KEY
• Value: your Groq API key (starts with gsk_)
• Environment: Production (and Preview/Development as needed)

Then redeploy.

• Something went wrong UI error: Check browser console and network tab. The API response likely failed because GROQ_API_KEY is missing.
• Vercel push rejections: run git pull --rebase origin main then git push.

1. vercel in project root.
2. Choose root directory (.).
3. Set GROQ_API_KEY in Environment Variables.
4. Deploy.

api/chat.js expects POST data (currently your front-end sends userNeed, city, budget, category) and calls Groq API with:

'Authorization': `Bearer ${process.env.GROQ_API_KEY}`

So the key must be set as env var.

• If you changed the frontend to call /api/chat, make sure API route exists.
• Check vercel logs for runtime errors.
• Add secrets only in Vercel settings, never commit keys.

1. Open the page.
2. Enter your need.
3. Click “Craft My Bino Message”.
4. Copy or send via WhatsApp.

A simple static HTML project with animated GIF assets.

Open index.html in your browser.