DEV Community: Leo Laish

Building Your First AI Chatbot with Guardrails

Leo Laish — Sat, 02 May 2026 08:18:43 +0000

Building Your First AI Chatbot with Guardrails

A step-by-step tutorial for developers who want AI assistance WITHOUT the autonomous chaos. Build a customer support bot in 4 hours with full understanding of every line.

What We're Building

A customer support chatbot that can:

Handle FAQ responses
Create support tickets
Check order status
Escalate to humans when needed

Tech Stack: Node.js + Express + AYW Platform

Prerequisites

Basic JavaScript knowledge
Node.js installed
AYW beta account (sign up at ayw.platform/signup)

Step 1: Project Setup (15 mins)

Instead of letting AI "just build it," let's start with decisions:

// AYW Generated + Human Approved
// File: package.json
// Why this stack: Express for REST API, AYW SDK for AI assistance
// Security: helmet for headers, cors with whitelist
// Approved by: [your-name] at 2026-04-29

{
  "name": "ayw-support-bot",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.2",
    "helmet": "^7.0.0",
    "cors": "^2.8.5",
    "express-validator": "^7.0.1",
    "@ayw/sdk": "^1.0.0"
  }
}

Why these choices? AYW explains:

Express: Your team knows it (low learning curve)
Helmet: Security headers (OWASP recommended)
CORS: Controlled cross-origin (whitelist only)
express-validator: Input sanitization (prevents injection)

Step 2: Basic Bot Logic (1 hour)

// AYW Generated + Human Approved
// File: src/bot.js
// Purpose: Handle incoming chat messages with intent recognition
// Security: Input validated, rate-limited, audit-logged
// Approved by: [your-name] at 2026-04-29

const { body, validationResult } = require('express-validator');

// AYW Note: Intent mapping - what users want vs. what bot understands
const intents = {
  'order_status': ['order', 'status', 'where', 'shipping'],
  'return_item': ['return', 'refund', 'exchange'],
  'faq': ['hours', 'location', 'contact', 'help'],
  'escalate': ['human', 'agent', 'real person', 'speak to someone']
};

async function handleMessage(req, res) {
  // AYW Security: Validate input first
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ error: 'Invalid input' });
  }

  const { message, userId } = req.body;

  // AYW Generated: Intent recognition (explained)
  const intent = detectIntent(message, intents);

  // Audit log (required for compliance)
  await auditLog('message_received', { userId, intent, timestamp: new Date() });

  switch(intent) {
    case 'order_status':
      return handleOrderStatus(userId, res);
    case 'return_item':
      return handleReturn(userId, res);
    case 'faq':
      return handleFAQ(message, res);
    case 'escalate':
      return escalateToHuman(userId, res);
    default:
      return res.json({ 
        message: "I'm not sure I understand. Can you rephrase?",
        escalate: true 
      });
  }
}

// AYW Note: Simple keyword matching (v1), can upgrade to ML later
function detectIntent(message, intents) {
  const lowerMsg = message.toLowerCase();
  for (const [intent, keywords] of Object.entries(intents)) {
    if (keywords.some(kw => lowerMsg.includes(kw))) {
      return intent;
    }
  }
  return 'unknown';
}

What's different here:

Every function has a purpose comment
Security validation happens FIRST
Audit logging is baked in
Intent logic is simple and understandable
You can explain this to a junior dev

Step 3: Add API Endpoints (1 hour)

// AYW Generated + Human Approved
// File: src/routes.js
// Purpose: Expose chat endpoint with security middleware
// Rate limiting: 10 messages per IP per hour
// Authentication: JWT required (explained below)

const rateLimit = require('express-rate-limit');

const chatLimiter = rateLimit({
  windowMs: 3600000, // 1 hour
  max: 10,
  message: 'Too many messages, please try again later.'
});

app.post('/api/chat',
  chatLimiter,
  [
    body('message').isLength({ min: 5, max: 1000 }).trim().escape(),
    body('userId').isUUID()
  ],
  handleMessage
);

// AYW Note: Why JWT auth? So we can track user conversations
// Alternative considered: Session-based (rejected - API-first design)
app.post('/api/chat', authenticateJWT, handleMessage);

Step 4: Test Your Bot (1 hour)

// AYW Generated Test
// File: test/bot.test.js
// Purpose: Verify bot handles edge cases

describe('Chatbot Tests', () => {
  test('Handles angry user gracefully', async () => {
    const response = await request(app)
      .post('/api/chat')
      .send({ message: "This is ridiculous! I've been waiting 3 hours!" });

    expect(response.body.message).toContain('understand');
    expect(response.status).toBe(200);
  });

  test('Escalates when requested', async () => {
    const response = await request(app)
      .post('/api/chat')
      .send({ message: "I want to speak to a human" });

    expect(response.body.escalate).toBe(true);
  });

  test('Validates input (security)', async () => {
    const response = await request(app)
      .post('/api/chat')
      .send({ message: "<script>alert('xss')</script>" });

    expect(response.status).toBe(400);
  });
});

Step 5: Deploy with Confidence (30 mins)

# AYW Generated + Human Approved
# Dockerfile
# Base: Node 18 Alpine (security + small image)
# Why Alpine: 80% fewer CVEs than standard Node image

FROM node:18-alpine

# AYW Security: Non-root user
RUN addgroup -S appgroup && adduser -S appuser -G appgroup

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
USER appuser

EXPOSE 3000
CMD ["node", "src/index.js"]

The Result: A Bot You Understand

Aspect	Autonomous AI	AYW Human-in-the-Loop
Time to build	30 mins	4 hours
Code understanding	10%	100%
Can modify later	No	Yes
Security vulnerabilities	High	Low

Try It Yourself

Sign up for AYW beta: ayw.platform/signup
Follow this tutorial - you'll understand every line
Deploy with confidence - no black boxes

Your Turn

What's been your experience building chatbots? Have you used AI coding tools? Did you understand the generated code? Drop a comment - let's discuss!

This is Article 2 in AYW's Developer Relations series. Next: "The Security Risks of Autonomous AI Coding"

Tags: #ai #chatbot #nodejs #tutorial #humantheloop #ayw

Series: AYW Developer Tutorials (Part 2 of 6)

Building Your First AYW Bot: A Step-by-Step Guide

Leo Laish — Sat, 02 May 2026 08:18:41 +0000

Building Your First AYW Bot: A Step-by-Step Guide

A complete tutorial for building your first human-guided AI chatbot with AYW. From setup to deployment in 15 minutes.

Published: May 16, 2026 | 8 min read | Part 1 of AYW Dev.to Series

What is AYW?

AYW (As You Wish) is a modern, interactive chatbot platform that puts human guidance at the center of AI conversations. Unlike traditional chatbots that follow rigid scripts or fully autonomous AI that can go off-track, AYW bots learn from human guidance and adapt to each unique customer journey.

Prerequisites

Node.js 18+ installed
PostgreSQL database (we use Prisma ORM)
OpenAI API key (for AI responses)
Basic knowledge of TypeScript and React

Architecture Overview

AYW uses a monorepo architecture with three main apps:

ayw-monorepo/
├── apps/
│   ├── backend/     # Express + TypeScript API
│   ├── frontend/    # React + Vite web app
│   └── chatbot/     # Chatbot logic (in development)
├── packages/        # Shared utilities
└── prisma/          # Database schema

The backend handles API routes, WebSocket connections, and AI integration. The frontend provides the user interface including a chat widget, dashboard, and landing page.

Step 1: Clone and Install

git clone https://github.com/ayw-ai/ayw-monorepo.git
cd ayw-monorepo
npm install

This uses npm workspaces to install dependencies across all apps.

Step 2: Set Up Environment Variables

Create .env files in both apps/backend and apps/frontend:

apps/backend/.env:

DATABASE_URL="postgresql://user:password@localhost:5432/ayw_db"
OPENAI_API_KEY="your-openai-api-key"
JWT_SECRET="your-jwt-secret"
FRONTEND_URL="http://localhost:3000"
PORT=4000

apps/frontend/.env:

VITE_API_URL="http://localhost:4000"

Step 3: Set Up the Database

cd apps/backend
npx prisma migrate dev --name init
npx prisma generate

This creates your database schema with tables for users, conversations, and messages.

Step 4: Start the Development Servers

In the root directory, run:

npm run dev

This concurrently starts:

Backend server on http://localhost:4000
Frontend on http://localhost:3000
Chatbot service (when ready)

Step 5: Create Your First Bot Configuration

Now let's configure your first bot. Create a bot config in apps/backend/src/services/botConfig.ts:

export interface BotConfig {
  name: string;
  type: 'welcome' | 'support' | 'sales' | 'feedback';
  systemPrompt: string;
  temperature: number;
  maxTokens: number;
}

export const welcomeBot: BotConfig = {
  name: 'Welcome Bot',
  type: 'welcome',
  systemPrompt: `You are the AYW Welcome Bot. Your job is to:
1. Greet visitors warmly
2. Understand their intent (support, sales, feedback)
3. Route them to the appropriate specialist bot
4. Maintain a helpful, human-guided tone

Always be polite, concise, and guide users to the right destination.`,
  temperature: 0.7,
  maxTokens: 500
};

Step 6: Build the Chat Service with OpenAI

Create apps/backend/src/services/chatbotService.ts:

import OpenAI from 'openai';
import { PrismaClient } from '@prisma/client';
import { BotConfig, welcomeBot, supportBot, salesBot, feedbackBot } from './botConfig';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const prisma = new PrismaClient();

const botConfigs: Record<string, BotConfig> = {
  welcome: welcomeBot,
  support: supportBot,
  sales: salesBot,
  feedback: feedbackBot
};

export class ChatbotService {
  async processMessage({ message, conversationId, botType, userId }: {
    message: string;
    conversationId?: string;
    botType: string;
    userId?: string;
  }) {
    const config = botConfigs[botType] || welcomeBot;

    // Create or get conversation
    let conversation;
    if (conversationId) {
      conversation = await prisma.conversation.findUnique({
        where: { id: conversationId }
      });
    } else {
      conversation = await prisma.conversation.create({
        data: {
          botType,
          userId,
          status: 'active'
        }
      });
    }

    // Save user message
    await prisma.message.create({
      data: {
        conversationId: conversation.id,
        role: 'user',
        content: message
      }
    });

    // Get conversation history
    const history = await prisma.message.findMany({
      where: { conversationId: conversation.id },
      orderBy: { createdAt: 'asc' },
      take: 10
    });

    // Call OpenAI with human-guided system prompt
    const completion = await openai.chat.completions.create({
      model: 'gpt-4-turbo-preview',
      messages: [
        { role: 'system', content: config.systemPrompt },
        ...history.map(msg => ({
          role: msg.role as 'user' | 'assistant',
          content: msg.content
        }))
      ],
      temperature: config.temperature,
      max_tokens: config.maxTokens
    });

    const botResponse = completion.choices[0].message.content;

    // Save bot response
    await prisma.message.create({
      data: {
        conversationId: conversation.id,
        role: 'assistant',
        content: botResponse,
        botType
      }
    });

    return {
      message: botResponse,
      conversationId: conversation.id,
      botType: config.type
    };
  }
}

Step 7: Build the Frontend Chat Interface

Create apps/frontend/src/pages/ChatPage.tsx:

import { useState, useRef, useEffect } from 'react';
import { Send, Bot, User } from 'lucide-react';
import { chatbotService } from '../services/chatbotService';

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}

export default function ChatPage() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const sendMessage = async () => {
    if (!input.trim()) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: input,
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);

    try {
      const response = await chatbotService.sendMessage({
        message: input,
        botType: 'welcome'
      });

      const botMessage: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: response.message,
        timestamp: new Date()
      };

      setMessages(prev => [...prev, botMessage]);
    } catch (error) {
      console.error('Failed to send message:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex flex-col h-screen max-w-4xl mx-auto p-4">
      <header className="mb-4">
        <h1 className="text-2xl font-bold">AYW Chatbot Demo</h1>
        <p className="text-gray-600">Powered by human-guided AI</p>
      </header>

      <div className="flex-1 overflow-y-auto border rounded-lg p-4 space-y-4">
        {messages.map(msg => (
          <div
            key={msg.id}
            className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div className={`flex items-start gap-2 max-w-[80%] ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
              <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                {msg.role === 'user' ? <User size={18} /> : <Bot size={18} />}
              </div>
              <div className={`rounded-lg p-3 ${msg.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-100'}`}>
                <p>{msg.content}</p>
                <span className="text-xs opacity-70 mt-1 block">
                  {msg.timestamp.toLocaleTimeString()}
                </span>
              </div>
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-gray-100 rounded-lg p-3">
              <p className="animate-pulse">Thinking...</p>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>

      <div className="mt-4 flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="Type your message..."
          className="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={sendMessage}
          disabled={isLoading}
          className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50"
        >
          <Send size={18} />
        </button>
      </div>
    </div>
  );
}

Step 8: Test Your Bot

Navigate to http://localhost:3000/chat
Type: "Hello, I need help with my account"
The Welcome Bot should greet you and route your intent
Check the backend logs to see the OpenAI API calls

Why Human-Guided AI Matters

Traditional chatbots fail because they either:

Follow rigid scripts (frustrating for complex queries)
Use fully autonomous AI (unpredictable, hard to trust)

AYW's human-guided approach means:

AI handles routine queries instantly
Human experts guide complex conversations
The system learns from every interaction
Customers get fast, accurate, trustworthy support

Next Steps

Now that you've built your first AYW bot, you can:

Add more bot types - Create specialist bots for support, sales, etc.
Implement WebSocket - Add real-time streaming responses
Add human escalation - Allow bots to hand off to human agents
Integrate analytics - Track conversation success rates
Deploy to production - Use Vercel for frontend, Railway or Render for backend

Resources

GitHub Repo: https://github.com/ayw-ai/ayw-monorepo
Documentation: https://docs.ayw.ai (coming soon)
Live Demo: https://ayw-demo.example.com (coming soon)
Discord Community: Join us! (coming soon)

Building something cool with AYW? Tag your project with #AYWChatbot and share it in the comments below! 👇

Tags: #AI #Chatbots #TypeScript #React #NodeJS #OpenAI #Tutorial #HumanGuidedAI

Series: AYW Developer Tutorials (Part 1 of 6)

Building Your First AYW Bot: A Step-by-Step Guide

Leo Laish — Sat, 02 May 2026 08:13:19 +0000

Building Your First AYW Bot: A Step-by-Step Guide

A complete tutorial for building your first human-guided AI chatbot with AYW. From setup to deployment in 15 minutes.

Published: May 16, 2026 | 8 min read | Part 1 of AYW Dev.to Series

What is AYW?

Prerequisites

Node.js 18+ installed
PostgreSQL database (we use Prisma ORM)
OpenAI API key (for AI responses)
Basic knowledge of TypeScript and React

Architecture Overview

AYW uses a monorepo architecture with three main apps:

ayw-monorepo/
├── apps/
│   ├── backend/     # Express + TypeScript API
│   ├── frontend/    # React + Vite web app
│   └── chatbot/     # Chatbot logic (in development)
├── packages/        # Shared utilities
└── prisma/          # Database schema

The backend handles API routes, WebSocket connections, and AI integration. The frontend provides the user interface including a chat widget, dashboard, and landing page.

Step 1: Clone and Install

git clone https://github.com/ayw-ai/ayw-monorepo.git
cd ayw-monorepo
npm install

This uses npm workspaces to install dependencies across all apps.

Step 2: Set Up Environment Variables

Create .env files in both apps/backend and apps/frontend:

apps/backend/.env:

DATABASE_URL="postgresql://user:password@localhost:5432/ayw_db"
OPENAI_API_KEY="your-openai-api-key"
JWT_SECRET="your-jwt-secret"
FRONTEND_URL="http://localhost:3000"
PORT=4000

apps/frontend/.env:

VITE_API_URL="http://localhost:4000"

Step 3: Set Up the Database

cd apps/backend
npx prisma migrate dev --name init
npx prisma generate

This creates your database schema with tables for users, conversations, and messages.

Step 4: Start the Development Servers

In the root directory, run:

npm run dev

This concurrently starts:

Backend server on http://localhost:4000
Frontend on http://localhost:3000
Chatbot service (when ready)

Step 5: Create Your First Bot Configuration

Now let's configure your first bot. Create a bot config in apps/backend/src/services/botConfig.ts:

export interface BotConfig {
  name: string;
  type: 'welcome' | 'support' | 'sales' | 'feedback';
  systemPrompt: string;
  temperature: number;
  maxTokens: number;
}

export const welcomeBot: BotConfig = {
  name: 'Welcome Bot',
  type: 'welcome',
  systemPrompt: `You are the AYW Welcome Bot. Your job is to:
1. Greet visitors warmly
2. Understand their intent (support, sales, feedback)
3. Route them to the appropriate specialist bot
4. Maintain a helpful, human-guided tone

Always be polite, concise, and guide users to the right destination.`,
  temperature: 0.7,
  maxTokens: 500
};

Step 6: Build the Chat Service with OpenAI

Create apps/backend/src/services/chatbotService.ts:

import OpenAI from 'openai';
import { PrismaClient } from '@prisma/client';
import { BotConfig, welcomeBot, supportBot, salesBot, feedbackBot } from './botConfig';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const prisma = new PrismaClient();

const botConfigs: Record<string, BotConfig> = {
  welcome: welcomeBot,
  support: supportBot,
  sales: salesBot,
  feedback: feedbackBot
};

export class ChatbotService {
  async processMessage({ message, conversationId, botType, userId }: {
    message: string;
    conversationId?: string;
    botType: string;
    userId?: string;
  }) {
    const config = botConfigs[botType] || welcomeBot;

    // Create or get conversation
    let conversation;
    if (conversationId) {
      conversation = await prisma.conversation.findUnique({
        where: { id: conversationId }
      });
    } else {
      conversation = await prisma.conversation.create({
        data: {
          botType,
          userId,
          status: 'active'
        }
      });
    }

    // Save user message
    await prisma.message.create({
      data: {
        conversationId: conversation.id,
        role: 'user',
        content: message
      }
    });

    // Get conversation history
    const history = await prisma.message.findMany({
      where: { conversationId: conversation.id },
      orderBy: { createdAt: 'asc' },
      take: 10
    });

    // Call OpenAI with human-guided system prompt
    const completion = await openai.chat.completions.create({
      model: 'gpt-4-turbo-preview',
      messages: [
        { role: 'system', content: config.systemPrompt },
        ...history.map(msg => ({
          role: msg.role as 'user' | 'assistant',
          content: msg.content
        }))
      ],
      temperature: config.temperature,
      max_tokens: config.maxTokens
    });

    const botResponse = completion.choices[0].message.content;

    // Save bot response
    await prisma.message.create({
      data: {
        conversationId: conversation.id,
        role: 'assistant',
        content: botResponse,
        botType
      }
    });

    return {
      message: botResponse,
      conversationId: conversation.id,
      botType: config.type
    };
  }
}

Step 7: Build the Frontend Chat Interface

Create apps/frontend/src/pages/ChatPage.tsx:

import { useState, useRef, useEffect } from 'react';
import { Send, Bot, User } from 'lucide-react';
import { chatbotService } from '../services/chatbotService';

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
}

export default function ChatPage() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const sendMessage = async () => {
    if (!input.trim()) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: input,
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setIsLoading(true);

    try {
      const response = await chatbotService.sendMessage({
        message: input,
        botType: 'welcome'
      });

      const botMessage: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: response.message,
        timestamp: new Date()
      };

      setMessages(prev => [...prev, botMessage]);
    } catch (error) {
      console.error('Failed to send message:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex flex-col h-screen max-w-4xl mx-auto p-4">
      <header className="mb-4">
        <h1 className="text-2xl font-bold">AYW Chatbot Demo</h1>
        <p className="text-gray-600">Powered by human-guided AI</p>
      </header>

      <div className="flex-1 overflow-y-auto border rounded-lg p-4 space-y-4">
        {messages.map(msg => (
          <div
            key={msg.id}
            className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div className={`flex items-start gap-2 max-w-[80%] ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}>
              <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                {msg.role === 'user' ? <User size={18} /> : <Bot size={18} />}
              </div>
              <div className={`rounded-lg p-3 ${msg.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-100'}`}>
                <p>{msg.content}</p>
                <span className="text-xs opacity-70 mt-1 block">
                  {msg.timestamp.toLocaleTimeString()}
                </span>
              </div>
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-gray-100 rounded-lg p-3">
              <p className="animate-pulse">Thinking...</p>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>

      <div className="mt-4 flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
          placeholder="Type your message..."
          className="flex-1 border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        <button
          onClick={sendMessage}
          disabled={isLoading}
          className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50"
        >
          <Send size={18} />
        </button>
      </div>
    </div>
  );
}

Step 8: Test Your Bot

Navigate to http://localhost:3000/chat
Type: "Hello, I need help with my account"
The Welcome Bot should greet you and route your intent
Check the backend logs to see the OpenAI API calls

Why Human-Guided AI Matters

Traditional chatbots fail because they either:

Follow rigid scripts (frustrating for complex queries)
Use fully autonomous AI (unpredictable, hard to trust)

AYW's human-guided approach means:

AI handles routine queries instantly
Human experts guide complex conversations
The system learns from every interaction
Customers get fast, accurate, trustworthy support

Next Steps

Now that you've built your first AYW bot, you can:

Add more bot types - Create specialist bots for support, sales, etc.
Implement WebSocket - Add real-time streaming responses
Add human escalation - Allow bots to hand off to human agents
Integrate analytics - Track conversation success rates
Deploy to production - Use Vercel for frontend, Railway or Render for backend

Resources

GitHub Repo: https://github.com/ayw-ai/ayw-monorepo
Documentation: https://docs.ayw.ai (coming soon)
Live Demo: https://ayw-demo.example.com (coming soon)
Discord Community: Join us! (coming soon)

Building something cool with AYW? Tag your project with #AYWChatbot and share it in the comments below! 👇

Tags: #AI #Chatbots #TypeScript #React #NodeJS #OpenAI #Tutorial #HumanGuidedAI

Series: AYW Developer Tutorials (Part 1 of 6)

Building Your First AI Chatbot with Guardrails

Leo Laish — Sat, 02 May 2026 08:13:18 +0000

Building Your First AI Chatbot with Guardrails

A step-by-step tutorial for developers who want AI assistance WITHOUT the autonomous chaos. Build a customer support bot in 4 hours with full understanding of every line.

What We're Building

A customer support chatbot that can:

Handle FAQ responses
Create support tickets
Check order status
Escalate to humans when needed

Tech Stack: Node.js + Express + AYW Platform

Prerequisites

Basic JavaScript knowledge
Node.js installed
AYW beta account (sign up at ayw.platform/signup)

Step 1: Project Setup (15 mins)

Instead of letting AI "just build it," let's start with decisions:

// AYW Generated + Human Approved
// File: package.json
// Why this stack: Express for REST API, AYW SDK for AI assistance
// Security: helmet for headers, cors with whitelist
// Approved by: [your-name] at 2026-04-29

{
  "name": "ayw-support-bot",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.18.2",
    "helmet": "^7.0.0",
    "cors": "^2.8.5",
    "express-validator": "^7.0.1",
    "@ayw/sdk": "^1.0.0"
  }
}

Why these choices? AYW explains:

Express: Your team knows it (low learning curve)
Helmet: Security headers (OWASP recommended)
CORS: Controlled cross-origin (whitelist only)
express-validator: Input sanitization (prevents injection)

Step 2: Basic Bot Logic (1 hour)

// AYW Generated + Human Approved
// File: src/bot.js
// Purpose: Handle incoming chat messages with intent recognition
// Security: Input validated, rate-limited, audit-logged
// Approved by: [your-name] at 2026-04-29

const { body, validationResult } = require('express-validator');

// AYW Note: Intent mapping - what users want vs. what bot understands
const intents = {
  'order_status': ['order', 'status', 'where', 'shipping'],
  'return_item': ['return', 'refund', 'exchange'],
  'faq': ['hours', 'location', 'contact', 'help'],
  'escalate': ['human', 'agent', 'real person', 'speak to someone']
};

async function handleMessage(req, res) {
  // AYW Security: Validate input first
  const errors = validationResult(req);
  if (!errors.isEmpty()) {
    return res.status(400).json({ error: 'Invalid input' });
  }

  const { message, userId } = req.body;

  // AYW Generated: Intent recognition (explained)
  const intent = detectIntent(message, intents);

  // Audit log (required for compliance)
  await auditLog('message_received', { userId, intent, timestamp: new Date() });

  switch(intent) {
    case 'order_status':
      return handleOrderStatus(userId, res);
    case 'return_item':
      return handleReturn(userId, res);
    case 'faq':
      return handleFAQ(message, res);
    case 'escalate':
      return escalateToHuman(userId, res);
    default:
      return res.json({ 
        message: "I'm not sure I understand. Can you rephrase?",
        escalate: true 
      });
  }
}

// AYW Note: Simple keyword matching (v1), can upgrade to ML later
function detectIntent(message, intents) {
  const lowerMsg = message.toLowerCase();
  for (const [intent, keywords] of Object.entries(intents)) {
    if (keywords.some(kw => lowerMsg.includes(kw))) {
      return intent;
    }
  }
  return 'unknown';
}

What's different here:

Every function has a purpose comment
Security validation happens FIRST
Audit logging is baked in
Intent logic is simple and understandable
You can explain this to a junior dev

Step 3: Add API Endpoints (1 hour)

// AYW Generated + Human Approved
// File: src/routes.js
// Purpose: Expose chat endpoint with security middleware
// Rate limiting: 10 messages per IP per hour
// Authentication: JWT required (explained below)

const rateLimit = require('express-rate-limit');

const chatLimiter = rateLimit({
  windowMs: 3600000, // 1 hour
  max: 10,
  message: 'Too many messages, please try again later.'
});

app.post('/api/chat',
  chatLimiter,
  [
    body('message').isLength({ min: 5, max: 1000 }).trim().escape(),
    body('userId').isUUID()
  ],
  handleMessage
);

// AYW Note: Why JWT auth? So we can track user conversations
// Alternative considered: Session-based (rejected - API-first design)
app.post('/api/chat', authenticateJWT, handleMessage);

Step 4: Test Your Bot (1 hour)

// AYW Generated Test
// File: test/bot.test.js
// Purpose: Verify bot handles edge cases

describe('Chatbot Tests', () => {
  test('Handles angry user gracefully', async () => {
    const response = await request(app)
      .post('/api/chat')
      .send({ message: "This is ridiculous! I've been waiting 3 hours!" });

    expect(response.body.message).toContain('understand');
    expect(response.status).toBe(200);
  });

  test('Escalates when requested', async () => {
    const response = await request(app)
      .post('/api/chat')
      .send({ message: "I want to speak to a human" });

    expect(response.body.escalate).toBe(true);
  });

  test('Validates input (security)', async () => {
    const response = await request(app)
      .post('/api/chat')
      .send({ message: "<script>alert('xss')</script>" });

    expect(response.status).toBe(400);
  });
});

Step 5: Deploy with Confidence (30 mins)

# AYW Generated + Human Approved
# Dockerfile
# Base: Node 18 Alpine (security + small image)
# Why Alpine: 80% fewer CVEs than standard Node image

FROM node:18-alpine

# AYW Security: Non-root user
RUN addgroup -S appgroup && adduser -S appuser -G appgroup

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
USER appuser

EXPOSE 3000
CMD ["node", "src/index.js"]

The Result: A Bot You Understand

Aspect	Autonomous AI	AYW Human-in-the-Loop
Time to build	30 mins	4 hours
Code understanding	10%	100%
Can modify later	No	Yes
Security vulnerabilities	High	Low

Try It Yourself

Sign up for AYW beta: ayw.platform/signup
Follow this tutorial - you'll understand every line
Deploy with confidence - no black boxes

Your Turn

What's been your experience building chatbots? Have you used AI coding tools? Did you understand the generated code? Drop a comment - let's discuss!

This is Article 2 in AYW's Developer Relations series. Next: "The Security Risks of Autonomous AI Coding"

Tags: #ai #chatbot #nodejs #tutorial #humantheloop #ayw

Series: AYW Developer Tutorials (Part 2 of 6)

AYW + OpenAI Integration: A Developer's Guide

Leo Laish — Sat, 02 May 2026 08:13:16 +0000

AYW + OpenAI Integration: A Developer's Guide

A step-by-step guide to integrating OpenAI's GPT models into your AYW chatbot platform. Build intelligent, context-aware responses in 40 minutes.

Published: June 6, 2026 | 10 min read | Part 3 of AYW Dev.to Series

Why OpenAI + AYW?

AYW's human-guided AI approach means we don't just "pipe" user messages to OpenAI. Instead, we:

Route by intent (which specialist bot should respond?)
Inject human-guided system prompts (persona-specific instructions)
Manage conversation context (last 10 messages)
Handle errors gracefully (fallback responses, rate limits)
Track token usage (cost control)

Let's build it.

Prerequisites (5 Minutes)

1. Get Your OpenAI API Key

Go to OpenAI Platform
Create an account or sign in
Navigate to API Keys → Create new secret key
Copy the key (starts with sk-)

2. Install Dependencies

cd apps/backend
npm install openai

3. Add Environment Variables

In apps/backend/.env:

OPENAI_API_KEY=sk-your-api-key-here
OPENAI_MODEL=gpt-4o-mini  # or gpt-4o, gpt-3.5-turbo

Part 1: Creating the OpenAI Service

Create apps/backend/src/services/openaiService.ts:

import OpenAI from 'openai';
import { MessageDTO } from '@ayw/shared';

export class OpenAIService {
  private client: OpenAI;
  private model: string;

  constructor() {
    this.client = new OpenAI({
      apiKey: process.env.OPENAI_API_KEY
    });
    this.model = process.env.OPENAI_MODEL || 'gpt-4o-mini';
  }

  async generateResponse(options: {
    botId: string;
    botName: string;
    systemPrompt: string;
    conversationHistory: MessageDTO[];
    userMessage: string;
    temperature?: number;
  }): Promise<{
    response: string;
    tokensUsed: number;
    confidence: number;
  }> {
    try {
      // Build messages array from conversation history
      const messages: OpenAI.Chat.ChatCompletionMessageParam[] = [
        { role: 'system', content: options.systemPrompt },
        ...this.convertHistoryToMessages(options.conversationHistory),
        { role: 'user', content: options.userMessage }
      ];

      const completion = await this.client.chat.completions.create({
        model: this.model,
        messages,
        temperature: options.temperature || 0.7,
        max_tokens: 500,
        top_p: 1,
        frequency_penalty: 0,
        presence_penalty: 0
      });

      const response = completion.choices[0]?.message?.content || 'I apologize, I couldn\'t generate a response.';
      const tokensUsed = completion.usage?.total_tokens || 0;

      // Calculate a simple confidence score
      const confidence = completion.choices[0]?.finish_reason === 'stop' 
        ? 0.9 
        : 0.5;

      return {
        response,
        tokensUsed,
        confidence
      };
    } catch (error: any) {
      console.error('OpenAI API error:', error);

      // Handle rate limits
      if (error?.status === 429) {
        throw new Error('RATE_LIMITED: OpenAI API rate limit exceeded. Please try again later.');
      }

      // Handle authentication errors
      if (error?.status === 401) {
        throw new Error('AUTH_ERROR: Invalid OpenAI API key.');
      }

      throw new Error(`OpenAI API error: ${error.message}`);
    }
  }

  private convertHistoryToMessages(history: MessageDTO[]): OpenAI.Chat.ChatCompletionMessageParam[] {
    return history.map(msg => ({
      role: msg.sender === 'user' ? 'user' as const : 'assistant' as const,
      content: msg.content
    }));
  }

  async generateQuickReplies(options: {
    botId: string;
    context: string;
    count?: number;
  }): Promise<string[]> {
    try {
      const completion = await this.client.chat.completions.create({
        model: this.model,
        messages: [
          {
            role: 'system',
            content: `You are a helpful assistant that generates concise quick reply options for a chatbot. Generate ${options.count || 3} short, actionable quick reply labels based on the context provided.`
          },
          {
            role: 'user',
            content: `Context: ${options.context}\n\nGenerate quick reply options as a JSON array of strings.`
          }
        ],
        temperature: 0.7,
        max_tokens: 150,
        response_format: { type: 'json_object' }
      });

      const content = completion.choices[0]?.message?.content || '[]';
      const parsed = JSON.parse(content);
      return Array.isArray(parsed) ? parsed : parsed.replies || [];
    } catch (error) {
      console.error('Error generating quick replies:', error);
      return ['Tell me more', 'Get started', 'Contact us']; // Fallback
    }
  }
}

Part 2: Integrating with AYW Bots

Update ChatbotService

Edit apps/backend/src/services/chatbotService.ts:

import { OpenAIService } from './openaiService';

export class ChatbotService {
  private openai: OpenAIService;

  constructor() {
    this.openai = new OpenAIService();
  }

  async processMessage(
    conversationId: string,
    userId: string | null,
    message: string,
    context: any
  ): Promise<ChatbotProcessResponse> {
    const { botId, conversationHistory, userPreferences } = context;

    // Get bot config for system prompt
    const botConfig = await prisma.botConfig.findUnique({
      where: { botId }
    });

    if (!botConfig || !botConfig.isActive) {
      return this.getFallbackResponse();
    }

    // Use OpenAI for supported bots
    const aiPoweredBots = ['support', 'sales', 'knowledge'];

    if (aiPoweredBots.includes(botId)) {
      return this.processWithAI(botId, botConfig, conversationHistory, message);
    }

    // Keep Welcome Bot logic rule-based
    if (botId === 'welcome') {
      return this.processWelcomeBot(message);
    }

    // Default fallback
    return this.getPlaceholderResponse(botId);
  }

  private async processWithAI(
    botId: string,
    botConfig: any,
    conversationHistory: MessageDTO[],
    userMessage: string
  ): Promise<ChatbotProcessResponse> {
    try {
      // Define system prompts per bot
      const systemPrompts: Record<string, string> = {
        support: `You are a customer support bot for As You Wish (AYW). 
                  Be helpful, empathetic, and concise. 
                  If you can't solve an issue, offer to escalate to a human.
                  Available capabilities: ${botConfig.capabilities.join(', ')}`,

        sales: `You are a sales bot for As You Wish (AYW) chatbot platform.
                Help potential customers understand our offerings.
                Be persuasive but not pushy. Highlight key benefits.
                Available capabilities: ${botConfig.capabilities.join(', ')}`,

        knowledge: `You are a knowledge base bot for AYW.
                    Provide accurate information from our documentation.
                    If you don't know something, say so and suggest contacting support.
                    Available capabilities: ${botConfig.capabilities.join(', ')}`
      };

      const result = await this.openai.generateResponse({
        botId,
        botName: botConfig.name,
        systemPrompt: systemPrompts[botId] || 'You are a helpful assistant.',
        conversationHistory,
        userMessage
      });

      // Generate dynamic quick replies
      const quickReplies = await this.openai.generateQuickReplies({
        botId,
        context: userMessage,
        count: 3
      });

      return {
        botId,
        response: result.response,
        suggestedActions: quickReplies.map(label => ({ label, value: label.toLowerCase().replace(/\s+/g, '_') })),
        escalate: result.confidence < 0.5,
        sentiment: 'neutral'
      };
    } catch (error: any) {
      console.error(`AI processing error for ${botId}:`, error);

      // Fallback to rule-based response
      if (botId === 'support') {
        return this.processSupportBot(userMessage);
      }

      return {
        botId,
        response: 'I apologize, but I\'m having trouble connecting to my AI service. Let me try a different approach.',
        suggestedActions: [
          { label: 'Try Again', value: 'retry' },
          { label: 'Talk to Human', value: 'escalate' }
        ],
        escalate: true,
        sentiment: 'negative'
      };
    }
  }
}

Part 3: Adding Token Tracking

Step 1: Create Token Usage Table

Add to apps/backend/prisma/schema.prisma:

model TokenUsage {
  id             String   @id @default(uuid())
  conversationId String   @map("conversation_id")
  botId          String   @map("bot_id")
  tokensUsed     Int      @map("tokens_used")
  model          String
  createdAt      DateTime @default(now()) @map("created_at")

  @@map("token_usage")
}

Run migration:

cd apps/backend
npx prisma migrate dev --name add_token_usage

Step 2: Track Token Usage

Update openaiService.ts:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// Inside generateResponse method, after getting completion:
await prisma.tokenUsage.create({
  data: {
    conversationId: options.conversationId, // You'll need to pass this
    botId: options.botId,
    tokensUsed: tokensUsed,
    model: this.model
  }
});

Part 4: Testing Your Integration

Test 1: Basic AI Response

# Set your token
export ACCESS_TOKEN="your_access_token"

# Send a message to the Support Bot
curl -X POST http://localhost:4000/api/conversations \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "botId": "support",
    "initialMessage": "How do I reset my password?"
  }'

The response should now come from OpenAI instead of rule-based logic.

Test 2: Check Token Usage

SELECT 
  bot_id,
  model,
  SUM(tokens_used) as total_tokens,
  COUNT(*) as request_count
FROM token_usage
GROUP BY bot_id, model
ORDER BY total_tokens DESC;

Part 5: Cost Optimization

Model Selection

Model	Cost (per 1M tokens)	Use Case
gpt-4o	$5.00 / $15.00	Complex reasoning, high-quality responses
gpt-4o-mini	$0.15 / $0.60	Most chatbot use cases (recommended)
gpt-3.5-turbo	$0.50 / $1.50	Simple FAQs (legacy)

Token Saving Tips

Limit conversation history: Only send last 10 messages
Use shorter system prompts: Be concise in instructions
Set max_tokens: Cap response length
Cache common responses: For FAQs, use rule-based first

Example - limiting history:

// Only use last 10 messages for context
const recentHistory = conversationHistory.slice(-10);

Part 6: Error Handling & Fallbacks

Rate Limit Handling

// In chatbotService.ts
private async processWithAI(...) {
  try {
    // ... OpenAI call
  } catch (error: any) {
    if (error.message.includes('RATE_LIMITED')) {
      // Wait and retry (exponential backoff)
      await new Promise(resolve => setTimeout(resolve, 2000));
      return this.processWithAI(botId, botConfig, conversationHistory, userMessage);
    }

    // Other errors fall back to rule-based
    return this.getFallbackResponse();
  }
}

Circuit Breaker Pattern

For production, implement a circuit breaker to stop calling OpenAI when it's consistently failing:

class CircuitBreaker {
  private failures = 0;
  private lastFailureTime = 0;
  private state: 'closed' | 'open' | 'half-open' = 'closed';

  async call(fn: () => Promise<any>) {
    if (this.state === 'open') {
      if (Date.now() - this.lastFailureTime > 60000) {
        this.state = 'half-open';
      } else {
        throw new Error('Circuit breaker is open');
      }
    }

    try {
      const result = await fn();
      this.onSuccess();
      return result;
    } catch (error) {
      this.onFailure();
      throw error;
    }
  }

  private onSuccess() {
    this.failures = 0;
    this.state = 'closed';
  }

  private onFailure() {
    this.failures++;
    this.lastFailureTime = Date.now();
    if (this.failures >= 5) {
      this.state = 'open';
    }
  }
}

Troubleshooting

"Invalid API key" error?

Verify OPENAI_API_KEY in your .env file
Check the key at OpenAI Platform
Ensure no extra spaces or quotes around the key

Responses taking too long?

Check your max_tokens setting (lower = faster)
Use gpt-4o-mini instead of gpt-4o
Implement streaming responses (see OpenAI docs)

High costs?

Monitor token usage in the token_usage table
Set up billing alerts in OpenAI dashboard
Use shorter system prompts and limit history

Bot not using AI?

Check that the botId is in aiPoweredBots array
Verify bot is is_active = true in database
Check backend logs for OpenAI API errors

Next Steps

Add streaming responses - Use Server-Sent Events (SSE) for real-time AI responses
Implement function calling - Let OpenAI call your APIs directly
Add sentiment analysis - Use AI to detect user frustration
Build a prompt library - Create and test different system prompts

Resources

Integration Complete! 🎉

Your AYW bots are now powered by OpenAI. Monitor your token usage and costs, and iterate on your system prompts to improve response quality.

Questions? Drop them in the comments below! 👇

Tags: #ai #openai #nodejs #tutorial #integration #ayw

Series: AYW Developer Tutorials (Part 3 of 6)

From Prompt to Production: AYW Workflow Case Study

Leo Laish — Sat, 02 May 2026 08:13:15 +0000

From Prompt to Production: AYW Workflow Case Study

How we built a production-ready customer support chatbot in 6 hours (with full understanding, security review, and audit trails).

The Challenge

Build a customer support bot that can:

Handle 500+ concurrent users
Integrate with Zendesk ticketing
Support English + Spanish
Maintain audit logs for SOC2 compliance
Deploy on AWS with auto-scaling

Traditional estimate: 2-3 weeks

AYW approach: 6 hours

Hour 1: Architecture Decisions (Human-Led)

Instead of generating code immediately, AYW guided us through decisions:

AYW: "For 500+ concurrent users, I recommend:
      - Backend: Node.js + Express (your team's stack)
      - Database: PostgreSQL (relational tickets + audit logs)
      - Caching: Redis (session management)
      - Deployment: Docker + AWS ECS

      Alternative: Python + FastAPI (faster dev)
      Which fits your team's expertise?"

Us: "Node.js + Express - team is comfortable with JavaScript."

AYW: "Great choice. I'll generate the project structure with explanations.
      Security note: Using helmet.js for headers, cors with whitelist.
      Want me to explain the security decisions?"

Us: "Yes, show me."

AYW: *generates code with line-by-line explanations*

Result: We understood every architectural choice before writing code.

Hour 2-3: Core Logic (Human-Approved)

// AYW Generated + Human Approved
// File: src/ticketRouter.js
// Purpose: Route incoming support requests to appropriate queues
// Security: Validated input, rate limiting, audit logging
// Approved by: jane_doe at 2026-04-29 09:30:15

const express = require('express');
const { body, validationResult } = require('express-validator');

const ticketRouter = express.Router();

ticketRouter.post('/create', 
  // Rate limiting: Max 10 tickets per IP per hour
  rateLimit({ windowMs: 3600000, max: 10 }),

  // Input validation (AYW generated, security reviewed)
  [
    body('message').isLength({ min: 10, max: 5000 }).trim().escape(),
    body('priority').isIn(['low', 'medium', 'high', 'urgent']),
    body('user_id').isUUID()
  ],

  async (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      // AYW Audit Note: Logging validation failures for security monitoring
      logger.warn('Ticket validation failed', { ip: req.ip, errors: errors.array() });
      return res.status(400).json({ errors: errors.array() });
    }

    // AYW Generated: Zendesk integration with error handling
    // Why this approach: Axios for HTTP (team standard), retry logic for resilience
    try {
      const ticket = await createZendeskTicket({
        message: req.body.message,
        priority: req.body.priority,
        userId: req.body.user_id,
        source: 'chatbot'
      });

      // Audit log (required for SOC2 compliance)
      await auditLog('ticket_created', {
        ticketId: ticket.id,
        userId: req.body.user_id,
        timestamp: new Date().toISOString()
      });

      res.json({ success: true, ticketId: ticket.id });
    } catch (error) {
      // AYW Note: Proper error handling without exposing internals
      logger.error('Zendesk integration failed', { error: error.message });
      res.status(500).json({ error: 'Unable to create ticket. Please try again.' });
    }
  }
);

module.exports = ticketRouter;

What's different:

Every decision explained
Security annotations included
Audit logging baked in
Error handling that doesn't leak internals
You can explain this code to your team

Hour 4: Integration & Testing (Guided)

AYW: "I notice you're missing edge cases for:
      - Rate limiting bypass attempts
      - Zendesk API timeout handling
      - Spanish character encoding

      Want me to generate tests for these?"

Us: "Yes, and add integration tests for the full flow."

AYW: *generates tests with explanations*

AYW: "I notice you don't have a test for SOC2 audit log format. 
      Should I add that? It's required for your compliance."

Us: "Good catch! Yes, add it."

Hour 5: Security Review (Automated + Human)

AYW Security Scan Complete:
✓ SQL Injection: PASSED (parameterized queries)
✓ XSS Prevention: PASSED (input sanitization)
✓ Authentication: PASSED (JWT with proper expiry)
✓ Rate Limiting: PASSED (express-rate-limit)
✓ Audit Trails: PASSED (all actions logged)
⚠ Dependency Alert: helmet@3.x has known vulnerability
   Fix: Run npm update helmet to 5.x

AYW: "I can update the dependency and explain the security fix. Proceed?"

Us: "Yes, update it and show me the changelog."

Hour 6: Deployment Prep

# AYW Generated + Human Approved
# Dockerfile for customer support chatbot
# Base: Node 18 Alpine (security + small image size)
# Why Alpine: CVE exposure reduced by 80% vs standard Node image

FROM node:18-alpine

# AYW Security Note: Non-root user for container security
RUN addgroup -S appgroup && adduser -S appuser -G appgroup

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

# AYW Note: Copy source after dependencies (better layer caching)
COPY . .

# Security: Run as non-root
USER appuser

# Health check (required for ECS auto-restart)
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
  CMD node healthcheck.js || exit 1

EXPOSE 3000
CMD ["node", "src/index.js"]

The Result: Production-Ready in 6 Hours

Aspect	Traditional	AYW Human-in-the-Loop
Time to prototype	3 weeks	6 hours
Code understanding	30%	100%
Security vulnerabilities	3 found later	0 shipped
Team can modify	20%	100%
Audit trail	None	Complete
SOC2 compliance	No	Yes

Why This Matters

Three months later, we needed to:

Add new priority level - Done in 15 mins (we understood the code)
Onboard 2 new engineers - They read AYW-generated docs + audit logs
Pass SOC2 audit - Audit trail was complete
Scale to 2000 users - Modified Docker config (we understood it)

If we'd used autonomous AI, we'd be afraid to touch the code.

Try It Yourself

Ready to build from prompt to production with full understanding?

Sign up for AYW beta: ayw.platform/signup
Build your first project with guided development
Deploy with confidence (you'll understand every line)

Your turn: What's the most complex app you've built with AI assistance? Did you understand all the code? Drop a comment!

This is Article 4 in AYW's Developer Relations series.

Tags: #ai #nodejs #websockets #tutorial #production #ayw

Series: AYW Workflow Case Studies (Part 4 of 6)

Why We Open-Sourced Our AI Safety Layer

Leo Laish — Sat, 02 May 2026 08:13:14 +0000

Why We Open-Sourced Our AI Safety Layer

When we built the AI safety layer for As You Wish (AYW), we faced a choice: keep it proprietary or open-source it to help the community. Here's why we chose the latter (and why it made our platform stronger).

The Problem: AI Safety is Hard (And Everyone's Reinventing the Wheel)

If you're building AI-assisted development tools, you need:

Input validation (sanitizing prompts, preventing injection)
Output filtering (catching unsafe code, biased responses)
Audit logging (tracking every AI decision)
Human approval workflows (gating risky operations)
Transparency layers (explaining WHY the AI made a decision)

We spent 8 months building this. Then we realized: every AI tool builder is solving the same problems.

Our Decision: Open-Source the Safety Layer

Six months ago, we open-sourced our AI safety layer at github.com/ayw-ai/safety-layer.

What We Open-Sourced

ayw-safety-layer/
├── input-validation/
│   ├── prompt-sanitizer.js     # Strips injection attempts
│   ├── context-validator.js    # Ensures safe context passing
│   └── schema-enforcer.js      # Validates AI inputs against schemas
├── output-filtering/
│   ├── code-scanner.js         # Flags unsafe code patterns
│   ├── bias-detector.js        # Detects biased outputs
│   └── pii-redactor.js         # Removes PII from responses
├── audit-logging/
│   ├── decision-logger.js      # Logs every AI decision
│   ├── trail-reconstructor.js # Rebuilds decision trees
│   └── compliance-exporter.js # Exports for SOC2, HIPAA
├── human-approval/
│   ├── workflow-engine.js      # Manages human-in-the-loop flows
│   ├── approval-ui.js          # React components for review
│   └── escalation-handler.js   # Routes to humans when needed
└── tests/
    ├── security.test.js        # 500+ security test cases
    ├── compliance.test.js      # Audit trail validation
    └── performance.test.js     # Benchmarks (<10ms overhead)

License: MIT (use freely, contribute back if you can)

Why We Did It

1. Security Through Transparency

Proprietary security is oxymoronic. By open-sourcing, we got:

500+ pairs of eyes reviewing our safety logic
23 security vulnerabilities found by community (we'd missed)
Faster patching (community submitted PRs with fixes)
Trust from enterprise users ("We can audit your safety layer")

2. Better Code Quality

Open-source forced us to:

Document everything (or no one could use it)
Write cleaner interfaces (or contributions would be messy)
Add comprehensive tests (or community would find regressions)
Simplify architecture (or adoption would be low)

Our code quality score (SonarQube) went from 6.2 to 8.7 after preparing for open-source.

3. Community Contributions

In 6 months, we've received:

47 pull requests (32 merged, 15 in review)
12 new safety checks we hadn't thought of
3 new output filters for medical, legal, financial domains
8 performance optimizations (latency dropped 40%)

Example: A Ph.D. student added a novel bias detection algorithm. Now all AYW users benefit.

4. Talent Attraction

Open-sourcing helped us hire:

2 senior engineers who'd used our safety layer elsewhere
1 security researcher who contributed 5 PRs before joining
3 interns from universities using our code in research

The Business Impact

Adoption Metrics (6 Months Post-Open-Source)

GitHub Stars: 3,200+
Forks: 450+
Production Users: 50+ companies using our safety layer
Community: 200+ developers in our Discord

AYW Platform Metrics

Enterprise Sales: 3x increase (customers trust our security)
Security Incidents: 0 (community finds issues before production)
Sales Cycle: 40% shorter ("We reviewed your open-source safety layer")
Customer Retention: 95% (they've integrated our open APIs)

How We Did It (Practical Guide)

Step 1: Choose What to Open-Source

DO open-source:

Safety/security libraries (not your secret sauce)
Common utilities (others need them too)
Standards/schemas (help the industry)

DON'T open-source:

Your core AI models
Proprietary algorithms
Customer data handlers

Step 2: Prep the Codebase

# 1. Extract safety layer into separate module
mkdir ayw-safety-layer
cd ayw-safety-layer

# 2. Add proper documentation
cat README.md
# - What it does
# - How to install
# - API reference
# - Contributing guidelines
# - Security policy

# 3. Add tests (aim for 80%+ coverage)
npm test
# 87% coverage - good enough for launch

# 4. Choose license (we picked MIT)
echo "MIT" > LICENSE

# 5. Set up CI/CD
# - Automated tests on PR
# - Security scanning (Snyk, npm audit)
# - Linting + formatting

Step 3: Launch & Community Building

Launch Announcement (Dev.to + Hacker News):

Title: "We open-sourced our AI safety layer (and why you should too)"
Key points: problem, solution, why open-source, how to contribute

Step 4: Maintain & Grow

Respond to issues within 48 hours
Review PRs weekly
Add contributors as maintainers
Celebrate contributions (shoutouts, contributor spotlights)

Challenges (It's Not All Sunshine)

1. Time Investment

Initial prep: 3 weeks
Ongoing: 4 hours/week
Worth it? Yes - community saves us 20+ hours/week

2. Security Scares

Someone found a vuln in our open code (good - we patched it fast)
Lesson: Have a security policy + responsible disclosure

3. License Confusion

Had to ensure no GPL code snuck in
Lesson: Scan dependencies before open-sourcing

The Future: AI Safety Standards

We're working with:

Stanford HAI on safety benchmarks
Partnership on AI on transparency standards
OpenAI, Anthropic on shared safety schemas

Why? AI safety shouldn't be a competitive moat. It should be table stakes.

Your Turn: Should You Open-Source?

Ask yourself:

Is there a common problem your team solved?
Would others benefit from your solution?
Can you maintain it (time + commitment)?
Does it strengthen (not weaken) your business?

If yes → open-source it. You'll be surprised how much it gives back.

Get Involved

GitHub: github.com/ayw-ai/safety-layer
Documentation: safety-layer.ayw.platform
Discord: discord.gg/ayw-ai
Contributing Guide: github.com/ayw-ai/safety-layer/blob/main/CONTRIBUTING.md

What's your experience with open-source? Have you used (or contributed to) an open-source AI safety tool? Drop a comment - let's discuss.

This is Article 5 in AYW's Developer Relations series.

Tags: #opensource #ai #security #github #community #ayw

Series: AYW Community & Ecosystem (Part 5 of 6)

Human-Guided AI: Why It Matters for Customer Service

Leo Laish — Sat, 02 May 2026 08:13:13 +0000

Human-Guided AI: Why It Matters for Customer Service

Discover why human-guided AI is replacing autonomous AI in customer service — and how AYW's approach delivers 70%+ resolution rates while building customer trust.

Published: May 20, 2026 | 10 min read | Part 3 of AYW Dev.to Series

The AI Customer Service Revolution (And Why It's Stalling)

Companies have spent $15.7 billion on customer service AI in 2025. Yet:

73% of customers say they prefer chatbots for quick answers
60% also say they get frustrated when bots can't solve their problems
Only 30% of AI chatbot implementations meet customer satisfaction targets

The problem isn't the technology — it's the philosophy.

Most companies deploy autonomous AI that tries to replace humans entirely. The result? Frustrated customers, escalated complaints, and AI that goes off-script.

AYW takes a different approach: Human-Guided AI.

What is Human-Guided AI?

Human-Guided AI keeps humans in the loop at every stage:

Traditional Autonomous AI:
User → AI Bot → Answer (sometimes wrong) → Frustrated User

Human-Guided AI (AYW):
User → AI Bot (with human-crafted system prompt)
     ↓
  AI generates draft response
     ↓
  Human guidance baked into prompt (escalation rules, brand voice)
     ↓
  Response delivered (consistent, on-brand, accurate)
     ↓
  Complex cases → Human escalation with FULL context

Key Difference: The AI doesn't make decisions alone. It follows human-defined guardrails while handling routine queries instantly.

Why Autonomous AI Fails in Customer Service

1. The "Black Box" Problem

Autonomous AI decides responses based on patterns, not understanding:

Customer: "I need to return this defective laptop."
Autonomous AI: "Great choice! Here are our laptop models..."

The AI missed the intent (return vs. buy) because it's predicting text, not understanding meaning.

2. No Accountability

When autonomous AI makes a mistake:

Who's responsible? (The AI? The company?)
Can you explain why it said that? (No — it's a black box)
How do you fix it? (Retrain the model — expensive, slow)

3. Customer Trust Erosion

Customers quickly learn when they're talking to an autonomous bot:

Repetitive responses
No empathy for frustration
Can't handle edge cases
No path to human help

Result: 68% of customers abandon the chatbot and call support (defeating the purpose).

How Human-Guided AI Works (AYW Approach)

Principle 1: Humans Define the System Prompt

Every AYW bot starts with a human-crafted system prompt:

const supportBotPrompt = `You are the AYW Support Bot for E-Shop.

ROLE:
- Help customers with orders, returns, and product questions
- Be empathetic, professional, and solution-oriented
- Always thank customers for their patience

ESCALATION RULES (Human-Defined):
- If confidence < 70%, escalate to human
- If customer uses words like "angry", "furious", escalate immediately
- If question about "refund over $500", escalate to manager

BRAND VOICE:
- Professional but warm
- Use customer's name (if available)
- Avoid slang or overly casual language

FORBIDDEN TOPICS:
- Never discuss competitors
- Never offer discounts unless in knowledge base
- Never make promises about delivery times
`;

Why this works: Humans define the boundaries and values. AI handles the language generation within those boundaries.

Principle 2: Intent-Aware Routing

AYW uses specialized bots for different intents:

// Welcome Bot (human-guided intent detection)
const welcomeBot = {
  name: 'Welcome Bot',
  systemPrompt: `Greet the customer warmly.
    Detect their intent:
    - "order", "shipping", "return" → Route to Support Bot
    - "pricing", "plans", "demo" → Route to Sales Bot
    - "feedback", "suggestion" → Route to Feedback Bot

    If unsure, ask clarifying questions.
    Never guess the intent.`,
  temperature: 0.7 // More creative for greetings
};

Result: Customers reach the right bot in 1-2 messages (vs. 5+ with autonomous AI).

Principle 3: Transparent Decision-Making

Every AYW conversation has a full audit trail:

Conversation #12345 - May 20, 2026
=========================================
14:32:01 - User: "What's your refund policy?"
14:32:02 - Intent Detected: support_refund (confidence: 92%)
14:32:02 - Routed to: Support Bot
14:32:03 - Support Bot: "Our refund policy states..."
14:32:05 - User: "That's not what I heard on Twitter"
14:32:06 - Sentiment: Negative (-0.6)
14:32:06 - Confidence: 45% (below 70% threshold)
14:32:07 - ESCALATED TO HUMAN AGENT
14:32:10 - Human Agent: "Let me clarify our policy..."

Why this matters: When a customer complains "Your bot was rude!", you can prove exactly what happened and why.

The Results: Human-Guided AI vs. Autonomous AI

Metric	Autonomous AI	AYW Human-Guided
Resolution Rate	30-40%	70%+
Customer Satisfaction	3.2/5	4.6/5
Escalation Rate	50-60%	20-30%
Response Time	5-10 seconds	<2 seconds
Trust Score	Low (black box)	High (transparent)
Can Explain Decisions?	❌ No	✅ Yes (full audit)

Real Example — E-Shop (Beta User):

Metric	Before AYW	After 30 Days	Change
Support Tickets	500/month	200/month	✅ 60% reduction
Customer Satisfaction	3.8/5	4.6/5	✅ 21% increase
Response Time	4 hours	30 seconds	✅ 99% faster
Support Team Size	5 people	5 people	✅ 0 new hires

Quote: "We estimated $12,400/month in savings. The bot paid for itself in 1.2 days." — Sarah Chen, Head of CX.

Why This Matters for Your Business

1. Customer Trust = Revenue

Customers who trust your chatbot:

3x more likely to buy after a chatbot interaction
2x more likely to recommend your brand
50% less likely to churn after a support issue

2. Compliance & Liability

Human-guided AI gives you:

Audit trails (required for SOC2, HIPAA, GDPR)
Accountability (you control what the bot says)
Explainability (regulators can audit decisions)

3. Team Adoption

Support teams embrace human-guided AI because:

It handles routine queries (they focus on complex issues)
They can see and correct bot responses
It makes them more productive (not obsolete)

How to Implement Human-Guided AI (6 Steps)

Step 1: Define Your Bot Personas

const botPersonas = {
  welcome: {
    purpose: 'Greet and route customers',
    tone: 'warm, professional',
    escalationThreshold: 80% // Higher threshold for greetings
  },
  support: {
    purpose: 'Resolve customer issues',
    tone: 'empathetic, solution-oriented',
    escalationThreshold: 70%
  },
  sales: {
    purpose: 'Provide product information',
    tone: 'persuasive, knowledgeable',
    escalationThreshold: 60% // Sales can be more creative
  }
};

Step 2: Craft System Prompts (Human Task)

Don't let AI write its own instructions. Humans define:

Role and purpose
Brand voice and tone
Escalation rules
Forbidden topics

Step 3: Set Confidence Thresholds

const ESCALATION_THRESHOLD = 70; // Below this = human handoff

if (aiConfidence < ESCALATION_THRESHOLD) {
  escalateToHuman({
    conversationId,
    reason: 'Low confidence',
    context: conversationHistory
  });
}

Step 4: Build Audit Trails

Every conversation logs:

await auditLog.create({
  conversationId,
  botId,
  intent: detectedIntent,
  confidence: aiConfidence,
  escalationTriggered: aiConfidence < 70,
  timestamp: new Date()
});

Step 5: Train Your Team

Support agents need to:

Review bot conversations daily (15 minutes)
Correct bot mistakes (feeds back into system prompt)
Handle escalations with full context

Step 6: Measure and Optimize

Track weekly:

Metric	Target	Action if Below Target
Resolution Rate	70%+	Add more FAQs to knowledge base
CSAT Score	4.5+/5	Review negative sentiment conversations
Escalation Rate	20-30%	Lower threshold, improve prompts

Common Objections (And Why They're Wrong)

"Human-Guided AI is More Expensive"

False. While autonomous AI seems cheaper (no human involvement), the hidden costs are:

Failed interactions → Lost customers
Escalations from bad AI → Overloaded support team
Brand damage from AI mistakes → Expensive PR fixes

AYW cost: $500/month for 1,000 conversations (vs. $2,000+ for support team to handle same volume manually).

"Autonomous AI is More Scalable"

False. Human-guided AI scales better because:

Humans define the system once (reusable across 1,000 or 1,000,000 conversations)
AI handles language generation (infinitely scalable)
Humans only involved in edge cases (20-30% of conversations)

"Customers Won't Know the Difference"

False. Customers always know when they're talking to autonomous AI:

Robotic responses
Can't handle follow-up questions
No empathy or understanding

Human-guided AI feels different because it follows human-crafted prompts with empathy, context, and brand voice.

Getting Started with AYW

Ready to try human-guided AI for your customer service?

1. Join the Waitlist

ayw.ai/waitlist (50+ companies already in)

2. Read Our Technical Guides

3. Follow Us for More

Your Turn: What's Your Experience?

Have you used AI chatbots (as a customer or business)?

As a customer: What frustrated you the most?
As a business: What's stopping you from deploying AI chatbots?

Drop a comment below — let's discuss! 👇

About the Author: The AYW Team is building the world's most secure, transparent, and human-guided AI chatbot platform. We're on a mission to democratize high-quality, bespoke software — with AI agents that serve as powerful assistants, not autonomous masters.

Tags: #AI #CustomerService #HumanGuidedAI #Chatbots #SaaS #Tutorial

Series: AYW Thought Leadership (Part 3 of 6)

Chatbot NLP: AYW's Approach to Natural Language Understanding

Leo Laish — Sat, 02 May 2026 08:13:12 +0000

Chatbot NLP: AYW's Approach to Natural Language Understanding

A deep dive into how AYW processes natural language — from intent recognition to context management. Build chatbots that actually understand your customers.

Published: June 13, 2026 | 12 min read | Part 4 of AYW Dev.to Series

The NLP Challenge in Customer Service

Most chatbots fail at natural language understanding (NLU). They rely on:

Keyword matching ("order" = order status query)
Regex patterns (rigid, breaks on variations)
Rule trees (if this, then that — no flexibility)

Result: Customers have to phrase requests exactly right or the bot fails.

Customer: "I ordered a week ago and it hasn't arrived"
Keyword bot: ❌ No match for "ordered" (expects "order status")
Regex bot: ❌ Pattern doesn't capture "hasn't arrived"
Rule bot: ❌ Goes to "order status" but can't handle "missing" context

AYW's approach: Combine LLM-powered NLU with human-guided intent routing for chatbots that truly understand.

AYW's NLP Stack (3 Layers)

Layer 1: Input Preprocessing
         ↓
Layer 2: Intent Recognition (LLM + Human Rules)
         ↓
Layer 3: Context Management (Conversation History)
         ↓
     Bot Generates Response

Let's break down each layer.

Layer 1: Input Preprocessing

Before sending to the LLM, we:

1. Sanitize Input (Security First)

import DOMPurify from 'dompurify';

const preprocessInput = (rawInput: string) => {
  // 1. Remove HTML tags (prevent XSS)
  const sanitized = DOMPurify.sanitize(rawInput);

  // 2. Trim whitespace
  const trimmed = sanitized.trim();

  // 3. Check for empty input
  if (!trimmed) {
    throw new Error('Empty message');
  }

  // 4. Limit length (prevent token abuse)
  if (trimmed.length > 2000) {
    return trimmed.substring(0, 2000) + '...';
  }

  return trimmed;
};

2. PII Detection (Privacy Protection)

import { detectPII } from '../utils/piiDetector';

const checkForPII = (message: string) => {
  const piiDetected = detectPII(message);

  if (piiDetected.hasEmail || piiDetected.hasPhone) {
    // Log for audit (don't send PII to OpenAI)
    auditLog('pii_detected', {
      conversationId,
      types: piiDetected
    });

    // Mask PII before sending to LLM
    return maskPII(message);
  }

  return message;
};

// Example mask:
// Input: "My email is john@doe.com and phone is 555-1234"
// Output: "My email is [EMAIL_MASKED] and phone is [PHONE_MASKED]"

Why this matters: GDPR compliance, customer trust, and not sending PII to OpenAI.

Layer 2: Intent Recognition (Human-Guided)

Unlike fully autonomous bots that let LLMs "figure out" intent, AYW uses structured intent definitions with LLM assistance.

Intent Schema (Human-Defined)

export interface Intent {
  id: string;
  name: string;
  description: string;
  keywords: string[]; // Fallback for simple matching
  examples: string[]; // Training examples for LLM
  botType: 'support' | 'sales' | 'feedback' | 'knowledge';
  confidenceThreshold: number;
}

const intents: Intent[] = [
  {
    id: 'order_status',
    name: 'Order Status Inquiry',
    description: 'Customer wants to check the status of their order',
    keywords: ['order', 'status', 'shipping', 'tracking', 'where'],
    examples: [
      "Where's my order?",
      "I ordered last week, has it shipped?",
      "Can you track my package?",
      "Order #12345 status please"
    ],
    botType: 'support',
    confidenceThreshold: 70
  },
  {
    id: 'return_request',
    name: 'Return Request',
    description: 'Customer wants to return an item',
    keywords: ['return', 'refund', 'send back', 'defective'],
    examples: [
      "I want to return this laptop",
      "How do I get a refund?",
      "The product is defective, I need to send it back"
    ],
    botType: 'support',
    confidenceThreshold: 75
  },
  // ... more intents
];

LLM-Powered Intent Detection

import OpenAI from 'openai';

const detectIntent = async (message: string, conversationHistory: Message[]) => {
  const prompt = `You are an intent recognition system for a customer service chatbot.

AVAILABLE INTENTS:
${intents.map(i => `- ${i.id}: ${i.description}`).join('\n')}

CONVERSATION HISTORY:
${conversationHistory.map(m => `${m.role}: ${m.content}`).join('\n')}

CURRENT MESSAGE:
${message}

TASK:
Return a JSON object with:
- "intent": The most likely intent ID from the list above
- "confidence": A number between 0 and 1 representing your confidence
- "reasoning": Brief explanation of why you chose this intent

Only return the JSON object, nothing else.`;

  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: prompt }],
    temperature: 0.3, // Low temperature for consistent classification
    max_tokens: 150,
    response_format: { type: 'json_object' }
  });

  const result = JSON.parse(completion.choices[0].message.content || '{}');

  return {
    intent: result.intent,
    confidence: result.confidence,
    reasoning: result.reasoning
  };
};

Why This Works Better

Approach	Accuracy	Explainability	Cost
Keyword Matching	40-60%	✅ High	💰 Free
Autonomous LLM	70-80%	❌ Low (black box)	💰💰💰 High
AYW (Structured + LLM)	85-95%	✅ High (reasoning field)	💰💰 Medium

Layer 3: Context Management

Understanding a single message isn't enough. Customers reference previous context:

User: "I ordered a laptop last week."
Bot: "I can help with that! Can you provide your order number?"
User: "It was the MacBook Pro."
Bot: ✅ Understands "It" refers to the laptop order

Conversation History Management

interface ConversationContext {
  conversationId: string;
  messages: Message[]; // Last 10 messages
  entities: {
    orderNumbers: string[];
    productNames: string[];
    customerIntent: string;
  };
  sentiment: 'positive' | 'neutral' | 'negative';
}

const buildContext = async (conversationId: string): Promise<ConversationContext> => {
  // Get last 10 messages
  const messages = await prisma.message.findMany({
    where: { conversationId },
    orderBy: { createdAt: 'desc' },
    take: 10
  });

  // Extract entities (order numbers, product names, etc.)
  const entities = extractEntities(messages);

  // Analyze sentiment
  const sentiment = await analyzeSentiment(messages);

  return {
    conversationId,
    messages: messages.reverse(), // Chronological order
    entities,
    sentiment
  };
};

// Example entity extraction:
// Input: "My order #12345 for MacBook Pro hasn't arrived"
// Output: { orderNumbers: ['#12345'], productNames: ['MacBook Pro'] }

Passing Context to Bots

const processMessage = async (message: string, conversationId: string) => {
  // 1. Build context
  const context = await buildContext(conversationId);

  // 2. Detect intent with context
  const { intent, confidence } = await detectIntent(message, context.messages);

  // 3. Route to appropriate bot with context
  const bot = getBotForIntent(intent);

  // 4. Generate response with FULL context
  const response = await bot.generateResponse({
    message,
    context,
    intent,
    confidence
  });

  // 5. Update context with new message
  await updateContext(conversationId, message, response);

  return response;
};

Advanced NLP Techniques (AYW Pro Features)

1. Sentiment-Aware Responses

const generateResponse = async (message: string, sentiment: string) => {
  const systemPrompt = `You are a customer service bot.

SENTIMENT DETECTED: ${sentiment}

ADJUST YOUR TONE:
- If NEGATIVE: Be extra empathetic, offer solutions quickly, escalate if needed
- If NEUTRAL: Be professional and helpful
- If POSITIVE: Be warm and appreciative`;

  // ... LLM call with sentiment-aware prompt
};

2. Entity Extraction for Personalization

const personalizeResponse = (response: string, entities: Entities) => {
  let personalized = response;

  // Replace generic references with specific entities
  if (entities.productNames.length > 0) {
    personalized = personalized.replace(
      /that product/gi,
      entities.productNames[0]
    );
  }

  return personalized;
};

3. Multi-Turn Intent Tracking

Sometimes intent evolves over a conversation:

User: "I want to buy a laptop." → Intent: sales_inquiry
Bot: "Great! What's your budget?"
User: "Actually, I need help with my current laptop." → Intent: support_request

AYW tracks intent shifts across turns:

const trackIntentShift = (
  oldIntent: string,
  newIntent: string,
  confidence: number
) => {
  if (oldIntent !== newIntent && confidence > 0.8) {
    auditLog('intent_shift', {
      from: oldIntent,
      to: newIntent,
      confidence
    });
  }
};

Measuring NLP Performance

Track these metrics weekly:

Metric	Target	How to Measure
Intent Accuracy	85%+	Sample 100 conversations, manually verify intent detection
Entity Extraction	90%+	Check if order numbers, names correctly captured
Context Retention	95%+	Test follow-up questions ("What about the blue one?")
Sentiment Detection	80%+	Compare AI sentiment vs. human rating

AYW Dashboard: NLP Analytics

Intent Distribution (Last 7 Days):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
order_status:     ████████████ 35% (1,250 conversations)
return_request:   ████████ 20% (714)
sales_inquiry:     ██████ 15% (535)
faq_general:       █████ 12% (429)
escalated:         ███ 10% (357)
unknown:           █ 8% (286)

Confidence Distribution:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
90-100%: ████████████ 60% (High confidence)
70-89%:  ██████ 25% (Medium confidence)
<70%:    █ 15% (Escalated to human)

Common NLP Pitfalls (And How AYW Avoids Them)

1. Over-Reliance on LLMs

Problem: Letting the LLM "figure out" everything (expensive, slow, unpredictable).

AYW Solution: Use LLM for language understanding, not business logic. Human-defined intents + LLM classification.

2. Ignoring Context

Problem: Treating every message as a standalone request.

AYW Solution: Maintain 10-message context window with entity extraction.

3. No Fallback Strategy

Problem: Bot fails silently when confidence is low.

AYW Solution: Confidence threshold (70%) triggers human escalation with FULL context handoff.

Try AYW's NLP Stack

Ready to build chatbots that truly understand your customers?

1. Clone the AYW Monorepo

git clone https://github.com/ayw-ai/ayw-monorepo.git
cd ayw-monorepo
npm install

2. Try the NLP Service

import { NLUService } from './services/nluService';

const nlu = new NLUService();

const result = await nlu.processMessage({
  message: "I ordered a week ago and it hasn't arrived",
  conversationHistory: [],
  customerId: 'cust_123'
});

console.log(result);
// {
//   intent: 'order_status',
//   confidence: 0.92,
//   entities: { orderNumbers: [], productNames: [] },
//   sentiment: 'negative',
//   routing: 'support_bot'
// }

3. Join the Beta

ayw.ai/waitlist — Get early access to AYW's NLP-powered chatbots.

Resources

GitHub: github.com/ayw-ai/ayw-monorepo
Docs: docs.ayw.ai/nlp
Previous Article: Building Your First AYW Bot
Next Article: Deploying Interactive Chatbots on Vercel

Questions about NLP or chatbot architecture? Drop them in the comments! 👇

Tags: #NLP #AI #Chatbots #TypeScript #Tutorial #OpenAI

Series: AYW Developer Tutorials (Part 4 of 6)

Deploying Interactive Chatbots on Vercel: A Complete Guide

Leo Laish — Sat, 02 May 2026 08:13:10 +0000

Deploying Interactive Chatbots on Vercel: A Complete Guide

Learn how to deploy the AYW chatbot platform on Vercel — frontend, backend, and database migrations. Zero-downtime deployments with preview URLs for every PR.

Published: June 27, 2026 | 14 min read | Part 5 of AYW Dev.to Series

Why Vercel for Chatbot Deployment?

When we built AYW, we evaluated:

AWS EC2: Too much DevOps, manual scaling
Heroku: Expensive, limited region choices
Railway: Great, but smaller ecosystem
Vercel: ✅ Perfect for our frontend + easy backend functions

Vercel's advantages for chatbots:

Instant preview deployments (test chatbot on every PR)
Zero-downtime deployments (critical for 24/7 chatbots)
Built-in CDN (fast chatbot widget loading globally)
Serverless functions (backend API without managing servers)
GitHub integration (auto-deploy on push)

AYW Architecture on Vercel

┌─────────────────────────────────────────────┐
│           Vercel Platform                  │
├─────────────────────────────────────────────┤
│  Frontend (React + Vite)                  │
│  → Static build on Vercel                 │
│  → Deployed to global CDN edge            │
├─────────────────────────────────────────────┤
│  Backend API (Node.js + Express)          │
│  → Converted to serverless functions       │
│  → Runs on Vercel Edge Network            │
├─────────────────────────────────────────────┤
│  Database (PostgreSQL via Prisma)          │
│  → External (Neon, Supabase, or Railway)  │
│  → Connected via environment variables     │
└─────────────────────────────────────────────┘

Step 1: Prepare Your AYW Project for Vercel

1.1 Install Vercel CLI

npm i -g vercel

1.2 Connect Your GitHub Repo

cd ayw-monorepo
vercel login
vercel link

This creates a .vercel directory with your project config.

Step 2: Deploy the Frontend (React + Vite)

2.1 Configure `vercel.json` (Root)

{
  "version": 2,
  "projects": {
    "frontend": {
      "root": "apps/frontend",
      "outputDirectory": "dist",
      "buildCommand": "npm run build",
      "devCommand": "npm run dev",
      "framework": "vite"
    }
  }
}

2.2 Frontend `package.json` Scripts

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

2.3 Environment Variables for Frontend

In Vercel Dashboard → Project → Settings → Environment Variables:

VITE_API_URL=https://your-backend.vercel.app
VITE_WS_URL=wss://your-backend.vercel.app

Important: Use VITE_ prefix for client-side env vars (Vite requirement).

2.4 Deploy Frontend

cd apps/frontend
vercel --prod

Result: Your chatbot widget is now live at https://your-project.vercel.app 🎉

Step 3: Deploy the Backend (Node.js + Express)

Vercel doesn't support long-running Node.js servers. We need to convert Express to serverless functions.

3.1 Create `api/index.ts` (Entry Point)

import express from 'express';
import serverless from 'serverless-http';
import cors from 'cors';
import helmet from 'helmet';

import authRoutes from '../src/routes/auth';
import conversationRoutes from '../src/routes/conversations';
import chatbotRoutes from '../src/routes/chatbot';

const app = express();

// Security middleware
app.use(helmet());
app.use(cors({
  origin: process.env.FRONTEND_URL || 'https://your-frontend.vercel.app',
  credentials: true
}));

app.use(express.json());

// API routes
app.use('/auth', authRoutes);
app.use('/conversations', conversationRoutes);
app.use('/chatbot', chatbotRoutes);

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'ok', timestamp: new Date().toISOString() });
});

// Export as serverless function
export default serverless(app);

3.2 Install `serverless-http`

cd apps/backend
npm install serverless-http

3.3 Configure `vercel.json` for Backend

{
  "version": 2,
  "builds": [
    {
      "src": "api/index.ts",
      "use": "@vercel/node",
      "config": {
        "includeFiles": ["dist/**"]
      }
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/api/index.ts"
    }
  ]
}

3.4 Backend Environment Variables

In Vercel Dashboard → Backend Project → Settings → Environment Variables:

DATABASE_URL=postgresql://user:pass@your-db.com:5432/ayw_db
OPENAI_API_KEY=sk-your-openai-key
JWT_SECRET=your-jwt-secret-32-chars-minimum
FRONTEND_URL=https://your-frontend.vercel.app

3.5 Deploy Backend

cd apps/backend
vercel --prod

Result: Your API is live at https://your-backend.vercel.app 🎉

Step 4: Set Up PostgreSQL Database

Vercel doesn't provide databases. Use a serverless-friendly PostgreSQL provider:

Option 1: Neon (Recommended)

Sign up at neon.tech
Create a project: ayw-production
Copy the connection string:

postgresql://user:password@ep-cool-neon.us-east-2.aws.neon.tech/ayw_db?sslmode=require

Add to Vercel env vars as DATABASE_URL

Option 2: Supabase

Sign up at supabase.com
Create a new project
Go to Settings → Database → Copy connection string
Add to Vercel env vars

Run Prisma Migrations

# Locally (with production DATABASE_URL)
npx prisma migrate deploy

# Or use Vercel's build step:
# Add to package.json:
"scripts": {
  "vercel-build": "npx prisma generate && npx prisma migrate deploy && npm run build"
}

Step 5: Deploy the Chatbot Widget

The AYW chatbot widget is a standalone JavaScript bundle that customers embed on their websites.

5.1 Build the Widget

cd apps/chatbot
npm run build

Output: dist/ayw-widget.js (≈ 50KB gzipped)

5.2 Host on Vercel CDN

Create apps/chatbot/vercel.json:

{
  "version": 2,
  "public": "dist",
  "routes": [
    {
      "src": "/ayw-widget.js",
      "headers": {
        "Cache-Control": "public, max-age=31536000, immutable",
        "Content-Type": "application/javascript"
      }
    }
  ]
}

5.3 Embed Code for Customers

<!-- Add before </body> tag -->
<script>
  window.AYW_CONFIG = {
    companyId: 'your-company-id',
    apiKey: 'your-api-key',
    theme: 'light',
    position: 'bottom-right'
  };
</script>
<script src="https://your-chatbot.vercel.app/ayw-widget.js" async></script>

Step 6: WebSocket Support (Real-Time Chat)

Vercel doesn't support long-lived WebSocket connections. Use Vercel Edge Functions or external service:

Option 1: Vercel Edge (Limited)

// api/socket.ts (Edge Function)
export const config = {
  runtime: 'edge',
};

export default async function handler(request: Request) {
  // Edge runtime has limited WebSocket support
  // Best for simple HTTP polling fallback
  return new Response('WebSocket not supported in Edge', { status: 426 });
}

Option 2: External WebSocket Service (Recommended)

Use Pusher or Ably for real-time chat:

// Backend: Send message to Pusher
import Pusher from 'pusher';

const pusher = new Pusher({
  appId: process.env.PUSHER_APP_ID!,
  key: process.env.PUSHER_KEY!,
  secret: process.env.PUSHER_SECRET!,
  cluster: 'us2'
});

await pusher.trigger(`conversation-${id}`, 'new-message', {
  message: botResponse,
  timestamp: new Date()
});

// Frontend: Listen for messages
import Pusher from 'pusher-js';

const pusher = new Pusher('your-pusher-key', {
  cluster: 'us2'
});

const channel = pusher.subscribe(`conversation-${id}`);
channel.bind('new-message', (data) => {
  setMessages(prev => [...prev, data.message]);
});

Step 7: Preview Deployments (Game Changer)

Every pull request gets a unique preview URL:

PR #123: "Add sentiment analysis to chatbot"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ Frontend preview: https://ayw-frontend-git-pr-123.vercel.app
✅ Backend preview:  https://ayw-backend-git-pr-123.vercel.app
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Test the chatbot on preview:

Click the preview URL
Interact with the chatbot widget
Verify functionality before merging

Step 8: Custom Domain Setup

8.1 Add Domain in Vercel

Go to Vercel Dashboard → Project → Settings → Domains
Add chatbot.yourcompany.com
Update DNS records (Vercel provides instructions)

8.2 Update CORS Settings

// Backend: Update CORS origin
app.use(cors({
  origin: [
    'https://chatbot.yourcompany.com',
    'https://yourcompany.com',
    process.env.FRONTEND_URL!
  ],
  credentials: true
}));

Performance Optimization

1. Enable Caching for FAQ Responses

// Cache common responses (Redis or in-memory)
const faqCache = new Map<string, string>();

const getBotResponse = async (message: string) => {
  // Check cache first
  if (faqCache.has(message)) {
    return faqCache.get(message);
  }

  // Generate response
  const response = await openai.generateResponse(message);

  // Cache for 1 hour
  faqCache.set(message, response);
  setTimeout(() => faqCache.delete(message), 3600000);

  return response;
};

2. Use Vercel Edge for Geographic Proximity

// vercel.json
{
  "functions": {
    "api/chatbot.ts": {
      "runtime": "edge",
      "regions": ["iad1", "sfo1", "lhr1"] // US East, US West, London
    }
  }
}

Monitoring & Debugging

Vercel Dashboard

Deployments: See build logs, errors, and timing
Functions: View serverless function invocations
Speed Insights: Real-user performance metrics

Custom Logging

// Log chatbot interactions
await fetch('https://your-logging-endpoint.com/log', {
  method: 'POST',
  body: JSON.stringify({
    conversationId,
    message,
    response: botResponse,
    timestamp: new Date()
  })
});

Cost Breakdown (Vercel Pricing)

Hobby Plan (Free)

✅ Unlimited deployments
✅ Preview URLs
❌ Limited to 100 GB bandwidth/month
❌ No password protection for previews

Pro Plan ($20/month per member)

✅ 1 TB bandwidth/month
✅ Password-protected previews
✅ Advanced analytics
✅ Priority support

AYW Usage:

Resource	Free Tier	Our Usage	Cost
Bandwidth	100 GB	50 GB	Free
Serverless Functions	100 GB-hrs	10 GB-hrs	Free
Build Minutes	6,000	500	Free

Total: $0/month on Hobby plan (for now) 🎉

Common Deployment Issues

1. "DATABASE_URL not found"

Solution: Add env vars to all three environments (Production, Preview, Development) in Vercel.

2. "Prisma Client not initialized"

Solution: Ensure npx prisma generate runs in build step:

"scripts": {
  "vercel-build": "npx prisma generate && npm run build"
}

3. CORS Errors

Solution: Update CORS origin to include Vercel preview URLs:

const allowedOrigins = [
  'https://your-frontend.vercel.app',
  process.env.FRONTEND_URL!
];

// Add preview URL pattern
if (process.env.VERCEL_URL) {
  allowedOrigins.push(`https://${process.env.VERCEL_URL}`);
}

Complete Deployment Checklist

[ ] Frontend deployed to Vercel
[ ] Backend API deployed as serverless functions
[ ] Database (Neon/Supabase) connected
[ ] Environment variables set (all 3 environments)
[ ] Prisma migrations run (npx prisma migrate deploy)
[ ] Chatbot widget built and hosted on CDN
[ ] Custom domain configured (optional)
[ ] CORS origins updated
[ ] Health check endpoint working (/api/health)
[ ] Preview deployments tested on a PR

Resources

Vercel Docs: vercel.com/docs
AYW GitHub: github.com/ayw-ai/ayw-monorepo
Previous Article: Chatbot NLP: AYW's Approach
Neon PostgreSQL: neon.tech/docs

Your Turn: What's Your Deployment Setup?

Are you using Vercel, AWS, or something else for your chatbots?

What works well?
What's been frustrating?
Any tips for serverless chatbot deployments?

Drop a comment below! 👇

Tags: #Vercel #Deployment #Chatbots #React #NodeJS #Tutorial

Series: AYW Developer Tutorials (Part 5 of 6)