> ## Documentation Index
> Fetch the complete documentation index at: https://docs.layercode.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start

> Create your first AI voice agent in minutes.

Let's build a **production-ready voice agent** that can **respond to users** and trigger **function calls**.

Here's a [preview](https://live-website-demo.layercode.workers.dev/) of what you will build:

* Real-time **speech-to-text**, **text-to-speech**, **turn-taking**, and **low-latency audio delivery** powered by Layercode's edge platform.
* A sample **agent backend** that monitors conversation transcripts and responds based on your prompt and the **tool calls** you define. Deployable anywhere.

<Tabs>
  <Tab title="CLI (recommended for Next.js)">
    ```bash theme={null}
    npx @layercode/cli init
    ```

    After the CLI finishes, you will see something like this:

    <img className="mx-auto mb-8" src="https://mintcdn.com/layercode/lpNR2D-ChEBfaQs7/images/outcome-cli.png?fit=max&auto=format&n=lpNR2D-ChEBfaQs7&q=85&s=81fbeea4a19ede0e9e5cef700e09971f" alt="Outcome of the CLI" width="1242" height="596" data-path="images/outcome-cli.png" />

    ### Try it out

    Once everything boots, you can start a conversation locally (typically at [http://localhost:3000/](http://localhost:3000/)).

    <img className="mx-auto mb-8" src="https://mintcdn.com/layercode/lpNR2D-ChEBfaQs7/images/layercode-running.png?fit=max&auto=format&n=lpNR2D-ChEBfaQs7&q=85&s=062b42997e06364b4869a64f6298cf27" alt="Layercode running a conversation" width="2736" height="1890" data-path="images/layercode-running.png" />

    ## Video walkthrough

    Prefer a walkthrough? Watch the quick demo below.

    <iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/cxflq-cbF7o" title="Layercode CLI walkthrough" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
  </Tab>

  <Tab title="Manual setup (Next.js)">
    Learn how to create your first voice agent for real-time conversational AI. This guide walks through logging in, creating an agent, and testing it in the playground.

    ## Sign up, log in, and grab your keys

    1. Visit [dash.layercode.com](https://dash.layercode.com) and log in or sign up if you haven't already.
    2. Create a new agent or use the agent that Layercode auto-creates for you.
    3. Copy the agent ID for later.
    4. Click **Connect your backend**, copy the **Webhook secret**, and save it for later.
    5. In **Account settings**, copy your **Layercode API key** and save it for later.

    ## Choose your stack

    <Tabs>
      <Tab title="Next.js with Cloudflare (recommended)">
        <Note>
          You will need a Google Gemini API key.
        </Note>

        ## Clone our example repo

        ```bash theme={null}
        git clone https://github.com/layercodedev/fullstack-nextjs-cloudflare.git
        cd fullstack-nextjs-cloudflare
        ```

        ### Install dependencies

        <CodeGroup>
          ```bash npm theme={null}
          npm install
          ```

          ```bash pnpm theme={null}
          pnpm install
          ```

          ```bash yarn theme={null}
          yarn install
          ```

          ```bash bun theme={null}
          bun install
          ```
        </CodeGroup>

        Create an `.env` file (you can copy `.env.example`).

        Populate the variables with the values you grabbed from Layercode in the first step.

        ```
        NEXTJS_ENV=development
        NEXT_PUBLIC_LAYERCODE_AGENT_ID=
        LAYERCODE_API_KEY=
        LAYERCODE_WEBHOOK_SECRET=
        GOOGLE_GENERATIVE_AI_API_KEY=
        ```

        Now run your project with `npm run dev`.

        ### Set up a tunnel

        To let Layercode reach your app, expose it to the internet during development.

        We recommend <a href="https://github.com/cloudflare/cloudflared">Cloudflared</a>, Cloudflare's tunneling utility. Follow our [Cloudflare Tunnel guide](/how-tos/tunnelling) to install it.

        Once it is installed, run:

        ```bash theme={null}
        cloudflared tunnel --url http://localhost:*PORT_NUMBER*
        ```

        ### Get your Cloudflared tunnel URL

        The logs include a URL similar to `https://phone-tom-applying-individually.trycloudflare.com`.

        <img className="mx-auto mb-8" src="https://mintcdn.com/layercode/M7xHCbGftyn9wx8C/images/cloudflared-logs.png?fit=max&auto=format&n=M7xHCbGftyn9wx8C&q=85&s=662527e2c7712867d3f4d1d1cf33a427" alt="Cloudflared logs output" width="1280" height="720" data-path="images/cloudflared-logs.png" />

        ### Save your URL in the dashboard

        Append **`/api/agent`** to the URL (for example, `https://phone-tom-applying-individually.trycloudflare.com/api/agent`).

        Head to the **Layercode dashboard** at [https://dash.layercode.com/](https://dash.layercode.com/).

        Open the agent you are working with, click **Connect your backend**, and paste the URL into **Webhook URL**. Save your changes.

        <img className="mx-auto mb-8" src="https://mintcdn.com/layercode/M7xHCbGftyn9wx8C/images/set-webhook-url.png?fit=max&auto=format&n=M7xHCbGftyn9wx8C&q=85&s=aa5a48617d1782b1de80e4250d95220b" alt="Set your webhook url" width="1470" height="1586" data-path="images/set-webhook-url.png" />

        (yes I did roll the secret)

        Refresh your app and test it. It should work—and if you get stuck, <a href="mailto:support@layercode.com">email us</a> and we'll help.

        ## It lives

        Your agent should now be working—go check it out!
      </Tab>

      {/* <Tab title="Python & React">
                    <PythonGettingStarted />
                </Tab> */}
    </Tabs>
  </Tab>

  <Tab title="Other guides">
    We have guides for stacks that aren't Next.js and do not yet have quick starts (we're working on them).

    ### Backend guides

    * [Node.js (Express)](/tutorials/nodejs)
    * [Python (Fastify)](/tutorials/python)

    ### Frontend guides

    * [Vanilla JS](/tutorials/vanilla-js)
    * [React](/tutorials/react)
  </Tab>
</Tabs>

***

## Next steps

> Keep iterating—here are the next things builders usually tackle.

### Customize your prompts

Adjust the `prompt` or `welcome_message` in `layercode.config.json`.

```json layercode.config.json theme={null}
{
  "layercode_agent_id": "ibcjp4z0",
  "prompt": "You are having a spoken conversation with the user.",
  "welcome_message": "Hey, how can I help you today?"
}
```

### Add a tool call

The project ships with an example tool in `/app/api/agent/route.ts`. Modify it or add your own.

```ts /app/api/agent/route.ts theme={null}
const weather = tool({
  description: 'Get the weather in a location',
  inputSchema: z.object({
    location: z.string().describe('The location to get the weather for')
  }),
  execute: async ({ location }) => {
    stream.data({ isThinking: true });
    // do something to get the weather
    stream.data({ isThinking: false });

    return {
      location,
      temperature: 72 + Math.floor(Math.random() * 21) - 10
    };
  }
});
```

Learn more about [tool calling in Next.js](/how-tos/tool-calling-js) or review the general [tool calling guide](/explanations/tool-calling).

### Store your messages

Set up persistent storage for transcripts. A fast database or data store such as Cloudflare D1 or Redis works well. A dedicated guide is coming soon.

### Deploy your voice agent backend

Layercode runs the voice pipeline in our cloud, but your backend APIs (and frontend, if you are not using Next.js or telephony) need to be deployed.

Use the deployment guides:

* [Deploy Next.js to Cloudflare](/how-tos/deploy-nextjs-to-cloudflare)
* [Deploy Next.js to Vercel](/how-tos/deploy-nextjs-to-vercel)

Remember to set your environment variables in the hosting platform and update the Layercode dashboard with the deployed webhook URL.

### Set up telephony

Follow the [Twilio setup guide](/how-tos/setting-up-twilio) to add phone-call support.

### Use the Layercode tunnel

We provide a [tunnel utility](/api-reference/cli#tunnel) for local development.

```bash theme={null}
# Start a tunnel for agent dtv3x3d2 on port 5173 with the API located at /api/voice-agent
npx @layercode/cli tunnel --agent-id=dtv3x3d2 --port=5173 --path=/api/voice-agent --tail
```