Gorgias is locked. This isn't.

A Gorgias-style helpdesk you own.

Help customers ask questions and keep replies organized. Explore a plan for your own support tool.

Built with

Next.js 16 + RSCSupabase RealtimeDrizzle ORMAnthropic API (Claude Haiku 4.5)tRPCTailwind v4 + OKLCH

See what's inside ↓

What you ship

A working Gorgias-style e-com helpdesk.

Visitor widget on the left, agent inbox on the right. Type as the visitor — the message lands in the inbox. Apply AI suggestions, tag, snooze, close. Real-time round-trip.

Visitor view · acme.io/pricing

Acme Support

We typically reply in < 5 min

Hey — quick one. We're ~60 seats, evaluating. What's enterprise pricing look like?

Hey Lana, good to hear. 60 seats lands you on the Business tier — $49/seat/mo annual, with volume discount kicking in at 100. Want me to send you a 14-day trial?

Trial would be great. Also — is SSO on Business or do we need to upgrade?

Also: do we get SOC2 report under NDA before signing or only after?

Lana Vasquez

lana@acme.io

Lana Vasquez35m

Hey — quick one. We're ~60 seats, evaluating. What's enterprise pricing look like?

You32m

Hey Lana, good to hear. 60 seats lands you on the Business tier — $49/seat/mo annual, with volume discount kicking in at 100. Want me to send you a 14-day trial?

Lana Vasquez18m

Trial would be great. Also — is SSO on Business or do we need to upgrade?

📝

YouInternal17m

@Marie Marie can you confirm SSO is on Business now? Pricing page still says 'Enterprise only'.

📝

MarieInternal13m

Yes — SSO + SCIM are both on Business as of last week's rollout. Pricing page is in PR #1290.

Lana Vasquez2m

Also: do we get SOC2 report under NDA before signing or only after?

✨ AI suggestions (1/3)

Hi Lana — for 50+ seats we move to annual. Happy to set up a 30-min call to walk through volume tiers and SOC2 paperwork. What's your timezone?

Live mock — same UX you ship after pasting PROMPT.md into Claude Code.

Why this, not Gorgias.

You're not subscribing. You're cloning.

Same e-commerce support UX. Different ownership model. Four things that compound once your ticket volume grows.

Comparison axis	Gorgias	Need for Build build plan
Pricing	$10–360 per month + per-ticket overage. Surprise bills on Black Friday.	Free forever. Pay only your own hosting and Anthropic API calls.
Data ownership	Their cloud holds your order history mirror.	Your Supabase project. Direct Shopify webhooks. Your data, your retention.
Privacy	Their compliance posture covers your customers.	RLS-scoped per workspace. PII only goes through your infra.
Extensibility	Their macros, their automations, their AI flavor.	Full Next.js + Realtime. Custom AI tone, custom routing, custom integrations — today.

What you get

Ten files. Open them, or paste them into Claude Code, Cursor or Lovable.

Every file the build plan ships, with size and one-line description. Download once, build forever.

Project config

CLAUDE.md

6.8 KB

Project config for Claude Code — tech stack, commands, code style, critical rules. Under 100 lines, read first.

System design

ARCHITECTURE.md

14.1 KB

Drizzle schema for conversations, messages, contacts, agents, tags. Widget iframe protocol, Anthropic suggestion flow, ticket lifecycle.

Requirements

PRD.md

8.0 KB

13 features (F1–F13): widget customization, agent inbox, AI suggestions, internal notes, tags, SLA tracking.

Threat model

SECURITY.md

11.5 KB

a systematic check of how apps like yours get attacked, the ten most common ways apps get broken into, GDPR data inventory, security headers config.

Launch plan

MARKETING.md

9.9 KB

Positioning vs. category leader, persona, GTM phases, channel strategy, growth loops.

Build instructions

PROMPT.md

12.3 KB

7 sequential steps: foundation → DB schema + RLS + Realtime + pgcrypto → auth + onboarding → widget iframe + loader.js + visitor sessions → agent inbox + Realtime CDC → Shopify integration → AI suggested replies + tags + SLA + CSAT + billing + polish.

Second-opinion review

ARCHITECTURE_CROSSCHECK.md

27.7 KB

Second-opinion architecture review: GPT + Gemini independently critique the plan, consolidated into confirmations, corrections, and concrete diffs.

Setup guide

api-guide.html

7.5 KB

Zero-jargon visual guide (opens in your browser): create accounts, get API keys, fill .env, push to GitHub, deploy on Vercel.

Sample data

lib/mock/index.ts

4.2 KB

Typed mock dataset — click through the full UI with realistic data before connecting real services.

Package list

assets/manifest.json

0.3 KB

Machine-readable package inventory with generation timestamps.

Stack

Embed-first, agent-grade.

Supabase Realtime + Anthropic Haiku + iframe widget. Brandable per workspace.

The tools this build plan uses — your AI coding tool sets them up for you.

Show technical details

Next.js 16 + RSC

Agent inbox SSR-fast. Public widget served as a tiny iframe-embedded route.

Supabase Realtime

Visitor ↔ agent message stream. Postgres CDC pushes to both ends without polling.

Drizzle ORM

Conversations, messages, contacts, tickets — indexed for inbox filters (open, mine, snoozed).

Anthropic API (Claude Haiku 4.5)

Suggested replies stream while agent reads. Tone match to past replies in same conversation.

tRPC

Agent dashboard actions: assign, snooze, close, tag, internal note.

Tailwind v4 + OKLCH

Brandable widget colors via runtime CSS vars. Agent UI fixed dark theme.

Show technical details

Next.js 16 + RSC

Agent inbox SSR-fast. Public widget served as a tiny iframe-embedded route.

Supabase Realtime

Visitor ↔ agent message stream. Postgres CDC pushes to both ends without polling.

Drizzle ORM

Conversations, messages, contacts, tickets — indexed for inbox filters (open, mine, snoozed).

Anthropic API (Claude Haiku 4.5)

Suggested replies stream while agent reads. Tone match to past replies in same conversation.

tRPC

Agent dashboard actions: assign, snooze, close, tag, internal note.

Tailwind v4 + OKLCH

Brandable widget colors via runtime CSS vars. Agent UI fixed dark theme.

Fork patterns

Same engine. Five different products.

Start from e-com support, end up shipping sales chat, onboarding bot, internal IT desk.

Shopify e-com support

widget → store front + order lookup · suggested replies grounded on shipping policy · auto-resolve "where is my order"

Sales chat

widget → high-intent pages only · route to AE via round-robin · auto-create lead in your CRM

Onboarding bot

widget → in-app · scripted flow first, agent handoff fallback · own the playbook code

Internal IT helpdesk

widget → SCIM-only auth · ticket types: bug/request/access · escalation policy + your SLA

Concierge / VIP customer line

widget → gated by user tag · routes to dedicated agent · all transcripts in your warehouse

Architecture

The whole file tree.

Every directory, every route, every migration. What you'll see right after `unzip`.

Every folder and file you'd get, named exactly as they'll appear on your computer.

Show every file

customer-support-widget/
├── CLAUDE.md
├── PROMPT.md
├── README.md
├── ARCHITECTURE.md
├── PRD.md
├── SECURITY.md
├── MARKETING.md
├── design-tokens.css
├── logo.svg
├── .env.example
├── next.config.ts
├── tailwind.config.ts
├── drizzle.config.ts
├── tsconfig.json
├── package.json
├── app/
│   ├── layout.tsx
│   ├── (agent)/
│   │   ├── inbox/page.tsx
│   │   ├── conversations/[id]/page.tsx
│   │   ├── contacts/{,[id]}/page.tsx
│   │   ├── tags/page.tsx
│   │   └── settings/{widget,team,ai}/page.tsx
│   ├── (widget)/embed/[workspaceId]/
│   │   └── page.tsx
│   └── api/
│       ├── trpc/[trpc]/route.ts
│       ├── widget/{init,messages}/route.ts
│       └── ai/suggest/route.ts
├── components/
│   ├── widget/{launcher,panel,message-bubble,typing}.tsx
│   ├── inbox/{list,filters,assignee-picker}.tsx
│   ├── ai/{suggestion-tray,context-badge}.tsx
│   └── ui/
├── server/api/routers/{conversation,message,contact,agent,tag,ai}.ts
└── public/widget-loader.js
├── lib/
│   ├── env.ts
│   ├── supabase/{client,server,admin}.ts
│   ├── auth/helpers.ts
│   └── rate-limit.ts
├── hooks/
├── types/
├── middleware.ts
├── tests/e2e/
└── supabase/migrations/
    ├── 0001_initial.sql
    ├── 0002_rls_policies.sql
    └── 0003_indexes.sql

WhatsApp AI lead qualification, code-owned. Conversational qualifier + Meta CAPI + Google Calendar + CRM sync. Fork into automotive, real-estate, education, healthcare funnels.

View build plan →

Loading build plan…

Lana Vasquez

lana@acme.io

Lana Vasquez35m

Hey — quick one. We're ~60 seats, evaluating. What's enterprise pricing look like?

You32m

Hey Lana, good to hear. 60 seats lands you on the Business tier — $49/seat/mo annual, with volume discount kicking in at 100. Want me to send you a 14-day trial?

Lana Vasquez18m

Trial would be great. Also — is SSO on Business or do we need to upgrade?

📝

YouInternal17m

@Marie Marie can you confirm SSO is on Business now? Pricing page still says 'Enterprise only'.

📝

MarieInternal13m

Yes — SSO + SCIM are both on Business as of last week's rollout. Pricing page is in PR #1290.

Lana Vasquez2m

Also: do we get SOC2 report under NDA before signing or only after?

✨ AI suggestions (1/3)

Hi Lana — for 50+ seats we move to annual. Happy to set up a 30-min call to walk through volume tiers and SOC2 paperwork. What's your timezone?

Gorgias

Need for Build build plan

Pricing

$10–360 per month + per-ticket overage. Surprise bills on Black Friday.

Free forever. Pay only your own hosting and Anthropic API calls.

Data ownership

Their cloud holds your order history mirror.

Your Supabase project. Direct Shopify webhooks. Your data, your retention.

Privacy

Their compliance posture covers your customers.

RLS-scoped per workspace. PII only goes through your infra.

Extensibility

Their macros, their automations, their AI flavor.

Full Next.js + Realtime. Custom AI tone, custom routing, custom integrations — today.

customer-support-widget/ ├── CLAUDE.md ├── PROMPT.md ├── README.md ├── ARCHITECTURE.md ├── PRD.md ├── SECURITY.md ├── MARKETING.md ├── design-tokens.css ├── logo.svg ├── .env.example ├── next.config.ts ├── tailwind.config.ts ├── drizzle.config.ts ├── tsconfig.json ├── package.json ├── app/ │ ├── layout.tsx │ ├── (agent)/ │ │ ├── inbox/page.tsx │ │ ├── conversations/[id]/page.tsx │ │ ├── contacts/{,[id]}/page.tsx │ │ ├── tags/page.tsx │ │ └── settings/{widget,team,ai}/page.tsx │ ├── (widget)/embed/[workspaceId]/ │ │ └── page.tsx │ └── api/ │ ├── trpc/[trpc]/route.ts │ ├── widget/{init,messages}/route.ts │ └── ai/suggest/route.ts ├── components/ │ ├── widget/{launcher,panel,message-bubble,typing}.tsx │ ├── inbox/{list,filters,assignee-picker}.tsx │ ├── ai/{suggestion-tray,context-badge}.tsx │ └── ui/ ├── server/api/routers/{conversation,message,contact,agent,tag,ai}.ts └── public/widget-loader.js ├── lib/ │ ├── env.ts │ ├── supabase/{client,server,admin}.ts │ ├── auth/helpers.ts │ └── rate-limit.ts ├── hooks/ ├── types/ ├── middleware.ts ├── tests/e2e/ └── supabase/migrations/ ├── 0001_initial.sql ├── 0002_rls_policies.sql └── 0003_indexes.sql