How to vibe codeZendesk

Prerequisites

• Node.jsfree

  Runtime environment for executing the Next.js full-stack application code.

• GitHubfree

  Version control repository hosting and deployment hook provider.

• Anthropic API KeyPay-as-you-go (~$10-20/mo)

  Required to power the AI agent assist, auto-summarization, and RAG knowledge base answers.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file relational schemas, api routes, and UI components autonomously.

• Cursor

  Ideal AI-native editor for iterative frontend tweaking, managing React components, and reviewing code diffs.

Build guide

1. 01Scaffold Next.js App, Drizzle Schema & Authentication

   Initialize the Next.js project with Tailwind CSS, configure Drizzle ORM connected to Turso, and set up better-auth with user roles for Admin, Agent, and End-User.

   Create a new Next.js 16 project with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM with Turso as the database driver. Write the complete database schema for users (id, name, email, role: 'admin'|'agent'|'customer'), tickets (id, subject, status: 'open'|'pending'|'solved'|'closed', priority: 'low'|'normal'|'high'|'urgent', assigneeId, customerId, createdAt, updatedAt), ticket_messages (id, ticketId, senderId, body, isInternal), and knowledge_base_articles (id, title, content, authorId, createdAt). Configure better-auth with email/password authentication and role plugin. Ensure database migrations run smoothly against Turso.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Build the Unified Agent Workspace Dashboard

   Create the main ticket management dashboard allowing agents to filter, sort, assign, and reply to support tickets in real-time.

   Build a responsive agent workspace dashboard in Next.js App Router under `/agent/dashboard`. Create a split-pane layout: a left sidebar with filter tabs ('All open', 'Assigned to me', 'Unassigned', 'Pending', 'Solved') and ticket list cards showing subject, priority badge, and customer name; a center pane displaying the conversation timeline with threaded messages and internal notes toggle; and a right sidebar showing customer profile context, ticket tags, and status dropdowns. Implement server actions to update ticket status, assign agents, and post public replies or internal notes. Use shadcn/ui components throughout.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Implement RAG Knowledge Base & AI Agent Copilot

   Integrate vector search over knowledge base articles and build an AI Copilot that drafts responses and summarizes long ticket threads using the Anthropic API.

   Implement a knowledge base article management section under `/kb` with markdown rendering and search. Add vector embeddings support using Turso's vector extension or application-level cosine similarity over article chunks stored in Turso. Build an AI Copilot panel inside the ticket view that uses the Anthropic API to: (1) summarize the conversation thread into 3 bullet points, (2) perform semantic search over KB articles to retrieve relevant troubleshooting steps, and (3) generate a professional draft reply for the agent to review and insert with one click. Handle API errors and streaming responses gracefully.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Build Self-Service Customer Portal & Ticket Submission

   Create a customer-facing portal where end-users can browse help articles, submit new support tickets, and track their active request statuses.

   Create a customer portal at `/portal` where authenticated end-users can view their submitted support tickets, check statuses, and add follow-up replies. Include a clean submission form (`/portal/new`) with fields for subject, category, priority, and description. Implement automatic search suggestions as the user types their subject, recommending relevant KB articles to deflect support volume before ticket creation. Send simulated confirmation notices upon ticket creation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Add Inbound Email Webhook Ingestion

   Configure an API route to receive parsed inbound emails from Resend or Sendgrid webhooks, automatically converting incoming emails into new tickets or appending them to existing threads.

   Create a secure API webhook endpoint at `/api/webhooks/email` designed to ingest inbound parsed emails from Resend or Sendgrid. Implement robust logic to: (1) extract the sender's email address and match or create a user profile in the database, (2) check the email subject or headers for an existing ticket reference ID to thread the reply, or (3) create a brand new ticket if no reference is found, storing the email body as the initial ticket message. Add signature stripping and basic HTML sanitization. Verify webhook signatures securely and handle parsing edge cases cleanly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Setup Realtime Updates & Polish Workspace

   Integrate Pusher channels to enable live ticket list updates and real-time message broadcasting across active agent browsers without manual refreshes.

   Integrate Pusher into the Next.js agent workspace to enable real-time collaboration. Whenever a customer submits a ticket, a new reply is added, or an agent updates a ticket status, broadcast an event via Pusher channels. Update the React frontend state instantly so agents see incoming messages and status changes appear live without reloading the page. Add toast notifications for newly assigned tickets and polish UI empty states and loading skeletons.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Zendesk