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

# Next.js Landing Page

> Use the Next.js App Router example with gpt-5-mini and a serverless chat route.

This example wires `@openchatwidget/sdk` into a Next.js App Router project.
The `POST /api/chat` route uses OpenRouter with `openai/gpt-5-mini:online` (web search enabled).

<Frame>
  <img src="https://mintcdn.com/openchatwidget/ES52izNVSbgcdbAH/images/landing-page.png?fit=max&auto=format&n=ES52izNVSbgcdbAH&q=85&s=06dd35b1223df8bea08e5d2386081ddc" alt="Open Chat Widget on the Next.js landing page example." style={{ borderRadius: "0.75rem" }} width="3008" height="1698" data-path="images/landing-page.png" />
</Frame>

It includes:

* a landing page with `OpenChatWidget`
* a client wrapper for the widget
* a serverless `POST /api/chat` route handler

## Key files

* `examples/nextjs-landing-page/app/widget-client.tsx`
* `examples/nextjs-landing-page/app/api/chat/route.ts`
* `examples/nextjs-landing-page/src/landing/pages/LandingPage.tsx`

## Run it

1. Install dependencies:

```bash theme={null}
cd /Users/matt8p/Desktop/openchatwidget/examples/nextjs-landing-page
npm install
```

2. Configure environment variables:

```bash theme={null}
cp .env.example .env.local
```

```env theme={null}
OPENROUTER_API_KEY=your_key_here
```

3. Start the dev server:

```bash theme={null}
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

The widget is mounted on the page and sends requests to `/api/chat`.

<Card title="View repo folder" icon="github" href="https://github.com/Open-Chat-Widget/openchatwidget/tree/main/examples/nextjs-landing-page" horizontal>
  Open the full example source on GitHub.
</Card>