DEV Community

BrewHubPHL
BrewHubPHL

Posted on

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

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

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 is 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 ("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.


javascript
// 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).

We send the text to their API and get back an audio buffer.

// 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. Plus, 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 the developers, I've open-sourced the sync logic on GitHub: https://gist.github.com/BrewHubPHL/53937283c5eaa7cafedb9555e851c509
Enter fullscreen mode Exit fullscreen mode

Top comments (0)