Answerly - AI Customer Support Chatbot SaaS Platform

A production-grade AI SaaS application that allows businesses to create, train, and deploy intelligent customer support chatbots powered by OpenAI and LangChain.

Demo

DEMO.VIDEO.2.mp4

Features

• AI-Powered Chatbots: Create intelligent chatbots trained on your custom data
• RAG Pipeline: Retrieval Augmented Generation for accurate, context-aware responses
• Multiple Personalities: Professional, friendly, sales-focused, or support-oriented tones
• Document Upload: Support for PDFs, DOCX, TXT, Markdown, and CSV files
• Real-time Streaming: Stream AI responses for better user experience
• Session Management: Track customer conversations and collect leads
• Analytics Dashboard: View chatbot performance, sessions, and revenue metrics
• Stripe Integration: Subscriptions for owners and in-chat checkout for customers
• Secure & Scalable: Row-level security, PostgreSQL with pgvector, deployed on Vercel

Tech Stack

• Frontend: Next.js 14 (App Router), React 18, TypeScript
• UI: ShadCN UI, Tailwind CSS, Radix UI, Framer Motion
• Backend: Next.js Server Actions, API Routes
• Database: Supabase (PostgreSQL + pgvector)
• Auth: Supabase Auth
• AI: OpenAI GPT-4, text-embedding-3-small, LangChain
• Payments: Stripe (subscriptions + checkout)
• Deployment: Vercel

Prerequisites

Before you begin, ensure you have:

• Node.js 18+ and npm 9+
• A Supabase account (supabase.com)
• An OpenAI API key (platform.openai.com)
• A Stripe account (stripe.com)
• Git installed

Quick Start

1. Clone the Repository

git clone https://github.com/yourusername/answerly.git
cd answerly

2. Install Dependencies

npm install

3. Set Up Supabase

1. Create a new project on Supabase
2. Go to Project Settings > API and copy your credentials
3. Go to SQL Editor and run the schema from supabase/schema.sql
4. Enable the pgvector extension:

   CREATE EXTENSION IF NOT EXISTS vector;

4. Configure Environment Variables

Create a .env.local file in the root directory:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# OpenAI
OPENAI_API_KEY=your_openai_api_key

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
NODE_ENV=development

5. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

answerly/
├── src/
│   ├── app/                      # Next.js App Router
│   │   ├── (auth)/              # Authentication pages
│   │   │   ├── login/
│   │   │   └── signup/
│   │   ├── dashboard/           # Dashboard pages
│   │   │   ├── chatbots/        # Chatbot management
│   │   │   ├── analytics/       # Analytics & sessions
│   │   │   └── billing/         # Stripe billing
│   │   ├── chatbot/             # Public chatbot pages
│   │   │   └── [id]/
│   │   ├── api/                 # API routes
│   │   │   ├── chat/            # Streaming chat endpoint
│   │   │   ├── embeddings/      # Embedding generation
│   │   │   └── webhooks/        # Stripe webhooks
│   │   ├── actions/             # Server Actions
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   ├── components/              # React components
│   │   ├── ui/                  # ShadCN UI components
│   │   ├── dashboard/           # Dashboard components
│   │   ├── chatbot/             # Chatbot components
│   │   ├── auth/                # Auth components
│   │   └── providers/           # Context providers
│   ├── lib/                     # Utilities and libraries
│   │   ├── ai/                  # AI/ML pipeline
│   │   │   ├── chat-service.ts
│   │   │   ├── embeddings.ts
│   │   │   ├── rag-pipeline.ts
│   │   │   ├── document-processor.ts
│   │   │   └── text-chunker.ts
│   │   ├── supabase/            # Supabase clients
│   │   └── utils.ts
│   └── types/                   # TypeScript types
│       └── database.types.ts    # Supabase generated types
├── supabase/
│   └── schema.sql               # Database schema
├── public/                      # Static assets
├── ARCHITECTURE.md              # Architecture documentation
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js

Database Schema

The application uses PostgreSQL with pgvector for vector similarity search. Key tables:

• users: User profiles with subscription info
• chatbots: Chatbot configurations
• chatbot_documents: Uploaded training documents
• chatbot_embeddings: Vector embeddings (1536 dimensions)
• sessions: Customer chat sessions
• messages: Individual chat messages
• payments: Stripe payment records
• subscriptions: Owner subscription management
• analytics: Pre-computed metrics

See supabase/schema.sql for the complete schema with Row Level Security policies.

Key Features Implementation

RAG Pipeline

The RAG (Retrieval Augmented Generation) pipeline consists of:

1. Document Processing: Extract text from PDFs, DOCX, etc.
2. Text Chunking: Split documents into semantic chunks (~1000 chars)
3. Embedding Generation: Generate embeddings using OpenAI
4. Vector Storage: Store embeddings in Supabase pgvector
5. Similarity Search: Retrieve relevant context for user queries
6. LLM Response: Generate responses using GPT-4 with context

Streaming Chat

Real-time AI responses are streamed using:

• OpenAI streaming API
• Next.js API routes with streaming support
• Server-Sent Events (SSE) for client updates

Multi-tenancy

Secure multi-tenant architecture using:

• Supabase Row Level Security (RLS)
• Owner-based data isolation
• Public access for chatbot interfaces

Deployment

Deploy to Vercel

1. Push your code to GitHub

2. Import project in Vercel:

   • Go to vercel.com
   • Click "New Project"
   • Import your GitHub repository

3. Configure environment variables:

   • Add all environment variables from .env.local
   • Set NEXT_PUBLIC_APP_URL to your Vercel domain

4. Deploy:

   vercel --prod

Configure Stripe Webhooks

1. Go to Stripe Dashboard > Developers > Webhooks
2. Add endpoint: https://your-domain.vercel.app/api/webhooks/stripe
3. Select events:
   • checkout.session.completed
   • customer.subscription.created
   • customer.subscription.updated
   • customer.subscription.deleted
   • payment_intent.succeeded
4. Copy the webhook signing secret to STRIPE_WEBHOOK_SECRET

Post-Deployment Checklist

• Verify Supabase connection
• Test user registration and login
• Create a test chatbot
• Upload a test document
• Test public chatbot interface
• Verify Stripe webhooks
• Check analytics dashboard
• Test dark/light mode

Development Commands

# Development
npm run dev              # Start dev server
npm run build            # Build for production
npm run start            # Start production server

# Code Quality
npm run lint             # Run ESLint
npm run type-check       # TypeScript type checking

# Supabase (requires Supabase CLI)
npm run supabase:start   # Start local Supabase
npm run supabase:stop    # Stop local Supabase
npm run supabase:reset   # Reset local database
npm run supabase:migrate # Push schema to Supabase

Environment Variables Reference

Variable	Description	Required
NEXT_PUBLIC_SUPABASE_URL	Supabase project URL	Yes
NEXT_PUBLIC_SUPABASE_ANON_KEY	Supabase anonymous key	Yes
SUPABASE_SERVICE_ROLE_KEY	Supabase service role key (server-side only)	Yes
OPENAI_API_KEY	OpenAI API key	Yes
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY	Stripe publishable key	Yes
STRIPE_SECRET_KEY	Stripe secret key	Yes
STRIPE_WEBHOOK_SECRET	Stripe webhook signing secret	Yes
NEXT_PUBLIC_APP_URL	Application URL	Yes

API Routes

Chat API

POST /api/chat
Body: { chatbotId, sessionId, message }
Returns: Streaming AI response

Embeddings API

POST /api/embeddings/generate
Body: { chatbotId, documentId, content }
Returns: { success, embeddings }

Stripe Webhooks

POST /api/webhooks/stripe
Body: Stripe event payload
Returns: { received: true }

Security Best Practices

1. Environment Variables: Never commit .env.local to version control
2. Service Role Key: Only use on server-side, never expose to client
3. RLS Policies: Always enabled for multi-tenant data isolation
4. API Rate Limiting: Implement rate limiting for public endpoints
5. Input Validation: Validate all user inputs on server-side
6. File Upload: Validate file types, sizes, and scan for malware
7. Stripe Webhooks: Always verify webhook signatures

Performance Optimization

• Server Components for initial page loads
• Edge caching via Vercel
• Database connection pooling
• Vector similarity indexing (HNSW)
• Incremental Static Regeneration
• Image optimization with Next.js Image

Troubleshooting

Common Issues

Database connection errors:

• Verify Supabase credentials in .env.local
• Check if pgvector extension is enabled
• Ensure RLS policies are correctly configured

OpenAI API errors:

• Verify API key is valid
• Check API quota and rate limits
• Ensure embeddings model is text-embedding-3-small

Stripe webhook not working:

• Verify webhook secret matches Stripe dashboard
• Check webhook endpoint URL is accessible
• Review Stripe dashboard webhook logs

Build errors:

• Clear .next folder: rm -rf .next
• Delete node_modules: rm -rf node_modules && npm install
• Verify all environment variables are set

Contributing

1. Fork the repository
2. Create your feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to the branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

This project is licensed under the MIT License.

Support

For support, email support@answerly.ai or join our Discord community.

Roadmap

• GraphQL API layer
• Webhook integrations (Zapier, Make)
• Multi-language support
• Voice chat capabilities
• White-label options
• Advanced analytics with charts
• A/B testing for chatbot personalities
• Integration marketplace

---

Built with ❤️ using Next.js, Supabase, and OpenAI