Build an AI Booking Assistant

# Create a Next.js 14 booking assistant with:
# - App router with streaming chat page
# - Vercel AI SDK integration with Claude
# - Supabase client setup with booking tables
# - Tool definitions for check_availability and create_booking
# - TypeScript types for Booking, TimeSlot, Guest

npx create-next-app@latest booking-assistant --typescript --tailwind --app
cd booking-assistant
npm install ai @anthropic-ai/sdk @supabase/supabase-js

'use client';

import { useChat } from 'ai/react';
import { useState } from 'react';

export default function BookingChat() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat({
      api: '/api/chat',
      initialMessages: [{
        id: 'welcome',
        role: 'assistant',
        content: `Hi! I'm your booking assistant. I can help you
          make a reservation, check availability, or modify
          an existing booking. How can I help you today?`
      }]
    });

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto">
      <header className="p-4 border-b">
        <h1 className="text-xl font-semibold">Booking Assistant</h1>
      </header>

      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${
              message.role === 'user' ? 'justify-end' : 'justify-start'
            }`}
          >
            <div
              className={`max-w-[80%] rounded-2xl px-4 py-2 ${
                message.role === 'user'
                  ? 'bg-orange-500 text-white'
                  : 'bg-gray-100 text-gray-900'
              }`}
            >
              {message.content}
            </div>
          </div>
        ))}
        {isLoading && (
          <div className="flex justify-start">
            <div className="bg-gray-100 rounded-2xl px-4 py-2">
              <span className="animate-pulse">Thinking...</span>
            </div>
          </div>
        )}
      </div>

      <form onSubmit={handleSubmit} className="p-4 border-t">
        <div className="flex gap-2">
          <input
            value={input}
            onChange={handleInputChange}
            placeholder="Type your message..."
            className="flex-1 rounded-full px-4 py-2 border focus:outline-none focus:ring-2 focus:ring-orange-500"
          />
          <button
            type="submit"
            disabled={isLoading}
            className="bg-orange-500 text-white rounded-full px-6 py-2 hover:bg-orange-600 disabled:opacity-50"
          >
            Send
          </button>
        </div>
      </form>
    </div>
  );
}

-- Bookable resources (tables, rooms, etc.)
CREATE TABLE resources (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  type TEXT NOT NULL, -- 'table', 'room', etc.
  capacity INTEGER NOT NULL,
  metadata JSONB DEFAULT '{}'
);

-- Time slots for availability
CREATE TABLE time_slots (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  resource_id UUID REFERENCES resources(id),
  start_time TIMESTAMPTZ NOT NULL,
  end_time TIMESTAMPTZ NOT NULL,
  is_available BOOLEAN DEFAULT true
);

-- Guest information
CREATE TABLE guests (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  email TEXT,
  phone TEXT,
  notes TEXT,
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Bookings
CREATE TABLE bookings (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  guest_id UUID REFERENCES guests(id),
  resource_id UUID REFERENCES resources(id),
  time_slot_id UUID REFERENCES time_slots(id),
  party_size INTEGER NOT NULL,
  status TEXT DEFAULT 'confirmed',
  special_requests TEXT,
  confirmation_code TEXT UNIQUE,
  created_at TIMESTAMPTZ DEFAULT now()
);

-- Index for fast availability queries
CREATE INDEX idx_time_slots_availability
ON time_slots(start_time, is_available)
WHERE is_available = true;

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_KEY!
);

export interface AvailabilityQuery {
  date: string;      // ISO date string
  partySize: number;
  preferredTime?: string; // 'morning', 'afternoon', 'evening', or HH:MM
}

export interface TimeSlotResult {
  id: string;
  startTime: string;
  endTime: string;
  resourceName: string;
  resourceId: string;
}

export async function checkAvailability(
  query: AvailabilityQuery
): Promise<TimeSlotResult[]> {
  const { date, partySize, preferredTime } = query;

  // Build time range based on preference
  let startHour = 11;
  let endHour = 22;

  if (preferredTime === 'morning') {
    startHour = 11; endHour = 14;
  } else if (preferredTime === 'afternoon') {
    startHour = 14; endHour = 17;
  } else if (preferredTime === 'evening') {
    startHour = 17; endHour = 22;
  } else if (preferredTime) {
    // Specific time - search ±2 hours
    const [hours] = preferredTime.split(':').map(Number);
    startHour = Math.max(11, hours - 2);
    endHour = Math.min(22, hours + 2);
  }

  const startDate = new Date(`${date}T${startHour}:00:00`);
  const endDate = new Date(`${date}T${endHour}:00:00`);

  // Query available slots with capacity
  const { data, error } = await supabase
    .from('time_slots')
    .select(`
      id,
      start_time,
      end_time,
      resources!inner (
        id,
        name,
        capacity
      )
    `)
    .eq('is_available', true)
    .gte('start_time', startDate.toISOString())
    .lte('start_time', endDate.toISOString())
    .gte('resources.capacity', partySize)
    .order('start_time');

  if (error) throw error;

  return data.map(slot => ({
    id: slot.id,
    startTime: slot.start_time,
    endTime: slot.end_time,
    resourceName: slot.resources.name,
    resourceId: slot.resources.id
  }));
}

import { anthropic } from '@ai-sdk/anthropic';
import { streamText, tool } from 'ai';
import { z } from 'zod';
import { checkAvailability } from '@/lib/availability';
import { createBooking } from '@/lib/bookings';

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: anthropic('claude-sonnet-4-20250514'),
    system: `You are a friendly booking assistant for The Grand Hotel
& Restaurant. Help guests make reservations conversationally.

When checking availability:
- Parse natural language dates ("next Saturday", "tomorrow")
- Understand time preferences ("evening", "around 7pm", "dinner time")
- Ask for party size if not provided

When making bookings:
- Collect guest name and phone number
- Confirm all details before booking
- Provide the confirmation code after booking

Be warm, professional, and efficient. Use a conversational tone.`,
    messages,
    tools: {
      checkAvailability: tool({
        description: 'Check available time slots for a booking',
        parameters: z.object({
          date: z.string().describe('ISO date (YYYY-MM-DD)'),
          partySize: z.number().describe('Number of guests'),
          preferredTime: z.string().optional()
            .describe('morning, afternoon, evening, or HH:MM')
        }),
        execute: async ({ date, partySize, preferredTime }) => {
          const slots = await checkAvailability({
            date, partySize, preferredTime
          });
          return {
            availableSlots: slots,
            message: slots.length > 0
              ? `Found ${slots.length} available times`
              : 'No availability for those criteria'
          };
        }
      }),

      createBooking: tool({
        description: 'Create a new booking reservation',
        parameters: z.object({
          timeSlotId: z.string().describe('ID of selected time slot'),
          guestName: z.string().describe('Guest full name'),
          guestPhone: z.string().describe('Phone number'),
          guestEmail: z.string().optional().describe('Email address'),
          partySize: z.number().describe('Number of guests'),
          specialRequests: z.string().optional()
        }),
        execute: async (params) => {
          const booking = await createBooking(params);
          return {
            success: true,
            confirmationCode: booking.confirmationCode,
            bookingDetails: booking
          };
        }
      })
    },
    maxSteps: 5, // Allow multi-step conversations
  });

  return result.toDataStreamResponse();
}

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export interface BookingConfirmation {
  guestName: string;
  guestEmail: string;
  guestPhone: string;
  confirmationCode: string;
  dateTime: string;
  partySize: number;
  venueName: string;
}

export async function sendBookingConfirmation(
  booking: BookingConfirmation
) {
  const { guestName, guestEmail, confirmationCode, dateTime, partySize } = booking;

  // Send email confirmation
  await resend.emails.send({
    from: 'bookings@thegrandhotel.com',
    to: guestEmail,
    subject: `Booking Confirmed - ${confirmationCode}`,
    html: `
      <h1>Your Reservation is Confirmed!</h1>
      <p>Dear ${guestName},</p>
      <p>We're delighted to confirm your reservation:</p>
      <ul>
        <li><strong>Date & Time:</strong> ${formatDateTime(dateTime)}</li>
        <li><strong>Party Size:</strong> ${partySize} guests</li>
        <li><strong>Confirmation Code:</strong> ${confirmationCode}</li>
      </ul>
      <p>To modify or cancel, reply to this email or chat with
      our booking assistant.</p>
      <p>We look forward to seeing you!</p>
    `
  });

  // Optional: Send SMS via Twilio
  if (process.env.TWILIO_ENABLED) {
    await sendSMS(booking.guestPhone,
      `Booking confirmed at The Grand! ${formatDateTime(dateTime)} ` +
      `for ${partySize}. Code: ${confirmationCode}`
    );
  }
}

function formatDateTime(isoString: string): string {
  return new Date(isoString).toLocaleString('en-US', {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: '2-digit'
  });
}

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

export default function AdminDashboard() {
  const [bookings, setBookings] = useState([]);
  const [filter, setFilter] = useState('today');

  useEffect(() => {
    // Initial fetch
    fetchBookings();

    // Real-time subscription
    const subscription = supabase
      .channel('bookings')
      .on('postgres_changes', {
        event: '*',
        schema: 'public',
        table: 'bookings'
      }, () => fetchBookings())
      .subscribe();

    return () => subscription.unsubscribe();
  }, [filter]);

  async function fetchBookings() {
    const today = new Date().toISOString().split('T')[0];

    const { data } = await supabase
      .from('bookings')
      .select(`
        *,
        guests (name, phone, email),
        time_slots (start_time, end_time),
        resources (name)
      `)
      .gte('time_slots.start_time', `${today}T00:00:00`)
      .order('time_slots.start_time');

    setBookings(data || []);
  }

  return (
    <div className="p-8 max-w-6xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Booking Dashboard</h1>

      <div className="grid gap-4">
        {bookings.map((booking) => (
          <div
            key={booking.id}
            className="p-4 border rounded-lg flex justify-between items-center"
          >
            <div>
              <p className="font-semibold">{booking.guests.name}</p>
              <p className="text-sm text-gray-600">
                {formatTime(booking.time_slots.start_time)} -
                {booking.resources.name} -
                {booking.party_size} guests
              </p>
            </div>
            <div className="flex gap-2">
              <span className={`px-3 py-1 rounded-full text-sm ${
                booking.status === 'confirmed'
                  ? 'bg-green-100 text-green-800'
                  : 'bg-yellow-100 text-yellow-800'
              }`}>
                {booking.status}
              </span>
              <span className="text-sm text-gray-500">
                {booking.confirmation_code}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}