Can I vibe code Serviceform?

Build an embeddable customer support and lead-capture widget system using Next.js, Tailwind CSS, Supabase, and OpenAI API.

1. DATA MODEL:
- Create schema for 'conversations' (id, session_id, created_at, metadata).
- Create schema for 'messages' (id, conversation_id, sender_type: user|bot|agent, content, created_at).
- Create schema for 'leads' (id, email, phone, name, custom_fields JSONB, page_url, created_at).
- Create schema for 'flow_configs' (id, name, steps_json, active_status).

2. WIDGET SCRIPT (& ARCHITECTURE):
- Create a lightweight vanilla JavaScript loader tag (e.g. embed.js) under 15KB that mounts an iframe or Shadow DOM floating launcher bubble in the bottom right corner.
- The container renders a conversational interface capable of two modes: Multi-step Form mode and AI Q&A mode.
- Support page-level triggers: show widget automatically after 5 seconds or on exit-intent detection.

3. MULTI-STEP CONVERSATIONAL FLOW:
- Render multi-step inputs configured via flow_configs JSON (e.g., Step 1: 'What is your budget?', Step 2: 'What is your email?').
- Capture answers step-by-step; upon reaching the final step, send payload to POST /api/leads.

4. AI CHAT INTEGRATION:
- Provide an interactive text box where users can ask questions.
- Endpoint POST /api/chat calls OpenAI GPT-4o-mini using system prompt containing store FAQ context.
- Return streaming responses back to the chat widget.

5. OUTBOUND NOTIFICATIONS & HANDOFF:
- Send lead details instantly via webhooks to Slack channel using standard incoming webhooks format.
- Store full transcript in Supabase.

6. FAILURE HANDLING & SAFETY:
- Implement token rate-limiting on API routes per IP (max 10 chat calls per minute) using Redis or Upstash.
- Provide smooth error fallback UI when LLM API times out.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs