# How to Vibe Code Your Own Tidio (and Stop Paying for It)

> AI customer service and lead-generation platform for e-commerce and SMBs

- Site: https://tidio.com
- Category: Customer Support SaaS
- Platforms: Web app
- Verdict: **Solid side project** (62/100 vibecodeable)
- Estimated effort: 2-4 weeks part-time

## Verdict

Build a personal subset with AI tools, but keep paying for Tidio if you need production-grade omnichannel syncing and native e-commerce bindings.

Cloning the entire Tidio platform with multi-channel adapters, native desktop/mobile apps, and deep e-commerce bindings is a massive undertaking. However, building a focused personal-use clone featuring an embeddable website chat widget, a shared agent dashboard, a RAG-powered AI chatbot (Lyro clone), and simple automated flows is a realistic undertaking using modern AI coding agents.

### What you can't replicate

- Direct official partnerships and webhook reliability with Meta (WhatsApp/Instagram) and Shopify
- Native iOS, Android, macOS, and Windows applications with fully optimized push notification services
- Proprietary training loops achieving high AI containment rates across 300,000 active businesses

## What it does

Tidio unifies multiple communication channels—website live chat, email, Facebook Messenger, Instagram DMs, and WhatsApp—into a shared team inbox, featuring an AI conversational agent (Lyro) and a drag-and-drop workflow builder (Flows).

### Core features

- Embeddable JavaScript chat widget with real-time WebSocket messaging
- Shared team inbox for live chats, emails, and ticket management
- Lyro AI Agent: RAG chatbot trained on custom knowledge bases/FAQs
- Visual drag-and-drop automation builder (Flows) for triggers and lead capture
- Visitor presence tracking and live page-view history
- E-commerce metadata and order lookup hooks inside the chat interface

## The business

### Pricing

- Free: $0/mo
- Starter: $29/mo
- Growth: $59/mo
- Plus: $300/mo + usage

### Funding

$26.8M raised.
- Seed (2018)
- Series A (2019)
- Series B (2022)
Investors: PeakSpan Capital, Inovo Venture Partners, bValue Fund, Rafał Brzoska

Founded 2013.
Team size: 180+.

## The hard parts

- Real-time WebSocket connection stability, presence detection, and concurrent multi-agent conflict resolution
- Production-grade RAG pipeline with clean document chunking, metadata filtering, and hallucination guardrails
- Omnichannel webhook synchronization across email IMAP/SMTP, WhatsApp, Facebook Messenger, and Instagram
- Deep e-commerce platform API integrations for real-time cart and order history viewing

## How to vibe code Tidio

### Prerequisites

- Node.js (free): Required runtime for Next.js full-stack development environment.
- GitHub (free): Source code repository and CI/CD deployment pipeline integration.

### Recommended AI tools

- Claude Code: Best-in-class terminal agent for scaffolding complex multi-file Next.js full-stack architectures.
- Cursor: AI-native code editor for reviewing visual chat widget UI components and refining React state hooks.

### Stack

- Frontend: Next.js
- Backend: Next.js Server Actions & API Routes
- Database: Neon
- Auth: better-auth
- Payments: None
- Other: Vercel AI SDK, Tailwind CSS, Anthropic API

### Hosting

- Vercel (Hosting the Next.js web application, dashboard, and API routes): $0/mo
- Neon (Serverless PostgreSQL database for tickets, messages, and vector embeddings): $0/mo

### Build guide

1. **Project Scaffolding & Database Schema** — Initialize the Next.js application with Tailwind CSS, configure better-auth, and set up the Neon PostgreSQL database schema for users, chat sessions, messages, tickets, and knowledge base documents.

```
Scaffold a new Next.js 16 project with Tailwind CSS and TypeScript. Set up Drizzle ORM connected to a Neon PostgreSQL database. Define database schemas for tenants, agents, chat_sessions, messages, tickets, and knowledge_base_chunks (using pgvector for embeddings). Integrate better-auth for secure agent authentication with email/password and session management. Ensure the project structure separates app routes, server actions, and shared UI components cleanly.
```

2. **Embeddable Chat Widget & Real-time Messaging** — Build a lightweight vanilla JavaScript embeddable widget that can be dropped onto any external website via a <script> tag, connecting to backend WebSocket/polling APIs for real-time visitor-to-agent communication.

```
Create a standalone embeddable chat widget script bundle using React or vanilla JS that mounts into a shadow DOM on target websites. The widget must render a floating bubble, open a chat window, collect pre-chat survey fields, and communicate with Next.js API routes over WebSockets or polling to send and receive messages in real time. Implement local storage persistence for chat session tokens.
```

3. **Shared Agent Inbox & Ticketing Dashboard** — Develop the internal web dashboard where support agents view active live chats, incoming tickets, assign priorities, add internal notes, and update ticket statuses.

```
Build a responsive agent dashboard layout in Next.js featuring a multi-channel inbox view, active chat list with unread indicators, ticket detail pane with status dropdowns, priority tags, agent assignment selectors, and internal notes sidebar. Implement real-time state synchronization using Supabase Realtime or custom polling so multiple agents see live incoming messages without manual refreshes.
```

4. **Lyro AI Agent & RAG Pipeline** — Implement the AI auto-responder module that ingests company knowledge base content, chunks text, stores vector embeddings in Neon pgvector, and uses Claude via the Vercel AI SDK to generate grounded answers.

```
Implement a knowledge base ingestion engine that accepts raw text or URLs, chunks documents, generates embeddings using OpenAI or Anthropic embedding endpoints, and stores them in Neon pgvector. Build an AI responder server action utilizing the Vercel AI SDK and Claude 3.5 Sonnet that searches relevant knowledge base chunks, injects them as context, and generates precise, hallucination-free customer replies while logging token usage.
```

5. **Visual Flows Automation Builder** — Create a no-code visual node-based builder allowing admins to configure automated chat triggers, greeting messages, lead collection steps, and routing paths.

```
Build a visual drag-and-drop automation builder in the dashboard using React Flow. Allow admins to connect trigger nodes (e.g., visitor lands on page, visitor is inactive) to action nodes (e.g., send greeting message, collect email input, assign department). Implement a flow evaluation engine that executes these paths automatically when visitors interact with the embeddable chat widget.
```

6. **Polish, Error Handling & Deployment** — Add error boundaries, connection retry logic for real-time messaging, styling polish, and deploy the application to Vercel.

```
Perform a comprehensive code review and hardening pass. Add robust error handling for API routes, graceful reconnection logic for real-time widget feeds, input sanitization against XSS in chat messages, and loading skeleton states across the agent dashboard. Configure environment variables for production and verify successful deployment on Vercel.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name (optional): $12 one-time
- Total: ~$12 one-time

**Ongoing costs (monthly):**

- Anthropic API usage for Lyro AI RAG responder: ~$5-15/mo
- Total: ~$10/mo

- Paying for the SaaS instead: $59/mo (Growth plan)
- Build time: 45-60 hours
- AI tool credits: $20/mo (Claude Pro / Cursor)
- Break-even: Never (built for learning and personal use)

## Sources

- [Tidio Official Website](https://www.tidio.com)
- [Tidio Pricing Page](https://www.tidio.com/pricing/)
- [Chatbotscape - Tidio Review & Architecture Analysis](https://chatbotscape.com/tidio-review)
- [PitchBook - Tidio Company Profile](https://pitchbook.com/profiles/company/tidio-profile)