How I Built an AI Barista using Square, Supabase, and ElevenLabs

Source: Dev.to

Overview

I run a tech‑forward coffee hub in Philadelphia called BrewHubPHL. When we opened, I didn’t just want a screen flashing “Order Ready”—I wanted the shop to speak.

Here’s how I used Supabase Edge Functions to glue Square POS and ElevenLabs together, creating an automated announcer for our orders.

The Stack

• Database & Auth: Supabase
• Payments: Square (POS and Webhooks)
• Voice AI: ElevenLabs (Turbo v2 model)
• Compute: Netlify Functions

The Workflow

1. Square detects a payment (payment.updated).
2. Supabase receives the webhook and routes it.
3. ElevenLabs generates the audio file (e.g., “Order for John is ready!”).
4. The frontend plays the audio automatically.

Step 1: Catching the Square Webhook

First, we need to know when an order is actually paid. We set up a serverless function to listen for Square’s payment.updated event.

// square-webhook.js
exports.handler = async (event) => {
  const body = JSON.parse(event.body);

  if (
    body.type === 'payment.updated' &&
    body.data.object.payment.status === 'COMPLETED'
  ) {
    const orderId = body.data.object.payment.reference_id;

    // Update Supabase
    await supabase
      .from('orders')
      .update({ status: 'paid' })
      .eq('id', orderId);

    // Trigger the Announcer
    await triggerVoiceAnnouncement(orderId);
  }
};

Step 2: Generating the Voice

This is where the magic happens. We don’t want a robotic “text‑to‑speech” voice; we want personality. I used the ElevenLabs Turbo v2 model because it has low latency (essential for real‑time retail).

// text-to-speech.js
const response = await fetch(
  `https://api.elevenlabs.io/v1/text-to-speech/${VOICE_ID}`,
  {
    method: 'POST',
    headers: {
      'xi-api-key': process.env.ELEVENLABS_API_KEY,
    },
    body: JSON.stringify({
      text: "Order ready for specific_customer!",
      model_id: 'eleven_turbo_v2',
      voice_settings: { stability: 0.5, similarity_boost: 0.75 },
    }),
  }
);

Why Build This?

It’s not just a gimmick. In a busy shop, customers tune out shouting baristas. A distinct, consistent AI voice cuts through the noise. By integrating it directly with Square and Supabase, we have zero manual work—the barista just taps “Charge,” and the code does the rest.

For developers, the sync logic is open‑sourced on GitHub: