Example Next.JS Layercode travel agent which includes voice and dynamic UI.

Setup

Copy .env.examples to .env and fill in keys.

Layercode voice agent webhook setup

You'll need to create a Layercode voice agent at dash.layercode.com. We recommend using the Cartesia push-to-talk template.

Copy the Agent ID and save it in your .env as NEXT_PUBLIC_LAYERCODE_PIPELINE_ID.

In the agent, switch from Demo Backend to Your Backend and you'll be asked to enter a Webhook URL. This webhook will need to be pointed at the app/api/webhook/route.js route.

If you've deployed this demo to Vercel, you can put in the public url. E.g. https://my-travel-agent-demo.vercel.app/api/agent/webhook

If you want to receive the webhook to localhost (whilst running this demo locally with npm run dev), you'll need to setup a tunnel. Cloudflared (install cloudflared) makes this easy:

cloudflared tunnel --url http://localhost:3000

Copy the domain cloudflared assigned to you, and add /api/agent/webhook. E.g. https://david-insulin-groups-cnet.trycloudflare.com/api/agent/webhook and then use this is the Webhook URL config in your Layercode dashboard agent.

NOTE: every time you restart cloudflared your tunnel domain will be different, and you will need to update the Webhook URL for the agent at dash.layercode.com.

Local dev notes

NOTE: You should set reactStrictMode to false so that you don't end up with multiple voice instances when testing locally. In next.config.mjs add:

const nextConfig = {
  reactStrictMode: false,
};