Back to PortfolioAI Multi-Channel Messaging Assistant

ChatPilot

AI receptionist that handles WhatsApp, Instagram, Telegram, and Messenger simultaneously

Live Demo GitHub

channels in unified inbox

industry pre-built templates

avg AI response time

The Problem

Why this needed to be built

Small businesses lose 30% of leads to slow replies. Hiring a chat manager costs $2,500/month. Customers expect responses in under 5 minutes — humans can't deliver 24/7. Businesses manage WhatsApp on one phone, Instagram DMs on a laptop, Telegram on another device — no unified view, no history, no automation.

The Solution

How it works

01Unified inbox showing all WhatsApp, Instagram, Telegram, and Messenger conversations

02AI Agent Builder: configure an assistant for your industry in 15 minutes, no code

036 pre-built industry templates (salon, dental, retail, fitness, legal, custom)

04Appointment booking automation with calendar integration and confirmation messages

05Lead qualification flow: AI asks qualifying questions and logs responses to CRM

06Real-time updates via Supabase Realtime — inbox refreshes without page reload

Tech Stack

Built with

Next.js 15TypeScriptSupabaseOpenAI gpt-4oTwilio (WhatsApp)Meta Graph APITelegram Bot APISupabase RealtimeZodTailwind CSS

Architecture

System design

Incoming Messages
├── WhatsApp   ──► Twilio Webhook
├── Instagram  ──► Meta Graph API Webhook
├── Telegram   ──► Telegram Bot API
└── Messenger  ──► Meta Graph API Webhook
         │
         ▼
  Channel Provider Pattern
  (normalize all messages to
   common MessageEvent format)
         │
         ▼
  AI Agent Router
  ├── Industry Template Loader
  │   (Salon / Dental / Retail /
  │    Fitness / Legal / Custom)
  └── OpenAI gpt-4o
      (context + knowledge base)
         │
         ▼
  Response Dispatcher
  (send back through same channel)
         │
         ▼
  Supabase
  ├── Unified Inbox (all messages)
  ├── Conversation history
  ├── Lead capture
  └── Appointment bookings

Key Decisions & Lessons

What I learned

Channel Provider Pattern: the only way to scale multi-channel

Each messaging platform has a completely different webhook format, authentication scheme, and message structure. Without a Provider Pattern to normalize everything into a common `MessageEvent` type, adding a 5th channel would require rewriting the AI pipeline. With it, a new channel is ~200 lines: implement the interface, register the provider, done.

Making Telegram work in demo mode

Telegram requires a public HTTPS URL for webhooks — a problem during local development. The solution was a dual-mode setup: webhook mode for production (Vercel) and polling mode for development (local). A single env variable switches between them. Zero code changes when deploying.

AI response quality: context is everything

Generic GPT-4o responses are generic. The quality jump came from injecting: (1) business name and description, (2) the last 10 messages as conversation history, (3) the detected user intent from a preliminary classification call. Three-pass prompting added ~2 seconds but increased relevant responses from 60% to 94%.

What I'd do differently

I'd use Inngest for the AI pipeline instead of synchronous Next.js API routes. The 8-second average response time is at the edge of acceptability — a proper job queue would allow streaming responses back to the user as GPT generates them, dropping perceived latency to under 2 seconds.

Want me to build something similar for you?

Hire me for your project →