我如何使用 Square、Supabase 和 ElevenLabs 构建 AI咖啡师

Source: Dev.to

概览

我在费城运营一家技术前沿的咖啡中心 BrewHubPHL。开店时，我不想只看到屏幕上闪烁的“订单已准备好”字样——我想让店铺能够说话。

下面介绍我如何使用 Supabase Edge Functions 将 Square POS 与 ElevenLabs 粘合在一起，为我们的订单创建一个自动播报系统。

技术栈

• 数据库与认证: Supabase
• 支付: Square（POS 与 Webhooks）
• 语音 AI: ElevenLabs（Turbo v2 模型）
• 计算: Netlify Functions

工作流程

1. Square 检测到付款 (payment.updated)。
2. Supabase 接收 webhook 并进行路由。
3. ElevenLabs 生成音频文件（例如，“John 的订单已准备好！”）。
4. 前端自动播放音频。

步骤 1：捕获 Square Webhook

首先，我们需要知道订单何时实际完成付款。我们设置了一个无服务器函数来监听 Square 的 payment.updated 事件。

// 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);
  }
};

步骤 2：生成语音

这一步是关键。我们不想要机械的“文字转语音”声音，而是希望有个性。我使用了 ElevenLabs 的 Turbo v2 模型，因为它延迟低（对实时零售至关重要）。

// 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 },
    }),
  }
);

为什么要这样做？

这不仅仅是噱头。在繁忙的咖啡店里，顾客往往会对大声喊叫的咖啡师产生免疫。一个独特且一致的 AI 声音能够在噪音中脱颖而出。通过直接与 Square 和 Supabase 集成，我们实现了零人工操作——咖啡师只需点击“收费”，其余工作全部由代码完成。

开发者可以在 GitHub 上找到同步逻辑的开源代码：