> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsmartalex.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Add AI voice to a Next.js app on Vercel
> Embed the SmartAlex voice AI widget in a Next.js app with the next/script Script component (strategy afterInteractive) or a React component, then ship it on Vercel.
Next.js is the one place where the widget is a real, first-class component rather than a pasted string. You have two clean paths: the `next/script` **Script** component (the idiomatic way to load third-party scripts) or a small **React component** that mounts the script from a client effect. Both render your live agent "Alex" as a floating widget that can talk, qualify, and book. This is the fastest way to add an AI voice widget to Next.js and have it live on Vercel in one deploy.
Alex is backed by curated, high-accuracy speech, language, and voice models, kept abstracted behind the platform. You build and style the agent once inside SmartAlex; your Next.js app just loads one script.
The widget is a browser overlay, so it works the same whether you use the App Router or the Pages Router, and whether pages are statically generated, server-rendered, or use ISR. Rendering strategy does not matter: the script runs on the client after hydration.
## Before you start
Create and deploy an agent in Studio first, so the widget has something to answer with. See [Create an agent](/studio/create-agent).
Open Widget Studio in SmartAlex and copy the install code. It contains your workspace `data-tenant-id`. You can also get it from the MCP tool `smartalex_get_widget_install_code`. Full walkthrough: [Widget install](/essentials/widget-install).
## The one value you need
The widget takes a single attribute, `data-tenant-id`. There is no `data-variant`, `data-agent`, or `data-color`. The widget reads its published config (variant, colours, which agent) from the server at load time, so the snippet is identical for every variant and restyling in Widget Studio never means shipping a new deploy.
Keep the id in an environment variable so it is easy to change per environment. In Next.js, a value that must reach the browser has to be prefixed `NEXT_PUBLIC_`:
```bash .env.local theme={null}
NEXT_PUBLIC_SMARTALEX_TENANT_ID=YOUR_TENANT_ID
```
Set the same variable in the Vercel dashboard under **Project settings, Environment Variables** for Production, Preview, and Development.
## Option A: the next/script Script component
This is the recommended path. `next/script` de-duplicates the script across client-side navigations, controls when it loads, and keeps it out of your critical render path. Use `strategy="afterInteractive"` so the widget loads right after the page becomes interactive, not before first paint.
```tsx app/layout.tsx (App Router) theme={null}
import Script from "next/script";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
```tsx pages/_app.tsx (Pages Router) theme={null}
import type { AppProps } from "next/app";
import Script from "next/script";
export default function App({ Component, pageProps }: AppProps) {
return (
<>
);
}
```
Do not use `strategy="beforeInteractive"` for the widget. That strategy is meant for scripts the page cannot render without, and it must live in the document head. The widget is an overlay, so `afterInteractive` (or `lazyOnload` if you want it to wait until the browser is idle) is correct. `next/script` forwards the `data-tenant-id` attribute straight through to the injected `