Can I vibe code WillDesk?

Build a lightweight ecommerce support chat widget and backend service to replace WillDesk.

1. ARCHITECTURE & TECH STACK:
- Frontend: React widget packaged as a single bundle JS file, rendered inside a Shadow DOM to prevent CSS leaks.
- Backend: Next.js App Router deployed to Vercel or Cloudflare Workers.
- Database: PostgreSQL (Prisma or Drizzle) to store ticket threads, messages, and settings.
- LLM: Anthropic Claude API (claude-3-5-haiku) for automated replies.

2. DATA MODEL:
- Customer (id, email, phone, shopify_customer_id)
- Ticket (id, customer_id, status: OPEN|PENDING|CLOSED, agent_id, assigned_at)
- Message (id, ticket_id, sender_type: CUSTOMER|AGENT|BOT, text, created_at)
- KB_Article (id, title, content, vector_embedding)

3. CORE FUNCTIONS:
- Self-Service Tracking: Expose a route `/api/widget/tracking` accepting email + order_number. Query Shopify GraphQL Admin API (`orders(query: ...)`). Return fulfillment status, tracking link, and line items.
- Bot RAG Pipeline: When a user sends a message, fetch store policy documents (return policy, shipping times) from PostgreSQL, generate context, and send to Claude. If confidence is high, respond with sender_type='BOT'.
- Escalation: If customer asks for a human, change Ticket status to 'OPEN' and trigger a Webhook (e.g., Slack/Discord notification to staff).
- Agent Dashboard: A minimal React page listing OPEN tickets, allowing agents to send real-time replies via SSE (Server-Sent Events) or WebSockets.

4. SECURITY & FAILURES:
- Validate Shopify API credentials safely server-side.
- Rate-limit chat endpoints per IP using Redis or Vercel KV.
- If Shopify API fails, fall back to asking for the customer's email without breaking the UI flow.

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